페이지가 서버 측 처리 페이지에 도달하기 전에 다시로드됩니다. 어떤 아이디어?

Question

다음 코드는 데이터를 데이터베이스에 게시하는 webmethod에 대한 여러 ajax 호출과 함께 JSON 객체를 사용합니다.

제출 버튼을 클릭하면 데이터가 처리되기 전에 페이지가 다시로드되므로 @paremeter가 필요하지만 제공되지 않는다는 오류가 발생합니다. 이것은 처리를 위해 asp.net 코드 숨김으로 전달되는 모든 양식 필드에 발생합니다.

왜 이런 일이 발생하는지 파악하는 데 어려움이 있습니다.

누구에게 아이디어가 있습니까? 코드 숨김에

     function getAllEmpData() { 
          var data = []; 
          $('tr.data-contact-person0').each(function() { 
           var ename = $(this).find('.employeename01').val(); 
           var etitle = $(this).find('.employeetitle01').val(); 
           var email = $(this).find('.employeeemail01').val(); 
           var alldata = { 
            'emplName': ename, 
            'emplTitle': etitle, 
            'empMail': email 
           } 
           data.push(alldata); 
          }); 
          console.log(data); 
          return data; 
         } 

         function getAllSourcepData() { 
          var data = []; 
          $('tr.data-contact-person1').each(function() { 
           var sname = $(this).find('.sourcename01').val(); 
           var saddress = $(this).find('.sourceaddress01').val(); 
           var sincome = $(this).find('.sourceincome01').val(); 
           var alldata = { 
            'mySource': sname, 
            'mySAddress': saddress, 
            'mySIncome': sincome 
           } 
           data.push(alldata); 
          }); 
          console.log(data); 
          return data; 
         } 

         function getAllSpouseData() { 
          var data = []; 
          $('tr.data-contact-person2').each(function() { 
           var spname = $(this).find('.spousename01').val(); 
           var spaddress = $(this).find('.spouseaddress01').val(); 
           var spincome = $(this).find('.spouseincome01').val(); 
           var alldata = { 
            'mySpouse': spname, 
            'mySPAddress': spaddress, 
            'mySPIncome': spincome 
           } 
           data.push(alldata); 
          }); 
          console.log(data); 
          return data; 
         } 
         function getAllDividentData() { 
          var data = []; 
          $('tr.data-contact-person3').each(function() { 
           var divname = $(this).find('.dividentname01').val(); 
           var divaddress = $(this).find('.dividentaddress01').val(); 
           var divincome = $(this).find('.dividentincome01').val(); 
           var alldata = { 
            'myDivName': divname, 
            'myDivAddress': divaddress, 
            'myDivIncome': divincome 
           } 
           data.push(alldata); 
          }); 
          console.log(data); 
          return data; 
         } 
         function getAllReimbursedData() { 
          var data = []; 
          $('tr.data-contact-person4').each(function() { 
           var reimname = $(this).find('.reimbursmentname01').val(); 
           var reimaddress = $(this).find('.reimbursmentaddress01').val(); 
           var reimincome = $(this).find('.reimbursmentincome01').val(); 
           var alldata = { 
            'myReimbursName': reimname, 
            'myReimbursAddress': reimaddress, 
            'myReimbursIncome': reimincome 
           } 
           data.push(alldata); 
          }); 
          console.log(data); 
          return data; 
         } 
         function getAllHonorariaData() { 
          var data = []; 
          $('tr.data-contact-person5').each(function() { 
           var honorname = $(this).find('.inputHonoraria01').val(); 
           var alldata = { 
            'myHonorname': honorname 
           } 
           data.push(alldata); 
          }); 
          console.log(data); 
          return data; 
         } 
         function getAllGiftData() { 
          var data = []; 
          $('tr.data-contact-person6').each(function() { 
           var gifname = $(this).find('.giftname01').val(); 
           var gifaddress = $(this).find('.giftaddress01').val(); 
           var gifincome = $(this).find('.giftincome01').val(); 
           var alldata = { 
            'myGiftname': gifname, 
            'myGiftaddress': gifaddress, 
            'myGiftincome': gifincome 
           } 
           data.push(alldata); 
          }); 
          console.log(data); 
          return data; 
         } 
         function getAllOrgData() { 
          var data = []; 
          $('tr.data-contact-person7').each(function() { 
           var orgsname = $(this).find('.orgname01').val(); 
           var orgsaddress = $(this).find('.orgaddress01').val(); 
           var orgsincome = $(this).find('.orgincome01').val(); 
           var alldata = { 
            'myOrgname': orgsname, 
            'myOrgaddress': orgsaddress, 
            'myOrgincome': orgsincome 
           } 
           data.push(alldata); 
          }); 
          console.log(data); 
          return data; 
         } 
         function getAllCreditorData() { 
          var data = []; 
          $('tr.data-contact-person8').each(function() { 
           var creditname = $(this).find('.creditorname01').val(); 
           var creditaddress = $(this).find('.creditoraddress01').val(); 
           var creditincome = $(this).find('.creditorincome01').val(); 
           var alldata = { 
            'myCreditorname': creditname, 
            'myCreditoraddress': creditaddress, 
            'myCreditorincome': creditincome 
           } 
           data.push(alldata); 
          }); 
          console.log(data); 
          return data; 
         } 
         $("#btnSubmit").click(function() { 
          var empComplete = false, sourceComplete = false, spouseComplete = false, dividentComplete = false, reimbursedComplete = false, honorariaComplete = false, giftComplete = false, orgComplete = false, creditorComplete = false; 
          function checkComplete() { 
           if (empComplete && sourceComplete && spouseComplete && dividentComplete && reimbursedComplete && honorariaComplete && giftComplete && orgComplete && creditorComplete) { 
            $("#result").text("All complete"); 
           } 
          } 
          $("#result").text(""); 
          var data = JSON.stringify(getAllEmpData()); 
          console.log(data); 
          $.ajax({ 
           url: 'closures.aspx/SaveEmpData', 
           type: 'POST', 
           contentType: 'application/json; charset=utf-8', 
           data: JSON.stringify({ 'empdata': data }), 
           success: function() { 
            empComplete = true; 
            checkComplete(); 
           }, 
           error: function (xhr, status, error) { 
            alert(xhr.responseText); 
           } 
          }); 
          var data = JSON.stringify(getAllSourcepData()); 
          console.log(data); 
          $.ajax({ 
           url: 'closures.aspx/SaveSourceData', 
           type: 'POST', 
           contentType: 'application/json; charset=utf-8', 
           data: JSON.stringify({ 'empdata': data }), 
           success: function() { 
            sourceComplete = true; 
            checkComplete(); 
           }, 
           error: function (xhr, status, error) { 
            alert(xhr.responseText); 
           } 
          }); 
          var data = JSON.stringify(getAllSpouseData()); 
          console.log(data); 
          $.ajax({ 
           url: 'closures.aspx/SaveSpousData', 
           type: 'POST', 
           contentType: 'application/json; charset=utf-8', 
           data: JSON.stringify({ 'empdata': data }), 
           success: function() { 
            spouseComplete = true; 
            checkComplete(); 
           }, 
           error: function (xhr, status, error) { 
            alert(xhr.responseText); 
           } 
          }); 
          var data = JSON.stringify(getAllDividentData()); 
          console.log(data); 
          $.ajax({ 
           url: 'closures.aspx/SaveDividentData', 
           type: 'POST', 
           contentType: 'application/json; charset=utf-8', 
           data: JSON.stringify({ 'empdata': data }), 
           success: function() { 
            dividentComplete = true; 
            checkComplete(); 
           }, 
           error: function (xhr, status, error) { 
            alert(xhr.responseText); 
           } 
          }); 
          var data = JSON.stringify(getAllReimbursedData()); 
          console.log(data); 
          $.ajax({ 
           url: 'closures.aspx/SaveReimbursedData', 
           type: 'POST', 
           contentType: 'application/json; charset=utf-8', 
           data: JSON.stringify({ 'empdata': data }), 
           success: function() { 
            reimbursedComplete = true; 
            checkComplete(); 
           }, 
           error: function (xhr, status, error) { 
            alert(xhr.responseText); 
           } 
          }); 
          var data = JSON.stringify(getAllHonorariaData()); 
          console.log(data); 
          $.ajax({ 
           url: 'closures.aspx/SaveHonorariaData', 
           type: 'POST', 
           contentType: 'application/json; charset=utf-8', 
           data: JSON.stringify({ 'empdata': data }), 
           success: function() { 
            honorariaComplete = true; 
            checkComplete(); 
           }, 
           error: function (xhr, status, error) { 
            alert(xhr.responseText); 
           } 
          }); 
          var data = JSON.stringify(getAllGiftData()); 
          console.log(data); 
          $.ajax({ 
           url: 'closures.aspx/SaveGiftData', 
           type: 'POST', 
           contentType: 'application/json; charset=utf-8', 
           data: JSON.stringify({ 'empdata': data }), 
           success: function() { 
            giftComplete = true; 
            checkComplete(); 
           }, 
           error: function (xhr, status, error) { 
            alert(xhr.responseText); 
           } 
          }); 
          var data = JSON.stringify(getAllOrgData()); 
          console.log(data); 
          $.ajax({ 
           url: 'closures.aspx/SaveOrgData', 
           type: 'POST', 
           contentType: 'application/json; charset=utf-8', 
           data: JSON.stringify({ 'empdata': data }), 
           success: function() { 
            orgComplete = true; 
            checkComplete(); 
           }, 
           error: function (xhr, status, error) { 
            alert(xhr.responseText); 
           } 
          }); 
          var data = JSON.stringify(getAllCreditorData()); 
          console.log(data); 
          $.ajax({ 
           url: 'closures.aspx/SaveCreditorData', 
           type: 'POST', 
           contentType: 'application/json; charset=utf-8', 
           data: JSON.stringify({ 'empdata': data }), 
           success: function() { 
            creditorComplete = true; 
            checkComplete(); 
           } 
          }); 
         }); 

// 웹 메쏘드 :

<WebMethod(EnableSession:=True)> _ 
    Public Shared Function SaveEmpData(empdata As String) As String 
     Dim serializedData = JsonConvert.DeserializeObject(Of List(Of Employee))(empdata) 
     Using con = New SqlConnection(Constr) 
      If con.State = ConnectionState.Closed Then 
       con.Open() 
      End If 
      ' Dim cmdGetKey As New SqlCommand("Select Max(employeeID) From Employees", con) 
      ' Dim ID As Integer = cmdGetKey.ExecuteScalar() 

      For Each data As Employee In serializedData 
       Using cmd1 = New SqlCommand("INSERT INTO Employees(EmployeeName,empTitle,email) Values (@ename, @title,@email)") 
        cmd1.CommandType = CommandType.Text 
        cmd1.Parameters.AddWithValue("@ename", data.emplName) 
        cmd1.Parameters.AddWithValue("@title", data.emplTitle) 
        cmd1.Parameters.AddWithValue("@email", data.empMail) 
        cmd1.Connection = con 
        cmd1.ExecuteNonQuery() 
        Dim cmdGetKey As New SqlCommand("SELECT @@IDENTITY", con) 
        Dim ID As Integer = cmdGetKey.ExecuteScalar() 
        HttpContext.Current.Session("empID") = ID 
       End Using 
      Next 
      con.Close() 
     End Using 
     Return Nothing 
    End Function 

    <WebMethod(EnableSession:=True)> _ 
    Public Shared Function SaveSourceData(empdata As String) As String 
     ' Dim ID As Integer = HttpContext.Current.Session("empID") 
     Dim serializedData = JsonConvert.DeserializeObject(Of List(Of SourcDetails))(empdata) 
     Using con = New SqlConnection(Constr) 
      If con.State = ConnectionState.Closed Then 
       con.Open() 
      End If 
      ' Dim cmdGetKey As New SqlCommand("Select Max(employeeID) From Employees", con) 
      ' Dim ID As Integer = cmdGetKey.ExecuteScalar() 

      For Each data As SourcDetails In serializedData 
       Using cmd = New SqlCommand("INSERT INTO SourceDetails(sourcename, sourceaddress, sourceincome,employeeID) VALUES(@sname, @saddress,@sincome, @ID)") 
        cmd.CommandType = CommandType.Text 
        cmd.Parameters.AddWithValue("@sname", data.mySource) 
        cmd.Parameters.AddWithValue("@saddress", data.mySAddress) 
        cmd.Parameters.AddWithValue("@sincome", data.mySIncome) 
        cmd.Parameters.AddWithValue("@ID", HttpContext.Current.Session("empID")) 
        ' cmd.Parameters.AddWithValue("@CreatedDate", DateTime.Now) 
        cmd.Connection = con 
        cmd.ExecuteNonQuery() 
       End Using 
      Next 
      con.Close() 
     End Using 
     Return Nothing 
    End Function 
    <WebMethod(EnableSession:=True)> _ 
    Public Shared Function SaveSpousData(empdata As String) As String 
     ' Dim ID As Integer = HttpContext.Current.Session("empID") 
     Dim serializedData = JsonConvert.DeserializeObject(Of List(Of SpousDetails))(empdata) 
     Using con = New SqlConnection(Constr) 
      If con.State = ConnectionState.Closed Then 
       con.Open() 
      End If 
      ' Dim cmdGetKey As New SqlCommand("Select Max(employeeID) From Employees", con) 
      ' Dim ID As Integer = cmdGetKey.ExecuteScalar() 

      For Each data As SpousDetails In serializedData 
       Using cmd2 = New SqlCommand("INSERT INTO SpouseDetails(spousename, spouseaddress, spouseincome,employeeID) VALUES(@spname, @spaddress,@spincome, @ID)") 
        cmd2.CommandType = CommandType.Text 
        cmd2.Parameters.AddWithValue("@spname", data.mySpouse) 
        cmd2.Parameters.AddWithValue("@spaddress", data.mySPAddress) 
        cmd2.Parameters.AddWithValue("@spincome", data.mySPIncome) 
        cmd2.Parameters.AddWithValue("@ID", HttpContext.Current.Session("empID")) 
        ' cmd.Parameters.AddWithValue("@CreatedDate", DateTime.Now) 
        cmd2.Connection = con 
        cmd2.ExecuteNonQuery() 
       End Using 
      Next 
      con.Close() 
     End Using 
     Return Nothing 
    End Function 
    <WebMethod(EnableSession:=True)> _ 
    Public Shared Function SaveDividentData(empdata As String) As String 
     ' Dim ID As Integer = HttpContext.Current.Session("empID") 
     Dim serializedData = JsonConvert.DeserializeObject(Of List(Of DividentDetails))(empdata) 
     Using con = New SqlConnection(Constr) 
      If con.State = ConnectionState.Closed Then 
       con.Open() 
      End If 
      ' Dim cmdGetKey As New SqlCommand("Select Max(employeeID) From Employees", con) 
      ' Dim ID As Integer = cmdGetKey.ExecuteScalar() 

      For Each data As DividentDetails In serializedData 
       Using cmd3 = New SqlCommand("INSERT INTO DividentDetails(dividentName, dividentAddress, dividentAmount,employeeID) VALUES(@divname, @divaddress,@divincome, @ID)") 
        cmd3.CommandType = CommandType.Text 
        cmd3.Parameters.AddWithValue("@divname", data.myDivName) 
        cmd3.Parameters.AddWithValue("@divaddress", data.myDivAddress) 
        cmd3.Parameters.AddWithValue("@divincome", data.myDivIncome) 
        cmd3.Parameters.AddWithValue("@ID", HttpContext.Current.Session("empID")) 
        ' cmd.Parameters.AddWithValue("@CreatedDate", DateTime.Now) 
        cmd3.Connection = con 
        cmd3.ExecuteNonQuery() 
       End Using 
      Next 
      con.Close() 
     End Using 
     Return Nothing 
    End Function 
    <WebMethod(EnableSession:=True)> _ 
    Public Shared Function SaveReimbursedData(empdata As String) As String 
     ' Dim ID As Integer = HttpContext.Current.Session("empID") 
     Dim serializedData = JsonConvert.DeserializeObject(Of List(Of ReimbursedDetails))(empdata) 
     Using con = New SqlConnection(Constr) 
      If con.State = ConnectionState.Closed Then 
       con.Open() 
      End If 
      ' Dim cmdGetKey As New SqlCommand("Select Max(employeeID) From Employees", con) 
      ' Dim ID As Integer = cmdGetKey.ExecuteScalar() 

      For Each data As ReimbursedDetails In serializedData 
       Using cmd4 = New SqlCommand("INSERT INTO ReimbursementDetails(reimbursementName, reimbursementAddress, reimbursementAmount,employeeID) VALUES(@reimbursename, @reimburseaddress,@reimburseincome, @ID)") 
        cmd4.CommandType = CommandType.Text 
        cmd4.Parameters.AddWithValue("@reimbursename", data.myReimbursName) 
        cmd4.Parameters.AddWithValue("@reimburseaddress", data.myReimbursAddress) 
        cmd4.Parameters.AddWithValue("@reimburseincome", data.myReimbursIncome) 
        cmd4.Parameters.AddWithValue("@ID", HttpContext.Current.Session("empID")) 
        ' cmd.Parameters.AddWithValue("@CreatedDate", DateTime.Now) 
        cmd4.Connection = con 
        cmd4.ExecuteNonQuery() 
       End Using 
      Next 
      con.Close() 
     End Using 
     Return Nothing 
    End Function 

Public Class Employee 
    Public Property emplName() As String 
     Get 
      Return m_empName 
     End Get 
     Set(value As String) 
      m_empName = value 
     End Set 
    End Property 
    Private m_empName As String 
    Public Property emplTitle() As String 
     Get 
      Return m_empTitle 
     End Get 
     Set(value As String) 
      m_empTitle = value 
     End Set 
    End Property 
    Private m_empTitle As String 
    Public Property empMail() As String 
     Get 
      Return m_empMail 
     End Get 
     Set(value As String) 
      m_empMail = value 
     End Set 
    End Property 
    Private m_empMail As String 
End Class 
Public Class SourcDetails 
    Public Property mySource() As String 
     Get 
      Return m_mySource 
     End Get 
     Set(value As String) 
      m_mySource = value 
     End Set 
    End Property 
    Private m_mySource As String 
    Public Property mySAddress() As String 
     Get 
      Return m_mySAddress 
     End Get 
     Set(value As String) 
      m_mySAddress = value 
     End Set 
    End Property 
    Private m_mySAddress As String 
    Public Property mySIncome() As String 
     Get 
      Return m_mySIncome 
     End Get 
     Set(value As String) 
      m_mySIncome = value 
     End Set 
    End Property 
    Private m_mySIncome As String 

End Class 
Public Class SpousDetails 
    Public Property mySpouse() As String 
     Get 
      Return m_mySpouse 
     End Get 
     Set(value As String) 
      m_mySpouse = value 
     End Set 
    End Property 
    Private m_mySpouse As String 
    Public Property mySPAddress() As String 
     Get 
      Return m_mySPAddress 
     End Get 
     Set(value As String) 
      m_mySPAddress = value 
     End Set 
    End Property 
    Private m_mySPAddress As String 
    Public Property mySPIncome() As String 
     Get 
      Return m_mySPIncome 
     End Get 
     Set(value As String) 
      m_mySPIncome = value 
     End Set 
    End Property 
    Private m_mySPIncome As String 

End Class 
Public Class DividentDetails 
    Public Property myDivName() As String 
     Get 
      Return m_myDivName 
     End Get 
     Set(value As String) 
      m_myDivName = value 
     End Set 
    End Property 
    Private m_myDivName As String 
    Public Property myDivAddress() As String 
     Get 
      Return m_myDivAddress 
     End Get 
     Set(value As String) 
      m_myDivAddress = value 
     End Set 
    End Property 
    Private m_myDivAddress As String 
    Public Property myDivIncome() As String 
     Get 
      Return m_myDivIncome 
     End Get 
     Set(value As String) 
      m_myDivIncome = value 
     End Set 
    End Property 
    Private m_myDivIncome As String 

End Class 

Answer 1

귀하의 문제는 자동으로 버튼을 클릭하는 것이 될 수는 아약스 호출이 실행되기 전에 다시로드의 원인이되는 현재의 URL,에 <form>를 제출합니다. 당신은 아래의 코드로 버튼이 기본 동작을 해제 할 수 있습니다

$("#btnSubmit").click(function (e) { e.preventDefault }); 

는 또한, 당신은 당신이 게시 된 조각에서 중복 코드를 많이 가지고있다. 이것을 최적화하면 가독성이 크게 향상되므로 디버깅 방법이 더 쉬워집니다. 예를 들어 아래 .click() 코드는 적은 코드 행에서 코드와 똑같습니다.

$('#btnSubmit').click(function (e) { 
    e.preventDefault(); 

    var posts = [{ 
     data: getAllEmpData, 
     method: 'SaveEmpData' 
    }, { 
     data: getAllSourcepData, 
     method: 'SaveSourceData' 
    }, { 
     data: getAllSpouseData, 
     method: 'SaveSpousData' 
    } /* ... */ ]; 

    var $result = $('#result'); 
    $result.text(''); 

    var calls = posts.map(function (p) { 
     var data = p.data(); 
     console.log(data); 

     return $.ajax({ 
      url: 'closures.aspx/' + p.method, 
      type: 'POST', 
      contentType: 'application/json; charset=utf-8', 
      data: JSON.stringify({'empdata': JSON.stringify(data)}), 
      error: function (xhr) { 
       alert(xhr.responseText); 
      } 
     }); 
    }); 

    $.when.apply($, calls).then(function() { 
     $result.text('All complete'); 
    }); 
});