如何使用Ajax通过jquery调用Webform函数？

Question

我想调用一个函数来通过带有ajax的jquery更改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;
        }
    }

现在没有任何错误，但是我想刷新包含所有那些文本框的“ first division”分区，以显示通过数据库的搜索功能搜索到的新数据

Answer 1

从网址和＃中删除.cs

$("#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

HTML中的onclick =“ javascript：Search（）”可能会使它复杂化。

试试下面的代码，让我们知道如何进行；

<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");进行硬编码$("#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");

             }
         });
     });
 });

我个人将“纯” ajax http://api.jquery.com/jquery.ajax/用于开始，结束，错误等，而不是加载-以获得最佳部分：）