MVC部分视图使用jquery.get()而不是Ajax.BeginForm触发Document.Ready()

时间:2022-10-08 13:07:54

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.

我最近注意到MVC是Ajax。BeginForm在返回视图时行为怪异。起初,一切看起来都很好,但后来我意识到,在准备好的文档中发生的所有绑定都丢失了。准备好的文档没有被执行。

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做同样的事情确实做好了执行文档的准备。但据我所知,这两种方法在根本上是相同的。我的快速解决方案是去掉助手的Replace TargetId实现,并使用它的AjaxOptions。调用我的jquery.get()实现。

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

但是,为什么在使用jquery.get()时,而在使用Ajax时,则不是这样。请换一个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>
<% } %>

Example 1. MVC Helper method for replacing a div

例1。用于替换div的MVC Helper方法


// 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) });
});

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

例2。get()方法,用于替换div

1 个解决方案

#1


2  

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

我可以建议一种不用JavaScript代码就可以构建富应用程序的替代方法,比如Ajax。BeginForm但是更灵活和可定制。

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

示例:从控制器获取html并插入到dom元素中。

<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"))

You use any dom value for request like are

您可以使用任何dom值作为请求。

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

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

您可以查看官方文档中的示例并从github下载示例项目示例。

#1


2  

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

我可以建议一种不用JavaScript代码就可以构建富应用程序的替代方法,比如Ajax。BeginForm但是更灵活和可定制。

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

示例:从控制器获取html并插入到dom元素中。

<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"))

You use any dom value for request like are

您可以使用任何dom值作为请求。

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

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

您可以查看官方文档中的示例并从github下载示例项目示例。