【问题标题】:Calling a C# method with jquery使用 jquery 调用 C# 方法
【发布时间】: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,或许对你有帮助。

标签: c# asp.net asp.net-mvc-3 jquery


【解决方案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");
                  }
          
          
              });
          });
          

          【讨论】:

            猜你喜欢
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2014-04-25
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2018-03-15
            相关资源
            最近更新 更多