MVC局部视图触发的document.ready()与jquery.get(),但不Ajax.BeginForm视图、但不、局部、document

2023-09-10 19:55:38 作者:旧爱太浓

最近,我注意到,MVC的 Ajax.BeginForm 返航视图时采取行动strangly。起初,一切看起来还好,但后来我意识到所有发生在文件准备好失去了绑定。文件准备好没有被执行。

I recently noticed that MVC's Ajax.BeginForm was acting strangly when returning a view. At first everything looked alright, but then I realised all the bindings that happen in document ready were lost. Document ready was not being executed.

因为知道这工作在其他地方,我发现,做同样的事情用jQuery的GET确实执行文件准备好。但据我可以理解,这两种方法从根本上做同样的事情。我速战速决是去掉了帮助者的替换目标ID的实施和使用它的 AjaxOptions.OnSuccess 来叫我 jquery.get()的实施。

Knowing that this works elsewhere, I found that doing the same thing with a jquery get did execute document ready. But as far as I can understand, the two methods are fundamentally doing the same thing. My quick fix was to strip out the helper's Replace TargetId implementation and use it's AjaxOptions.OnSuccess to call my jquery.get() implementation.

但是,为什么当我使用文件准备好火 jquery.get(),而不是当我用 Ajax.BeginForm 来替换 DIV

But why does document ready fire when I use jquery.get(), and not when I use Ajax.BeginForm to replace a div?

// This method returns a the partial view from DoSomething, but DOES NOT execute the 
// partial view's document.ready
using (Ajax.BeginForm("DoSomething", "Somewhere", new AjaxOptions { HttpMethod = "Post", InsertionMode = InsertionMode.Replace, UpdateTargetId = "demo" }))
{ %>
    <div id="demo"></div>
<% } %>

例1 MVC Helper方法更换一个div

Example 1. MVC Helper method for replacing a div

// This method returns nothing from DoSomething, calls getSomething onSuccess and DOES 
// execute the partial view's document.ready
using (Ajax.BeginForm("DoSomething", "Somewhere", new AjaxOptions { HttpMethod = "Post", OnSuccess = "function() { getSomething(); }" }))
{ %>
    <div id="demo"></div>
<% } %>

// this being the simplified js function
function getSomething(){
    var $targetDiv = $("#demo");
    var url = "<%: Url.Action("LoadSomething", "Somewhere")  %>";
    $.get(url, { }, function (result) { $targetDiv.html(result) });
});

例2 jquery.get()方法用于替换一个div

Example 2. jquery.get() method for replacing a div

推荐答案

我可以建议替代方法没有JavaScript code怎么样建立丰富的应用程序都Ajax.BeginForm但更多的灵活性和可定制性。

I can suggest alternative way how build rich application without JavaScript code like are Ajax.BeginForm but more flexibility and customizable.

示例:将HTML从控制器,并插入到DOM元素

Sample: Get html from controller and insert into dom element.

<div id="containerId"></div>
 @(Html.When(JqueryBind.Click)
       .Do()
       .AjaxGet(Url.Action("GetContent", "SomeController"))
       .OnSuccess(dsl => dsl.With(r=> r.Id("containerId"))
                            .Core()
                            .Insert
                            .Html())
       .AsHtmlAttributes()
       .ToButton("Insert button"))

您使用任何DOM值等是要求

You use any dom value for request like are

AjaxGet(Url.Action("GetContent", "SomeController",new 
                                       {
                                         Criterie=Selector.Jquery.Name("txtName")
                                        } ))

您可以看看样品在官方文档和下载示例项目的从GitHub的样品。

You can look sample on official documentation and download sample project sample from github.