从JSON调用服务器端方法

时间:2010-04-03 17:07:46

标签: asp.net jquery ajax web-services json

如何从JSON调用服务器端的方法。以下是我正在使用的代码

服务器端:

[WebMethod]
private void GetCustomer( string NoOfRecords)
{

    string connString = "Data Source=Something;Initial Catalog=AdventureWorks;Trusted_Connection=True;";
    SqlConnection sCon = new SqlConnection(connString);
    SqlDataAdapter da = new SqlDataAdapter("SELECT * FROM Sales.Customer WHERE CustomerID < '" + NoOfRecords+ "' ", sCon);
    DataSet ds = new DataSet();
    da.Fill(ds);
    GvDetails.DataSource = ds.Tables[0];
    GvDetails.DataBind();

}

在客户端:

 <div>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:TextBox ID="txtValue" runat="server"></asp:TextBox>
    <asp:Button ID="btnShow" runat="server" Text="Sow Records without PostBack" />

    <asp:GridView ID="GvDetails" runat="server">
    </asp:GridView>
</div>

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


 var txtID = document.getElementById('txtValue');
 $.ajax({
   type: "POST",
   url: "Default.aspx/GetCustomer",
   data: "{Seconds:'" + txtID +"'}",
   contentType: "application/json; charset=utf-8",
   dataType: "json",
   success: function(response) {
     alert(response); 
   }
  });
</script>

现在我希望在按钮点击时,我会在客户端调用该函数[JSON],它将文本框值传递给函数。 请帮忙

2 个答案:

答案 0 :(得分:2)

看起来您想要重新绑定网格并在页面上更新它。在这种情况下最简单的做法是将按钮和网格放在更新面板中。为按钮提供服务器端单击事件。因为它在更新面板中,它将使用ajax为您处理ajax调用,并且更新面板的内容将自动更新。

如果你想做ajax调用manuall,你将无法像这样绑定网格,而是你的GetCustomer方法将需要返回一些将被你的客户端javascript使用的东西。我发现不是使用$ .ajax调用(jquery),如果你将ScriptService标记放在方法上,你可以调用一个javascript调用PageMethods.GetCustomer(NoOfRecords)。 javascript调用语法与您声明方法的c#语法完全相同,但在javascript中添加“PageMethods”。在前。

这样的事情:

HTML:

<div> 
    <asp:ScriptManager ID="ScriptManager1" runat="server"> 
    </asp:ScriptManager> 
    <asp:TextBox ID="txtValue" runat="server" CssClass="value"></asp:TextBox> 
    <asp:Button ID="btnShow" runat="server" CssClass="buttonshow" Text="Sow Records without PostBack" /> 

</div> 

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

    //attach event to click event of button with class of 'buttonshow'.
    $('.buttonshow').click(function()
    {
        //get value of textbox with class 'value'
        var NoOfRecords = $('.value').val();

        //Call GetCustomer method, pass NumberOfRecords, and define the onsuccess and onerror functions.
        PageMethods.GetCustomer(
            NoOfRecords, 
            function(result) {
               alert('success:' + result);
            },
            function(result) {
               alert('error:' + result.get_message());
            });
    });


</script>  
<asp:GridView ID="GvDetails" runat="server"> 
</asp:GridView> 

答案 1 :(得分:1)

首先,您需要为方法添加ScriptService属性。要传递参数,您需要将其编码为字符串:3 mistakes to avoid when using jQuery with ASP.NET AJAX