C# 在 MVC Asp.net 中呈现部分视图后，是否可以启动 javascript 函数？

Is it possible to kick off a javascript function after a partial view renders in MVC Asp.net?

提问by Bill Blankenship

Let me preface this question with the fact that I am very new to MVC.

让我以我对 MVC 非常陌生这一事实作为这个问题的序言。

I have an instance where I am rendering a devexpress grid in a partial view.

我有一个在局部视图中渲染 devexpress 网格的实例。

@Html.Partial("MyGridPartial", Model)

I need to kick off a javascript function at the moment that the model has been populated via this partial view render. I attempted to do this via this. :

在模型已通过此局部视图渲染填充的那一刻，我需要启动一个 javascript 函数。我试图通过这个来做到这一点。：

settings.ClientSideEvents.EndCallback

I can get to this point, but at that time I do not have the model itself populated so it does no good. I was wondering if anyone is aware of a generic way of kicking/attaching to a partial view render in order to jump into some clientside javascript code.

我可以做到这一点，但当时我没有填充模型本身，所以它没有好处。我想知道是否有人知道踢/附加到局部视图渲染以跳转到某些客户端 javascript 代码的通用方法。

采纳答案by Dave Alperovich

If you are rendering this partial as part of the normal flow of a View being rendered, the answer is NO.

如果您将此部分渲染为正在渲染的视图的正常流程的一部分，则答案是否定的。

Reason for this is the Partial is converted into a string before the parent View is even rendered. At that point, none of your markup has been seen by the browser, no jscript has been read.

原因是 Partial 在父 View 被渲染之前被转换成一个字符串。那时，浏览器没有看到您的任何标记，也没有读取任何 jscript。

If, on the other hand, you rendered the partial in your JQuery Ready function:

另一方面，如果您在 JQuery Ready 函数中呈现了部分：

$(document).ready(function() {

$(document).ready(function() {

I think you would need to use an Action Partial (Partial that gets called by an action method). Action Partials can be called within your JQuery Ready function by referencing the url (restfully):

我认为您需要使用 Action Partial（由操作方法调用的 Partial）。可以通过引用 url（安静地）在您的 JQuery Ready 函数中调用 Action Partials：

$('#divMyGridPartial').load('/Grids/MyGridPartial/{id}');

and any follow up jscript/jquery functions can be called within the ready series.

并且可以在就绪系列中调用任何后续的 jscript/jquery 函数。

The other advantage of an Action Partial, the Model is formed within the action method and can be created contextually to what you need (ideally hinging off an id passed).

Action Partial 的另一个优点是，Model 是在 action 方法中形成的，可以根据您的需要在上下文中创建（理想情况下，可以根据传递的 id 进行创建）。

回答by Nick Albrecht

If it's a PartialView you're rendering in a View on the serverthen Dave's method would work best. Simply wire-up your code to the DOM ready event.

如果它是在服务器上的视图中呈现的 PartialView，那么 Dave 的方法将最有效。只需将您的代码连接到 DOM 就绪事件。

$(document).ready(function(){
    //Javascript logic to fire goes here
});

or if you prever the shorthand version...

或者如果您使用速记版本...

$(function(){
    //Javascript logic to fire goes here
});

If you're rendering a partial view that is being loaded via Ajax then the same method will work. jQuery will run javascript in the html passed back to the client via Ajax once it's attached to the DOM if I recall correctly (feel free to test this I'm just going by memory about it firing once attached to the DOM, but I believe this is a feature of the load()method), assuming the javascript you want to run is in the response. If it's in the parent page sending the Ajax request then you're best bet is to hook it up to the complete event. (I'm populating the parameter on the client side here)

如果您正在渲染通过 Ajax 加载的局部视图，那么同样的方法将起作用。如果我没记错的话，jQuery 将在通过 Ajax 传递回客户端的 html 中运行 javascript（如果我没记错的话，可以随意测试这个我只是通过记忆来了解它一旦附加到 DOM 就会触发，但我相信这一点）是该load()方法的一个功能），假设您要运行的 javascript 在响应中。如果它在发送 Ajax 请求的父页面中，那么最好将它连接到完整事件。（我在这里填充客户端的参数）

$("#wrapperAwaitingContent").load("/Grids/MyGridPartial", {id: null /*parameters*/}, function(text, status, xhr){
    //Javascript logic to fire goes here
});

For me the url used in the .load()call is resolved using the UrlHelper on the server

对我来说，.load()调用中使用的 url是使用服务器上的 UrlHelper 解析的

$("#wrapperAwaitingContent").load("@Url.Action("MyGridPartial", "Grids")", {id: null /*parameters*/}, function(text, status, xhr){
    //Javascript logic to fire goes here
});

You also have the option of doing something similar to this using Unobtrusive Ajax. (I'm populating the parameter on the server side here)

您还可以选择使用 Unobtrusive Ajax 执行与此类似的操作。（我在这里填充服务器端的参数）

@Ajax.ActionLink("Load Data", "MyGridPartial", "Grids", new { id = null/*parameters*/ }, new AjaxOptions() { UpdateTargetId = "wrapperAwaitingContent", OnComplete="onCompleteMethodName" })

There are more properties you can set for the AjaxOptions other than the element to receive the HTML and the method to call when it's finished but I find I'll reuse functions defined in a shared javascript file and populate them only if they are not already populated from there, something like this...

除了用于接收 HTML 的元素和完成时调用的方法之外，您还可以为 AjaxOptions 设置更多属性，但我发现我将重用共享 javascript 文件中定义的函数，并仅在它们尚未填充时填充它们从那里开始，这样的事情......

$("a[data-ajax='true']").each(function () {
    var ajaxUpdate = $(this).closest("data-ajax-container");
    $(this).attr("data-ajax-update", $(this).attr("data-ajax-update") ? $(this).attr("data-ajax-update") : ajaxUpdate);
    $(this).attr("data-ajax-mode", $(this).attr("data-ajax-mode") ? $(this).attr("data-ajax-mode") : "replace");
    $(this).attr("data-ajax-success", $(this).attr("data-ajax-success") ? $(this).attr("data-ajax-success") : "AjaxSuccess");
    $(this).attr("data-ajax-complete", $(this).attr("data-ajax-complete") ? $(this).attr("data-ajax-complete") : "AjaxComplete");
    $(this).attr("data-ajax-failure", $(this).attr("data-ajax-error") ? $(this).attr("data-ajax-error") : "AjaxError");
});