c# – 如果在页面底部呈现捆绑脚本,如何使用动态JQuery脚本定义

发布时间：2020-12-15 08:44:20 所属栏目：百科来源：网络整理

导读：我有一个使用MVC4和Razor视图的Web应用程序,它们使用了大量的 JQuery和其他插件脚本. 为了加快视图的渲染速度,我相信一般来说,最好将脚本渲染到正文的底部,因此布局(大大合并)如下所示： body @RenderBody() @Scripts.Render("~/bundles/jquery") @Scripts.R

我有一个使用MVC4和Razor视图的Web应用程序,它们使用了大量的 JQuery和其他插件脚本.

为了加快视图的渲染速度,我相信一般来说,最好将脚本渲染到正文的底部,因此布局(大大合并)如下所示：

<body>
    @RenderBody()

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/other")

    @RenderSection( "Scripts",false )
</body>

Scripts部分允许特定视图添加其他JQuery函数,并且保证它们在JQuery库之后呈现.到现在为止还挺好.

现在考虑视图中的以下片段,该片段为集合中的每个项目呈现部分：

@foreach (var item in Model.Items)
{
    Html.RenderPartial("_MyPartial",item);
}

这个部分(_MyPartial)需要根据集合项详细信息(如下面的代码段)为控件呈现JQuery：

$(function () {
    $("#@(Model.Id)").click(function () {
        // do something when control on partial with id Model.Id is clicked
        alert("I've been clicked!");
    });
});

部分视图JQuery函数不会被执行,因为在每个集合项的_MyPartial脚本之前没有加载JQuery库.在chrome调试器中运行显示$not defined,这证实了这一点.

我可以做一些非常丑陋的事情,例如在脚本部分复制每个foreach语句,用于调用partial的所有视图,然后让父视图生成脚本.但是,这实际上会破坏局部视图的可重用性.

有没有办法让Razor部分视图脚本延迟渲染(例如在父脚本部分中),或者是针对此问题的不同方法？

解决方法

不幸的是,部分视图中不支持部分.一种可能性就是编写自定义帮助程序,如本文所述： https://stackoverflow.com/a/9663249/29407

这将允许您在文档末尾调用占位符助手,该助手将呈现已在partials中注册的所有脚本.

这就是说,通常更好的方法是将您部分需要的客户端功能公开为jQuery插件.然后在一些DOM元素上调用此插件非常容易：

$('.someElement').somePlugin();

这样你就不再需要在你的部分中做任何$(“#@(Model.Id)”).部分通常不应包含任何脚本.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!