ajax를 사용하여 jquery를 통해 webform 함수를 호출하는 방법은 무엇입니까?

Question

ajax를 사용하여 jquery를 통해 WebForm1에서 "firstdivision"이라는 이름의 division 텍스트 상자의 값을 변경하는 함수를 호출하려고합니다. 이 내가 쓴 코드는하지만, 제대로 동작하지 않습니다 :

<asp:ScriptManager ID="scriptmanager" runat="server" EnableCdn="true" AjaxFrameworkMode="Disabled"> 
    <Scripts> 
     <asp:ScriptReference Path="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"/> 
    </Scripts> 
    </asp:ScriptManager> 

    <script type="text/javascript" lang="javascript"> 

     var pageurl = '<%=ResolveUrl("~/WebForm1.aspx/Search()") %>'; 
     var srch = $("#<%=list_Search.Text%>"); 
     var name = $("#<%=txt_Name.Text%>"); 
     var empID = $("#<%=txt_EmpID.Text%>"); 
     var address = $("#<%=txt_Address.Text%>"); 
     var email = $("#<%=txt_Email.Text%>"); 
     var phone = $("#<%=txt_Phone.Text%>"); 
     var salary = $("#<%=txt_Salary.Text%>"); 
     var dob = $("#<%=txt_DOB.Text%>"); 
     var natinality = $("#<%=txt_Nationality.Text%>"); 

     $('document').ready 
     (
      function() 
      { 
       $("#btn_Search").click 
       (
        function (e) 
        { 
         e.preventDefault(); 
         $.ajax 
         (
          { 
           type : 'POST', 
           URL: pageurl, 
           async: "true", 
           //data: srch, 
           //contentType: "application/json; charset=utf-8", 
           //dataType: "json", 
           success: function (x) 
              { 
               alert("Done Successfully with " + x.msg); 
              }, 
           error: function (e) { alert("The call got failed due to " + e.msg); }         
          }        
         ); 
         $("#firstDivision").html("").append(data); 
        } 
       ); 
      } 
     ) 

     //function dotask() 
     //{ 
     // employee_db.WebForm1.Search(); 
     // return true; 
     //} 

    </script> 

을 그리고 이것은 호출하고있는 기능에 대한 코드입니다 :

[WebMethod] 
    public static void Search() 
    { 
     //string search,string name,int empID,string address,string email,double phone,double salary,DateTime dob,string nationality 
     string constr = ConfigurationManager.ConnectionStrings["myconnectionstring"].ConnectionString; 
     SqlConnection myconnection = new SqlConnection(constr); 
     myconnection.Open(); 

     WebForm1 test = new WebForm1(); 
     test.conc(myconnection); 
     //conc(myconnection); 

     myconnection.Close(); 
    } 

    protected void conc(SqlConnection myconnection) 
    { 
     string search = list_Search.Text; 
     SqlDataReader reader; 

     if(string.Compare(search,"Search By Name",true)==0) 
     { 
      SqlCommand myCommand = new SqlCommand("SELECT * FROM Emp_Details WHERE Name='" + txt_Name.Text + "'", myconnection); 
      reader= myCommand.ExecuteReader(); 
     } 

     else if (string.Compare(search, "Search By Employee ID", true) == 0) 
     { 
       SqlCommand myCommand = new SqlCommand("SELECT * FROM Emp_Details WHERE Employee_ID='" + txt_EmpID + "'", myconnection); 
      reader= myCommand.ExecuteReader(); 
     } 

     else if (string.Compare(search, "Search By Address", true) == 0) 
     { 
       SqlCommand myCommand = new SqlCommand("SELECT * FROM Emp_Details WHERE Address='" + txt_Address + "'", myconnection); 
      reader= myCommand.ExecuteReader(); 
     } 

     else if (string.Compare(search, "Search By Phone No", true) == 0) 
     { 
       SqlCommand myCommand = new SqlCommand("SELECT * FROM Emp_Details WHERE Phone='" + txt_Phone + "'", myconnection); 
      reader= myCommand.ExecuteReader(); 
     } 

     else if (string.Compare(search, "Search By Email", true) == 0) 
     { 
       SqlCommand myCommand = new SqlCommand("SELECT * FROM Emp_Details WHERE Email='" + txt_Email + "'", myconnection); 
      reader= myCommand.ExecuteReader(); 
     } 

     else if (string.Compare(search, "Search By Salary", true) == 0) 
     { 
       SqlCommand myCommand = new SqlCommand("SELECT * FROM Emp_Details WHERE Salary='" + txt_Salary + "'", myconnection); 
      reader= myCommand.ExecuteReader(); 
     } 

     else if (string.Compare(search, "Search By Date Of Birth", true) == 0) 
     { 
      SqlCommand myCommand = new SqlCommand("SELECT * FROM Emp_Details WHERE Date_of_Birth='" + txt_DOB + "'", myconnection); 
      reader= myCommand.ExecuteReader(); 
     } 

     else 
     { 
      SqlCommand myCommand = new SqlCommand("SELECT * FROM Emp_Details WHERE Nationality='" + txt_Nationality + "'", myconnection); 
      reader= myCommand.ExecuteReader(); 
     } 

     try 
     { 
      DataTable dt = new DataTable(); 

      if (!reader.Read()) 
       return;  

      txt_Name.Text = reader["Name"].ToString(); 
      txt_EmpID.Text = reader["Employee_ID"].ToString(); 
      txt_Address.Text = reader["Address"].ToString(); 
      txt_Phone.Text = reader["Phone"].ToString(); 
      txt_Salary.Text = reader["Salary"].ToString(); 
      txt_Email.Text = reader["Email"].ToString(); 
      txt_DOB.Text = reader["Date_Of_Birth"].ToString(); 
      txt_Nationality.Text = reader["Nationality"].ToString(); 
     } 
     catch (Exception ex) 
     { 
      throw ex; 
     } 
    } 

지금 어떤을 받고 있지 않다 오류가 있지만 내가 검색 functi 통해 검색된 새 데이터를 표시하려면 모든 해당 텍스트 상자를 포함하는 "첫 번째 부서"부서 새로 고칩니다. 당신의 HTML에 아마를 복잡하게한다 : "검색() 자바 스크립트"데이터베이스를 통해

Answer 1

에 URL과 #

$("#firstDivision").load 
        (
         { 
          url: "WebForm1.aspx/Search", 
          async: "true", 
          success: function (msg) { alert("Done Successfully"); }, 
          error: function (x, e) { alert("The call got failed due to " + x.msg); } 
         } 
        ); 

Answer 2

의 onclick =에서 .cs를 제거합니다.

아래 코드를 시도해보고 어떻게되는지 알려주세요.

<script type="text/javascript"> 

    $('document').ready 
    (
     function() 
     { 
      $("#btn_Search").click 
      (
       function (e) 
       { 
        e.preventDefault(); 
        $("#firstDivision").load 
        (
         { 
          checkURL: "WebForm1.aspx.cs/#Search", 
          async: "true", 
          success: function (msg) { alert("Done Successfully"); }, 
          error: function (x, e) { alert("The call got failed due to " + x.msg); } 
         } 
        ); 
       } 
      ); 
     } 
    ) 

</script> 

    <input id="btn_Search" type="button" value="Search" /> 


<br /> 

Answer 3

좋아, 먼저 첫 번째 것은 - 구문은 나쁘다 (특히 "기능 ... ... ... ...() ..... {등 .), 이 코드는 내가 $("#firstDivision").text("this should come from ajax - just simulating here");를 하드 코딩했다) (http://jsfiddle.net/ajynnoff/ JSfiddle를 사용하여 작동해야하지만 난 당신이 사진을 얻을 것이다 생각합니다.

이

$('document').ready(function() { 
    $("#btn_Search").click(function (e) { 
     e.preventDefault(); 
     console.log("clicked"); 
     $("#firstDivision").load("/echo/html/", function (response, status, xhr) { 
      if (status == "error") { 
       var msg = "Sorry but there was an error: "; 
       $("#ajax_status").html(msg + xhr.status + " " + xhr.statusText); 
      } else if (status == "success") { 
       var msg = "Success: "; 
       $("#ajax_status").html(msg + xhr.status + " " + xhr.statusText); 


       $("#firstDivision").text("this should come from ajax - just simulating here"); 

      } 
     }); 
    }); 
}); 

개인적으로는 "순수"를 사용 것 아약스 http://api.jquery.com/jquery.ajax/로드 대신 시작, 종료, 오류 등 - 가장 좋은 부분을 얻으려면 :