在 ASP.NET Web 窗体中使用 jQuery 的 getJSON 方法答案

【问题标题】：Using jQuery's getJSON method with an ASP.NET Web Form在 ASP.NET Web 窗体中使用 jQuery 的 getJSON 方法
【发布时间】：2010-11-13 16:18:03
【问题描述】：

如何使用 jQuery 上的 getJSON 方法调用 ASP.NET Web 表单页面上的方法？

目标是这样的：

用户点击列表项
值被发送到服务器
服务器响应相关的东西列表，使用 JSON 格式化
填充辅助框

我不想使用 UpdatePanel，我已经使用 ASP.NET MVC 框架完成了数百次，但无法使用 Web 窗体解决它！

到目前为止，我可以做所有事情，包括调用服务器，只是没有调用正确的方法。

谢谢，
基隆

一些代码：

jQuery(document).ready(function() {
   jQuery("#<%= AreaListBox.ClientID %>").click(function() {
       updateRegions(jQuery(this).val());
   });
});

function updateRegions(areaId) {
    jQuery.getJSON('/Locations.aspx/GetRegions', 
        { areaId: areaId },
        function (data, textStatus) {
            debugger;
        });
}

【问题讨论】：

标签： asp.net jquery webforms getjson

【解决方案1】：

这是一个简约的示例，希望可以帮助您入门：

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Web.Services" %>

<script runat="server">
    [WebMethod]
    public static string GetRegions(int areaId)
    {
        return "Foo " + areaId;
    }
</script>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>jQuery and page methods</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
    <script type="text/javascript">
    $(function() {
        var areaId = 42;
        $.ajax({
            type: "POST",
            url: "Default.aspx/GetRegions",
            data: "{areaId:" + areaId + "}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(data) {
               alert(data.d);
           }
        });
    });
    </script>
</body>
</html>

【讨论】：

【解决方案2】：

我稍微调整了您的代码。我将 ClientID 的服务器端输出添加到 updateRegions 方法以将其传入。我更改了您的 getJSON 方法以使用查询字符串参数（而不是单独的数据）和回调函数传入 url。

jQuery(document).ready(function() {
   jQuery("#<%= AreaListBox.ClientID %>").click(function() {
       updateRegions(<%= AreaListBox.ClientID %>);
   });
});

function updateRegions(areaId) {
    jQuery("h2").html("AreaId:" + areaId);

    jQuery.getJSON("/Locations.aspx/GetRegions?" + areaId, 
        function (data, textStatus) {
            debugger;
        });
}

让我知道这是否有效！

【讨论】：

【解决方案3】：

您也可以使用 GetJSON，但在这种情况下您应该更改 WebMethod。你应该用以下方式装饰它：

[WebMethod(EnableSession = true)]       
[ScriptMethod(UseHttpGet =false, ResponseFormat = ResponseFormat.Json)]

get 可能不是你想要的。

【讨论】：