How to add a script in a partial view in MVC4?

问题

This is the code which I have in my partial view

@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")
}

Please note at the bottom of my code, I've got a @section, and I realized that it's not running if I set a breakpoint there. If I move that line in the _Layout.cshtml it works well, but that's not the idea.

How can I tell to MVC4 in a partial razor view that I want to add that library?

回答1:

You can use @Scripts.Render("~/Scripts/my-script.js") for .js files and @Styles.Render("~/Content/my-Stylesheet.css") for css files.

Nb: it works for a particular bundle also More details - 'http://www.asp.net/mvc/overview/performance/bundling-and-minification'

it works on any sub-pages in razor including partial views. for more info google for the usage of these helpers

回答2:

You can't render layout sections from a partial. Move the section definition to the parent page or layout.

回答3:

Check out my answer How to render a Section in a Partial View, which allows you to define Scripts and Styles in any view/partial view. It also takes care of duplicate includes.

My personal take is that sections aren't a good solution for styles and javascript includes.

回答4:

You can add the script directly at the end of the partial view html, without script section (because script section is not rendered in partial views)

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

回答5:

There is no common solution for this issue but you can do the following simplest ways:

1) You can create a set of extension method as the following:

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

2) Simply move your javascript codes into a separated partial view and on your main view, render 2 partial views. One for the main partial view and the other for your scripts as the following:

{
    // markup and razor code for Main View here

    @Html.Partial("Main_PartialView")
}

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

Hope it helps.

回答6:

This worked for me allowing me to colocate JavaScript and HTML for partial view in same file for ease of readability

In View which uses Partial View called "_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" } })

 }

In Partial View file

@model SomeType

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

@if (region == "HTMLSection")
{


}

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

回答7:

This Stackoverflow page provided a full solution to this question: Using sections in Editor/Display templates

TL;DR: Just add the Forloop.HtmlHelpers nuget package https://www.nuget.org/packages/Forloop.HtmlHelpers/ to your project to allow you to run Javascript from Razor Partial Views and Templates in ASP.NET MVC. I have personally used this with my MVC 5 project.

回答8:

If you want to include specific scripts only in some partial views and avoid spreading them unnecessarily throughout your application, you can do something like this:

Define a bundle pointing to an empty javascript file in your BundleConfig.cs:

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

In the head section of your _Layout.cshtml, add this variable:

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

In the bottom of your _Layout.cshtml, render any additional bundles you want:

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

And finally, in the partial view in which you need any specific scripts, just add the corresponding bundle to the variable:

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

Partial views are rendered before the _Layout.cshtml, so you need that verification at the top of the file. It goes like this: if any partial view assigned a value to ViewBag.AdditionalBundle, then use it. Otherwise, render an empty script.

来源：https://stackoverflow.com/questions/14114084/how-to-add-a-script-in-a-partial-view-in-mvc4