使用 jquery 调用 C# 方法

Posted 2023-04-13

【中文标题】使用 jquery 调用 C# 方法

【英文标题】：Calling a C# method with jquery

【发布时间】：2012-12-14 23:58:17

【问题描述】：

我正在尝试在单击按钮时使用jQuery 调用一个方法。这是我目前所拥有的：

$("a.AddToCart").click(function () 
            var link = document.URL;

            $.ajax(
                 type:"POST",
                 url: "/Account/AddToCartHack",
                 data: url : link,
                 contentType: "application/json; charset=utf-8",
                 dataType: "json"
            );
        );


[WebMethod]
    public void AddToCartHack(string url)
    
        GeneralHelperClass.URL = url;
    

我在这里尝试做的是，当我单击带有类添加到购物车的链接时，我想调用方法 AddToCartHack 并将当前 URL 作为参数传递给它。 我一定是做错了什么，因为似乎没有调用AddToCartHack。

我做错了什么？

【问题讨论】：

您确定调用了事件处理程序吗？您是否在浏览器的开发人员工具中看到了 AJAX？

可能很明显，但是在浏览器中手动调用/Account/AddToCartHack 会调用你的方法吗？

IIRC JSON 数据应该在发送前转换为字符串 (JSON.stringify)？还是在最近的 jQuery 版本中发生了变化？

我真的是 ajax 的初学者，所以我不确定这应该如何工作我想要的是能够以当前 url 作为参数调用 addToCatrtHack

看看我最近回复的this question，或许对你有帮助。

【参考方案1】：

你的代码有很多问题，我不知道从哪里开始。因此，让我们与您进行一次交互式重构会话（如果您不关心我的 cmets，而只想查看最终推荐的解决方案，只需在答案末尾向下滚动即可）。

首先：您似乎并没有通过从.click() 事件处理程序返回false 来取消锚点的默认操作。如果不这样做，您实际上是在让浏览器执行锚点的默认操作（如您所知，锚点是重定向到它的 href 属性指向的 url。因此，您的 AJAX 调用永远不会有时间来执行，因为浏览器已经离开页面并且没有更多的脚本正在运行）。因此，从处理程序返回 false 以使您的 AJAX 脚本能够执行并保持在同一页面上：

$("a.AddToCart").click(function () 
    var link = document.URL;

    $.ajax(
        type:"POST",
        url: "/Account/AddToCartHack",
        data: url : link,
        contentType: "application/json; charset=utf-8",
        dataType: "json"
    );

    return false;
);

第二：您已指定contentType: 'application/json' 请求标头，但您根本没有发送任何 JSON。您正在发送一个 application/x-www-form-urlencoded 请求，这是 jQuery 的默认设置。所以在你的情况下摆脱这个无意义的参数：

$("a.AddToCart").click(function () 
    var link = document.URL;

    $.ajax(
        type:"POST",
        url: "/Account/AddToCartHack",
        data: url : link,
        dataType: "json"
    );

    return false;
);

第三：您已指定服务器端代码将返回 JSON (dataType: 'json')，但您的服务器端代码根本不返回任何内容。这是一种无效的方法。在 ASP.NET MVC 中，您所称的 C# 方法有一个名称。这称为控制器操作。并且在 ASP.NET MVC 控制器操作中返回 ActionResults，而不是 void。所以修复你的控制器动作。还要去掉 [WebMethod] 属性 - 在 ASP.NET MVC 中不再使用它

public class AccountController: Controller

    public ActionResult AddToCartHack(string url)
    
        GeneralHelperClass.URL = url;
        return Json(new  success = true );
    

第四：您已将 url 硬编码到 javascript 中的控制器操作，而不是使用服务器端帮助程序来生成此 url。这样做的问题是，如果您在 IIS 中的虚拟目录中部署应用程序，您的代码将会中断。不仅如此 - 如果您决定修改 Global.asax 中的路由模式，您将不得不修改所有脚本，因为 url 将不再是 controller/action。我建议您解决此问题的方法是使用不显眼的 AJAX。因此，您只需使用 html 帮助器生成锚点：

@Html.ActionLink(
    "Add to cart", 
    "AddToCartHack", 
    "Account", 
    null, 
    new  @class = "AddToCart" 
)

然后不显眼地 AJAXify 这个锚点：

$('a.AddToCart').click(function () 
    var link = document.URL;

    $.ajax(
        type: 'POST',
        url: this.href,
        data:  url : link 
    );

    return false;
);

第五：您似乎在 .click() 处理程序中使用了一些 document.URL 变量。它看起来像一些必须在其他地方定义的全局 javascript 变量。不幸的是，您没有显示定义此变量的代码部分，也没有显示为什么要使用它，所以我不能真正提出更好的方法来做到这一点，但我真的觉得它有问题。或者哦，等等，这应该是当前浏览器的 url 吗？？？所以你应该使用window.location.href 属性。就这样：

$('a.AddToCart').click(function () 
    $.ajax(
        type: 'POST',
        url: this.href,
        data:  url : window.location.href 
    );

    return false;
);

甚至更好，使其成为原始锚的一部分（最终和推荐的解决方案）：

@Html.ActionLink(
    "Add to cart", 
    "AddToCartHack", 
    "Account", 
    new  url = Request.RawUrl , 
    new  @class = "AddToCart" 
)

然后简单地说：

$('a.AddToCart').click(function () 
    $.ajax(
        type: 'POST',
        url: this.href
    );

    return false;
);

现在这比我们最初的要好得多。即使页面上禁用了 javascript，您的应用程序现在也可以正常工作。

【参考方案2】：

如下图这样放置脚本方法

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]

【参考方案3】：

添加成功和错误功能以检查您的 ajax 功能

       ...


       $.ajax(
                 type:"POST",
                 url: "/Account/AddToCartHack",
                 data: url : link,
                 contentType: "application/json; charset=utf-8",
                 dataType: "json",
               success: function()
                 alert('success');
                ,
              error:function() 
                  alert('error');
                
            );
        ....

【参考方案4】：

如果这是 Asp.Net webforms，您需要将 webmethod 设为静态，否则无法通过 JavaScript 访问该方法。

【参考方案5】：

$(document).ready(function () 

    $.ajax(

        url: "Testajax.aspx/GetDate",
        data: "f=GetDate",
        cache: false,
        success: function (content) 
            $('#tableData').append('My Dear Friend');
            alert(content);

        ,
        failure: function (response) 
            alert("no data found");
        


    );
);