将 jQuery 的 getJSON 方法与 ASP.NET Web 表单结合使用

发布于 2024-07-29 04:24:31 字数 697 浏览 6 评论 0原文

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

目标是这样的:

  1. 用户单击列表项
  2. 值被发送到服务器
  3. 服务器响应相关的内容列表,使用 JSON
  4. 格式化 填充辅助框

我不想使用 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;
        });
}

How do I go about calling a method on an ASP.NET Web Form page using the getJSON method on jQuery?

The goal is this:

  1. User clicks on a list item
  2. The value is sent to the server
  3. Server responds with related list of stuff, formatted using JSON
  4. Populate secondary box

I don't want to use an UpdatePanel, I've done this hundreds on times using the ASP.NET MVC Framework, but can't figure it out using Web Forms!

So far, I can do everything, including calling the server, it just doesn't call the right method.

Thanks,
Kieron

Some code:

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

一曲琵琶半遮面シ 2024-08-05 04:24:31

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

<%@ 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>

Here is a minimalistic example which should hopefully get you started:

<%@ 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>
千年*琉璃梦 2024-08-05 04:24:31

我稍微调整了你的代码。 我将 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;
        });
}

让我知道这是否有效!

I tweaked your code a bit. I added the server side output of the ClientID to the updateRegions method to pass it in. And I changed your getJSON method to pass in the url with a query string parameter (instead of separate data) and the call back function.

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

Let me know if that works!

囍笑 2024-08-05 04:24:31

您还可以使用 GetJSON,但在这种情况下您应该更改 WebMethod。 你应该用以下内容来装饰它:

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

执行 get 操作可能不是你想要的。

You can also use a GetJSON, but you should alter the WebMethod in that case. You should decorate it with:

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

Doing a get might not be what you desire.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文