如何通過jQuery與ajax調用webform的功能？

Question

我想調用一個函數，通過jquery使用ajax來更改WebForm1中名爲「firstdivision」的分隔符的文本框中的值。 這是我寫的代碼，但它不工作：

<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; 
     } 
    } 

現在沒有得到任何錯誤，但我想刷新包含所有這些文本框的部門「第一部門」，現在顯示通過搜索功能搜索到的新數據通過數據庫

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 「的javascript：搜索（）」 在你的HTML可能是複雜的。

請嘗試下面的代碼，讓我們知道它是怎麼回事;

<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

好吧，第一件事第一 - 語法是壞的（尤其是「功能...... ......（）{.....等等。）， 此代碼應工作（使用的jsfiddle http://jsfiddle.net/ajynnoff/）我不得不硬編碼$("#firstDivision").text("this should come from ajax - just simulating here");，但我想你會得到的圖片。

$('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/爲開始，結束，錯誤等，而不是負載 - 以獲得最好的部分:)