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

asp.net asp.net-mvc razor asp.net-mvc-4 razor-2

103,860

Solution 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

Solution 2

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>

Solution 3

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

Solution 4

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.

Solution 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.

View more solutions

103,860

Darf Zon

Updated on May 19, 2020

Comments

Darf Zon almost 4 years
This is the code which I have in my partial view
```
@model Contoso.MvcApplication.Models.Exercises.AbsoluteArithmetic

@using(Html.BeginForm())
{
<div>
 @Model.Number1
 +
 @Model.Number2
 =
 
 @Html.EditorFor(model => model.Result)
 @Html.ValidationMessageFor(model => model.Result)
 
</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?
- Nuwan over 10 years
 
 We can not add scripts to a partial view. But adding scripts to the view will solve your issue. Check my answer for stackoverflow.com/questions/12430005/…. We can add scripts related to the partial view in to the container view dynamically. Hope that will solve your problem
- CrazyPyro over 9 years
 
 I know the question is about MVC4, but you might be able to do this now in MVC5; see stackoverflow.com/questions/21827009/…
krypru about 7 years

But what's the situation when partial view is called via ajax call and it has to contain some particular js library and styles?
Philip Stratford almost 7 years

This works, but if the scripts you include in this way are dependent on other scripts (e.g. jQuery, Bootstrap) which are included in a @section of the parent page they may not work if they are rendered before their dependencies.
Nishanth Shaan about 5 years

I just responded to the question precisely. Generally, The scripts in the parent pages loads before the scripts in child pages. Anyway one has to make sure that the dependencies are loaded before. @PhilipStratford Do you have a proposition, I mean, in the form of code, to resolve the concern that you raise?
JohnDoe almost 4 years

Why is it not a good solution? What would you propose? Including the script directly?
John Lord over 3 years

this was exactly what was wrong with mine. It was in a curly-braced script tag and it was being left out.