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

Question

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

@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 在一个局部 Razor 视图中添加该库？

- Darf Zon

---

我们不能向部分视图添加脚本。但是将脚本添加到视图中将解决您的问题。请查看我的回答，网址为https://dev59.com/CGjWa4cB1Zd3GeqPq3dR。我们可以动态地将与部分视图相关的脚本添加到容器视图中。希望这能解决您的问题。 - Nuwan

我知道这个问题是关于MVC4的，但你现在可能可以在MVC5中做到这一点；请参见https://dev59.com/bXzaa4cB1Zd3GeqPR5VY - CrazyPyro

Answer 1

你可以使用@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中的任何子页面，包括局部视图。要了解更多信息，请搜索这些帮助程序的用法。

- Nishanth Shaan

---

这个方法可行，但如果你所包含的脚本依赖其他脚本（例如jQuery和Bootstrap），而这些依赖脚本是通过父页面的@section包含的，那么如果在它们的依赖项之前呈现，它们可能无法正常工作。 - Philip Stratford

我刚刚精确地回答了这个问题。通常情况下，父页面中的脚本会在子页面中的脚本之前加载。无论如何，我们必须确保依赖项已经被加载。@PhilipStratford，你有没有什么建议，比如代码形式，来解决你提出的问题？ - Nishanth Shaan

Answer 2

您可以直接将脚本添加到局部视图 HTML 的末尾，而不需要使用脚本部分（因为脚本部分在局部视图中不会呈现）。

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

- Pila 77

---

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

如果在布局中添加的脚本有依赖关系，那么这种方法将无法生效。 - MrAlbino

Answer 3

您无法从部分页面中渲染布局部分，将部分定义移到父页面或布局中。

- viperguynaz

---

当通过ajax调用部分视图并且它必须包含特定的js库和样式时，情况如何？ - krypru

@krypru 如果我没记错的话，你是在混合使用MVC和Ajax调用，这是一个架构问题。 - undefined

Answer 4

这个问题目前没有通用的解决方案，但你可以采取以下简单方法：

1）你可以创建一组扩展方法，具体请参考以下链接：

https://dev59.com/U2025IYBdhLWcg3weV8s#6671766

2）将你的JavaScript代码移到一个单独的部分视图中，在主视图上呈现两个部分视图。一个用于主要的部分视图，另一个用于你的脚本代码，具体实现方式请参考以下内容：

{
    // markup and razor code for Main View here

    @Html.Partial("Main_PartialView")
}

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

希望这可以帮到你。

- Varan Sinayee

Answer 5

请查看我的答案如何在Partial View中呈现Section，它允许您在任何视图/部分视图中定义脚本和样式。 它还解决了重复包含的问题。

我个人认为，Sections不是处理样式和JavaScript includes 的好方法。

- Erik Philips

---

为什么这不是一个好的解决方案？你有什么提议？直接包含脚本吗？ - JohnDoe

Answer 6

我在同一个文件中将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">
}

- purvin

Answer 7

如果您想仅在某些偏视图中包含特定的脚本，避免将它们在整个应用程序中不必要地扩散，可以像这样操作：

在您的 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，则使用它。否则，请呈现一个空脚本。

- Glauber

Answer 8

这个Stackoverflow页面为这个问题提供了一个完整的解决方案：在Editor/Display模板中使用section

简而言之，只需将Forloop.HtmlHelpers nuget包https://www.nuget.org/packages/Forloop.HtmlHelpers/添加到您的项目中即可允许您在ASP.NET MVC中从Razor Partial Views和模板运行Javascript。我个人已经在我的MVC 5项目中使用了这个。

- James Porter

Answer 9

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

1.有一个单独的js文件，您可以与常规捆绑包一起加载：

BundleConfig.cs

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

2. 像加载其他 bundle 一样，在您的布局中加载自定义脚本 bundle

_Layout.cshtml

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

3. 在自定义的js文件中定义一个函数，例如OnPartialViewLoad函数：

partial-view.js

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

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

partialView.cshtml

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

- Yashash Gaurav