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

Question

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

10

我正在使用类似于以下方式来使用部分视图更新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，但是那个问题已经被放弃回答了）

- Francisco Noriega

在这个问题上点个赞；我相信我自己也见过同样的行为；使用ASP.NET 4.0与MVC2和C#。每次我向AjaxOptions添加OnSuccess成员值时，Ajax表单似乎会变成常规表单。现在我刚开始使用jQuery.form来提交这样的表单，但我也想弄清楚这个问题！ - Andrew Barber

嗯，我也在使用ASP.NET 4和MVC2以及C#。 - Francisco Noriega

可能是重复的问题：将JavaScript函数分配给AjaxOptions OnSuccess属性会引发错误 - ASP.NET MVC - bzlm

2个回答

5

我不断地寻找答案，最终在这里找到了答案:

将Javascript函数分配给AjaxOptions OnSuccess属性会引发错误 - ASP.NET MVC (并且是未被选择的答案)

引用Atzu

如果您必须向OnSuccess事件传递任何参数，则可能必须以这种方式编写函数。

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

它对我起作用了！

- Francisco Noriega

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Darin Dimitrov · Accepted Answer

有没有什么理由不按照正确的方法来做呢（毕竟我们现在是在2010年）？把MS AJAX和所有依赖它的帮助程序放在它应该去的地方，并编写适当的代码。虽然在经典WebForms中使用MS AJAX可能是有道理的，因为有UpdatePanels等功能...但在今天的新ASP.NET MVC应用程序中这样做，特别是在Microsoft完全拥抱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表单插件:

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

这种方法的好处：

不会干扰页面正常显示
明确分离标记语言和JavaScript
缓存JavaScript文件并减少带宽使用

额外的好处：没有烦恼。