如何使用 Ajax.BeginForm 更新 div 并执行 javascript 函数？答案

【问题标题】：How to update a div with Ajax.BeginForm AND execute a javascript function?如何使用 Ajax.BeginForm 更新 div 并执行 javascript 函数？
【发布时间】：2011-04-19 22:49:00
【问题描述】：

我正在使用类似这样的方式更新带有部分视图的 div：

<% using (Ajax.BeginForm("Action", "Controller",
               new { id=Model.id },
               new AjaxOptions
               {
                   UpdateTargetId = "divId",
                   InsertionMode = InsertionMode.InsertAfter,
               }))
   {  %>

它工作正常，返回的视图被附加到 div，但是我现在需要在发布成功时执行一个 javascript，所以我想：“简单，只需将 OnSuccess = "MyJsFunc()" 添加到 AjaxOptions，但是在这样做之后，它停止了工作！现在页面已刷新，仅呈现返回的部分视图 :(，我什至尝试使用简单的 Alert("Hi") 并且它也不工作.. 我怎样才能让它工作？

（顺便说一句，我认为这可能是 https://stackoverflow.com/questions/1994754/execute-javascript-after-loading-a-mvc-page-using-ajax-beginrouteform 的重复，但这个问题被放弃了，没有答案）

【问题讨论】：

这个问题+1；我相信我自己也看到过同样的行为；使用带有 MVC2 和 C# 的 ASP.NET 4.0。每次我向 AjaxOptions 添加 OnSuccess 成员值时，Ajax 表单似乎都变成了常规表单。我现在才开始使用 jQuery.form 提交此类表单，但我也想弄清楚这一点！
嗯，我也在使用 ASP.NET 4 和 MVC2 和 C#
Assign a Javascript function to AjaxOptions OnSuccess property raise an error - ASP.NET MVC的可能重复

标签： c# asp.net-mvc asp.net-ajax partial-views

【解决方案1】：

有什么理由不以正确的方式做事（毕竟我们是 2010 年）？将 MS AJAX 以及所有依赖它的 Ajax.* 助手转储到它所属的位置并编写正确的代码。虽然在经典 Web 表单中使用 MS AJAX 可能是合理的，因为 UpdatePanel 等......在今天的新 ASP.NET MVC 应用程序中这样做，尤其是在微软完全接受 jQuery 之后，这似乎是个坏主意。

所以在咆哮之后，这是我的建议：

<% using (Html.BeginForm("Action", "Controller", new { id = Model.id }) { %>

然后在单独的文件中使用 jquery 不显眼地附加提交处理程序：

$(function() {
    $('form').submit(function() {
        $.ajax({
            url: this.action,
            type: this.method,
            success: function(result) {
                // feel free to execute any code 
                // in the success callback
                $('#result').html(result);
            }
        });
        return false;
    });
});

或使用优秀的jquery form plugin：

$(function() {
    $('form').ajaxForm(function(result) {
        // feel free to execute any code 
        // in the success callback
        $('#result').html(result);
    });
});

这种方法的好处：

不显眼
标记和 javascript 之间的清晰分隔
缓存 javascript 文件并降低带宽使用率

额外好处：没有头痛。

【讨论】：

如何将模型 ID 传递给 .ajax 函数？
@Nick Masao，您可以将其作为隐藏字段包含在表单中。
@Nick Masao，您还可以在传递给 ajax 选项的选项块中包含一个“数据”选项。 IE。 $.ajax({..., data:{ id: @Model.id }, ...});
不知何故，我的浏览器仍然要求我保存 JSON 文件......为什么会这样？也许如果我有一些线索，它可以帮助我克服这个困难。
@DmainEvent，您正在使用这两种方法中的哪一种？如果您使用 jquery.form 插件并且您的表单包含文件输入并且您使用的是 IE，请确保您有 read the documentation 并将您的 JSON 响应包装在 <textarea> 标签中。

【解决方案2】：

我一直环顾四周，在这里找到了答案：

Assign a Javascript function to AjaxOptions OnSuccess property raise an error - ASP.NET MVC（带有未选中的答案）

引用Atzu

如果您必须将任何参数传递给您可能需要的 OnSuccess 事件这样写函数。

OnSuccess = "function(){exampleFunction('" + param1 + "');}

它对我有用！

【讨论】：