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

Question

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

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

@Html.Partial("MyGridPartial", Model)

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

settings.ClientSideEvents.EndCallback

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

Answer 1

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

原因是在父视图被渲染之前，Partial 被转换为字符串。此时，浏览器还没有看到您的任何标记，也没有读取任何 jscript。

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

$(document).ready(function() {

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

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

任何后续的 jscript/jquery 函数都可以在 ready 系列中调用。

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

Answer 2

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

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

或者如果你喜欢简写版本...

$(function(){
    //Javascript logic to fire goes 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
});

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

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

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

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

除了接收 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");
});