如何在 MVC4 的局部视图中添加脚本？答案

【问题标题】：How to add a script in a partial view in MVC4?如何在 MVC4 的局部视图中添加脚本？
【发布时间】：2012-12-16 08:23:56
【问题描述】：

这是我在部分视图中的代码

@model Contoso.MvcApplication.Models.Exercises.AbsoluteArithmetic

@using(Html.BeginForm())
{
<div>
    <span style="width: 110px; float:left; text-align:center; font-size:2.5em;">@Model.Number1</span>
    <span style="width: 110px; float:left; text-align:center; font-size:2.5em;">+</span>
    <span style="width: 110px; float:left; text-align:center; font-size:2.5em;">@Model.Number2</span>
    <span style="width: 110px; float:left; text-align:center; font-size:2.5em;">=</span>
    <span>
            @Html.EditorFor(model => model.Result)
            @Html.ValidationMessageFor(model => model.Result)
    </span>
</div>
}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

请注意，在我的代码底部，我有一个@section，我意识到如果我在那里设置断点，它就不会运行。如果我在 _Layout.cshtml 中移动那条线，效果会很好，但这不是想法。

如何在局部剃须刀视图中告诉 MVC4 我要添加该库？

【问题讨论】：

我们无法将脚本添加到局部视图。但是将脚本添加到视图将解决您的问题。检查我对stackoverflow.com/questions/12430005/… 的回答。我们可以动态地将与局部视图相关的脚本添加到容器视图中。希望能解决你的问题
我知道这个问题是关于 MVC4 的，但你现在可以在 MVC5 中做到这一点；见stackoverflow.com/questions/21827009/…

标签： asp.net asp.net-mvc razor asp.net-mvc-4 razor-2

【解决方案1】：

您不能从局部渲染布局部分。将部分定义移动到父页面或布局。

【讨论】：

但是当局部视图通过ajax调用并且必须包含一些特定的js库和样式时是什么情况？

【解决方案2】：

查看我的答案How to render a Section in a Partial View，它允许您在任何视图/部分视图中定义脚本和样式。它还负责处理重复的包含。

我个人的看法是，对于样式和 javascriptincludes，section 并不是一个好的解决方案。

【讨论】：

为什么不是一个好的解决方案？你会提出什么建议？直接包含脚本？

【解决方案3】：

你可以使用 @Scripts.Render("~/Scripts/my-script.js") 用于 .js 文件，@Styles.Render("~/Content/my-Stylesheet.css") 用于 css 文件。

注意：它也适用于特定捆绑包更多详细信息 - 'http://www.asp.net/mvc/overview/performance/bundling-and-minification'

它适用于 razor 中的任何子页面，包括部分视图。欲了解更多信息谷歌这些助手的用法

【讨论】：

这可行，但如果您以这种方式包含的脚本依赖于包含在父页面的@section 中的其他脚本（例如 jQuery、Bootstrap），则它们可能无法正常工作在它们的依赖项之前渲染。
我刚刚准确地回答了这个问题。通常，父页面中的脚本先于子页面中的脚本加载。无论如何，必须确保之前加载了依赖项。 @PhilipStratford 你是否有一个提议，我的意思是，以代码的形式来解决你提出的问题？

【解决方案4】：

此问题没有通用解决方案，但您可以执行以下最简单的方法：

1) 你可以创建一组扩展方法如下：

https://stackoverflow.com/a/6671766/5208058

2) 只需将您的 javascript 代码移动到一个单独的局部视图中，然后在您的主视图上呈现 2 个局部视图。一个用于主要部分视图，另一个用于您的脚本，如下所示：

{
    // markup and razor code for Main View here

    @Html.Partial("Main_PartialView")
}

@section Scripts
{
    @Html.Partial("JavaScript_PartialView")
}

希望对你有帮助。

【讨论】：

【解决方案5】：

这对我有用，允许我将 JavaScript 和 HTML 并置在同一文件中以获取部分视图，以便于阅读

在使用名为“_MyPartialView.cshtml”的局部视图的视图中

<div>
    @Html.Partial("_MyPartialView",< model for partial view>,
            new ViewDataDictionary { { "Region", "HTMLSection" } } })
</div>

@section scripts{

    @Html.Partial("_MyPartialView",<model for partial view>, 
                  new ViewDataDictionary { { "Region", "ScriptSection" } })

 }

在部分视图文件中

@model SomeType

@{
    var region = ViewData["Region"] as string;
}

@if (region == "HTMLSection")
{


}

@if (region == "ScriptSection")
{
        <script type="text/javascript">
    </script">
}

【讨论】：

【解决方案6】：

这个 Stackoverflow 页面为这个问题提供了完整的解决方案：Using sections in Editor/Display templates

TL;DR：只需将 Forloop.HtmlHelpers nuget 包 https://www.nuget.org/packages/Forloop.HtmlHelpers/ 添加到您的项目中，即可在 ASP.NET MVC 中从 Razor 部分视图和模板运行 Javascript。我亲自将它用于我的 MVC 5 项目。

【讨论】：

【解决方案7】：

可以直接在局部视图html的末尾添加脚本，不需要脚本部分（因为脚本部分不会在局部视图中呈现）

<script language="javascript">
   // Your scripts here
   // ....
</script>

【讨论】：

这正是我的问题所在。它在一个花括号的脚本标签中，被忽略了。

【解决方案8】：

如果您只想在某些部分视图中包含特定脚本并避免在整个应用程序中不必要地传播它们，您可以执行以下操作：

在BundleConfig.cs 中定义一个指向空 javascript 文件的包：

 bundles.Add(new ScriptBundle("~/bundles/empty").Include(
                    "~/Scripts/empty.js"
            ));

在_Layout.cshtml 的头部，添加这个变量：

@{
        ViewBag.AdditionalBundle = String.IsNullOrEmpty(ViewBag.AdditionalBundle) ? "~/bundles/empty" : ViewBag.AdditionalBundle;
    }

在_Layout.cshtml 的底部，渲染您想要的任何其他捆绑包：

@Scripts.Render("~/bundles/lib")
    @Scripts.Render(@ViewBag.AdditionalBundle);
    @RenderSection("scripts", required: false)

最后，在需要任何特定脚本的局部视图中，只需将相应的包添加到变量中：

ViewBag.AdditionalBundle = "~/bundles/mySpecificBundle";

部分视图在_Layout.cshtml 之前呈现，因此您需要在文件顶部进行验证。它是这样的：如果任何局部视图为ViewBag.AdditionalBundle 分配了一个值，则使用它。否则，渲染一个空脚本。

【讨论】：

【解决方案9】：

新手技巧：在已加载的文件中定义一个函数，并在部分视图加载时调用该函数。

1.有一个单独的 js 文件，你可以用你通常的包加载：

BundleConfig.cs

bundles.Add(new ScriptBundle("~/bundles/CustomScripts").Include(
    "~/Scripts/Custom/partial-view.js"
));

像您布局中的任何其他包一样加载自定义脚本包

_Layout.cshtml

@Scripts.Render("~/bundles/CustomScripts");

在自定义js文件中定义一个函数，在我们的例子中是OnPartialViewLoad函数：

部分视图.js

function OnPartialViewLoad() {
    // ... your onLoad work
}

在局部视图的末尾添加一个 document.ready() 函数并调用 onLoaded 函数。

partialView.cshtml

<script type="text/javascript">
    $(document).ready(function(){
        OnPartialViewLoad();
    });
</script>

【讨论】：