将 MVC Ajax.ActionLink 转换为 jQuery .post 方法？答案

【问题标题】：Translate MVC Ajax.ActionLink to jQuery .post method?将 MVC Ajax.ActionLink 转换为 jQuery .post 方法？
【发布时间】：2011-10-28 02:14:32
【问题描述】：

我正在处理这个 ASP.NET MVC 问题，即使用 ValidateAntiForgeryToken 和 AJAX 会破坏 AJAX 调用 (Using ValidateAntiForgeryToken with Ajax.ActionLink)。唯一的解决方案（如该主题所述）需要 jQuery。

如何使用 jQuery 的 .post 方法完成以下等效操作？

@Ajax.ActionLink("Perform HTTPPost", "PostTest", new AjaxOptions{ HttpMethod="POST"})

这里是控制器：

// [ValidateAntiForgeryToken]
public class MoreInfoController : Controller
{        
    [HttpPost]
    public ActionResult PostTest()
    {
        return View();
    }
}

这是包含 Javascript 和 HTML 的索引视图：

    <script type="text/javascript">
    $(document).ready(function () {
        $('#linkToPost').click(PostForm);
    });

    function PostForm() {
        $.post("/PostTest", $('#testForm').serialize(), function(data) {

        });
        return false;
    }

</script>
<a id="linkToPost" href="#">Perform HTTP Post</a>
<form id="testForm" method="POST" >
    @Html.AntiForgeryToken()
</form>

这是路线：

routes.MapRoute("PostTest1",
                            "PostTest",
                            new {controller = "MoreInfo", action = "PostTest"}
        );

【问题讨论】：

标签： jquery asp.net-mvc ajax

【解决方案1】：

我的示例是使用 $.ajax，但您可以轻松地将其更改为 $.post

@Html.ActionLink("Perform HTTP Post", "PostTest", "Controller", null, new { id = "someId" })

<script type="text/javascript">
    $(function() {
        $('#someId').click(function() {
            $.post({
                url: $(this).attr('href'),
                type: 'post',
                success: function(data) {
                    // assuming you're returning a partial result
                    $('#somecontainer').html(data);
                }
            });

            // prevent the default action
            return false;
        });
    }
</script>

如果你不想给锚一个 id，你可以使用类选择器：

$('.ajax-link').click(function() { ... });

您需要使用new { @class = "ajax-link" } 或您希望为您的班级命名的任何内容，而不是使用new { id = "someId" }。

编辑
我使用了错误的重载。我试图为 html 属性设置 id，而不是路由数据。

【讨论】：

ID 是什么？我不使用那个。
我只是给锚标记一个 id 以便我可以通过 jQuery 的 id 选择器找到它。如果您有其他方式来选择标签，则不需要使用它，以便您可以附加点击处理程序。
实际上我在顶部有 @Asp.AntiForgeryToken() 的视图（index.cshtml）中。我在此视图中也有 Ajax.ActionLink，仅用于测试此问题的 AntiForgeryToken 使 AJAX 调用失败（请参阅上面的链接）。我正在尝试发布到它的控制器（MoreInfoController），其中有一个动作方法 PostTest（）。我想发帖。该控制器具有 [ValidateAntiForgeryToken] 属性。
好的，我将锚标记保留为 someId 并更改为 @Html.ActionLink("Perform HTTP Post", "PostTest", "MoreInfoController", null, new { id = "someId" } ）。我无法让它在控制器中使用该方法。
您的代码执行了 POST，但我无法将其发布到方法“PostTest”

【解决方案2】：

假设您的防伪令牌元素采用您要发布的形式，您可以执行以下操作：

这是你的链接：

<a id="linkToPost" href="#">Perform HTTP Post</a>

这里是绑定点击这个链接发布表单的jquery：

<script type="text/javascript">
   $(document).ready(function() {
      $('#linkToPost').click(PostForm);   
});
function PostForm() {
    $.post("/PostTest", $('#idOfyourForm').serialize(), function(data) {
      // do something with the data that comes back from the post 
    });
    return false;
}

</script>

现在您需要做的是将#idOfYourForm 替换为您的表单的实际ID：

<form id="TestForm">你会成功的$('#TestForm').serialize()

接下来，您需要确保我拥有的 /PostTest 的路线实际上会映射到您的控制器和操作。您将需要这样的东西：

context.MapRoute("PostTest1",
                 "PostTest",  // URL with parameters
                 new { controller = "MoreInfoController", action = "PostTest" });

就是这样。

【讨论】：

实际上我在顶部有 @Asp.AntiForgeryToken() 的视图（index.cshtml）中。我在此视图中也有 Ajax.ActionLink，仅用于测试此问题的 AntiForgeryToken 使 AJAX 调用失败（请参阅上面的链接）。我正在尝试发布到它的控制器（MoreInfoController），其中有一个动作方法 PostTest（）。我想发帖。该控制器具有 [ValidateAntiForgeryToken] 属性。
@SamGentile - 只要您的 AntiForgeryToken 助手是您要发布的表单，那么它应该在您的操作中传递ValidateAntiForgeryToken 属性。我目前正在我的项目上执行此操作，没有任何问题。
它不适用于 Ajax 方法。请参阅上面我的 pst 中的原始链接。
@SamGentile - 只要令牌采用您要序列化的形式，它将与 jquery ajax 方法一起使用
您的代码本身似乎没有做任何事情。同样，我试图发布到控制器中的 PostTest 方法。它甚至没有在表格上显示一个链接供我执行测试。如果我与 @Html.ActionLink("Perform HTTP Post", "PostTest", "MoreInfo", null, new { id = "someId" }) 结合使用，它会生成正确的 URL，但似乎仍然没有达到断点在 MoreInfo 控制器的 PostTest 方法中。

【解决方案3】：

这行得通：

[UseAntiForgeryTokenOnPostByDefault]

    public class MoreInfoController: Controller
    {
       [HttpPost]
       [ValidateAntiForgeryToken]
       public ActionResult PostTest()
       {
           return View();
       }
    }

还有观点：

@using (Html.BeginForm("PostTest", "MoreInfo")
{
   @Html.AntiForgeryToken()
   <input type="submit" value="submit"/>
}

其中 [UseAntiForgeryTokenOnPostByDefault] 是 http://weblogs.asp.net/srkirkland/archive/2010/04.aspx

【讨论】：