如果在页面底部呈现捆绑脚本，如何使用动态JQuery脚本定义部分视图？

Question

我有一个使用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部分视图脚本延迟渲染（例如在父脚本部分中），或者是针对此问题的不同方法？

Answer 1

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

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

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

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

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

Answer 2

作为参考，我使用了Darin的解决方案，并且还针对我需要注册不在文件中的原始脚本的情况进行了扩展。 其他方法是：

public static class HtmlExtensions
{
    public static IHtmlString RegisteredRawScripts(this HtmlHelper htmlHelper)
    {
        var ctx = htmlHelper.ViewContext.HttpContext;
        var registeredScripts = ctx.Items["_rawscripts_"] as Stack<string>;
        if (registeredScripts == null || registeredScripts.Count < 1)
        {
            return null;
        }
        var sb = new StringBuilder();
        foreach (var script in registeredScripts)
        {
            sb.AppendLine("\r\n" + script);
        }
        return new HtmlString(sb.ToString());
    }

    public static void RegisterRawScript(this HtmlHelper htmlHelper, string script)
    {
        var ctx = htmlHelper.ViewContext.HttpContext;
        var registeredScripts = ctx.Items["_rawscripts_"] as Stack<string>;
        if (registeredScripts == null)
        {
            registeredScripts = new Stack<string>();
            ctx.Items["_rawscripts_"] = registeredScripts;
        }
        if (!registeredScripts.Contains(script))
        {
            registeredScripts.Push(script);
        }
    }
}

在你的部分，你做的事情如下：

@Html.RegisterRawScript(script);  // where script is your raw script as a string

在您的布局中，您注册了原始脚本：

@Html.RegisteredRawScripts()

如果在页面底部呈现捆绑脚本，如何使用动态JQuery脚本定义部分视图？

问题描述

2 个解决方案

解决方案1
6 已采纳 2014-02-01 22:35:45

解决方案2
0 2014-03-09 19:37:56

如果在页面底部呈现捆绑脚本，如何使用动态JQuery脚本定义部分视图？

问题描述

2 个解决方案

解决方案1 6 已采纳 2014-02-01 22:35:45

解决方案2 0 2014-03-09 19:37:56

解决方案1
6 已采纳 2014-02-01 22:35:45

解决方案2
0 2014-03-09 19:37:56