如何在ASP.NET MVC3中包含部分视图中的JavaScript

Question

I would like to be able to provide a way for partial views to include JavaScript code / files at the bottom of a view. 我希望能够为部分视图提供一种在视图底部包含JavaScript代码/文件的方法。 This would enable partial views to include any JavaScript files that they depend on. 这将使部分视图包含它们所依赖的任何JavaScript文件。 For instance, if I wanted to write a partial that needs to create a JQueryUI dialog, I would like to import the JQueryUI JavaScript file as well as add JavaScript code that renders the dialog. 例如，如果我想编写需要创建JQueryUI对话框的部分，我想导入JQueryUI JavaScript文件以及添加呈现对话框的JavaScript代码。

I'm currently writing this code in the parent view, which makes it kind of pointless to use a partial view. 我目前正在父视图中编写此代码，这使得使用局部视图毫无意义。

I understand that calling RenderPartial multiple times would result in scripts being included multiple times. 我知道多次调用RenderPartial会导致多次包含脚本。 This is a solvable issue once I know how to actually include JavaScript into the main view from the partial view. 一旦我知道如何从局部视图中将JavaScript实际包含到主视图中，这是一个可解决的问题。

Answer 1

Define ContentPlaceHolder in your MasterPage (ASPX) or Section in your Layout Page (Razor) 在MasterPage（ASPX）中定义ContentPlaceHolder或在布局页面中定义部分（Razor）

ASPX : ASPX ：

<body>
  <!-- End of Body -->
  <asp:ContentPlaceHolder ID="JavaScriptIncludes" runat="server" />
</body>

Razor : 剃刀：

<body>
  <!-- End of Body -->
   @RenderSection("JavaScriptIncludes", required: false)
</body>

Then in the Partial: 然后在部分：

ASPX : ASPX ：

<asp:Content ID="ExtraJs" ContentPlaceHolderID="JavaScriptIncludes" runat="server">
   <script type="text/javascript" src="@Url.Content("/Scripts/SomeScript.js")" />
</asp:Content>

Razor : 剃刀：

@section JavaScriptIncludes
{
   <script type="text/javascript" src="@Url.Content("/Scripts/SomeScript.js")" />
}

Also think about using a HTML Helper to render out the <script> tags. 还要考虑使用HTML Helper来渲染<script>标记。

Answer 2

Here is how you can have Partial View with JavaScript code that uses any library ( even when libraries are loaded at the end of the page ) 以下是使用任何库的JavaScript代码进行部分视图的方法（ 即使在页面末尾加载库时）

In your partial view add: 在您的局部视图中添加：

@{
    TempData["Script"] += "MyFunction();";
}

<script type="text/javascript">
    function MyFunction() {
        // you can call your library here, e.g. jquery:
        $(function () {

        });
    }
</script>

In your _Layout.cshtml page add after your libraries included: 在您的_Layout.cshtml页面中添加您的库后添加：

@*LOAD YOUR LIBRARIES HERE (E.G. JQUERY) *@


@if (TempData["Script"] != null)
{
    <script type="text/javascript">
        @Html.Raw(TempData["Script"].ToString())
    </script>
}

You can have multiple partial views attaching theirs functions to the same key TempData["Script"]. 您可以将多个部分视图附加到相同的键TempData [“Script”]。 They will happily coexist if you keep adding the functions using += operator: 如果你继续使用+ =运算符添加函数，他们将很乐意共存：

@{
    TempData["Script"] += "AnotherFunction();";
}

Answer 3

您可以在<body>标记内包含<script>标记，以便在局部视图中包含它们。

如何在ASP.NET MVC3中包含部分视图中的JavaScript

问题描述

3 个解决方案

解决方案1
7 2011-01-16 22:37:46

解决方案2
1 2016-10-07 06:45:32

解决方案3
0 2011-01-16 20:59:29

如何在ASP.NET MVC3中包含部分视图中的JavaScript

问题描述

3 个解决方案

解决方案1 7 2011-01-16 22:37:46

解决方案2 1 2016-10-07 06:45:32

解决方案3 0 2011-01-16 20:59:29

解决方案1
7 2011-01-16 22:37:46

解决方案2
1 2016-10-07 06:45:32

解决方案3
0 2011-01-16 20:59:29