Is it OK to put JavaScript in Partial Views Is it OK to put JavaScript in Partial Views javascript javascript

Is it OK to put JavaScript in Partial Views


If Resharper warns you it's not a big deal ^_^

But if I were you I wouldn't put JavaScript in the partial view at all.

Because the partial view could be inserted in one page many times then you'll get an issues with your JavaScripts.

And for your case if you couldn't separate the JavaScript to JS file then just create another PartialView and put these scripts in it and just render it in your main page.


If you want to write partial views that are encapsulated "widgets" that just work once you include them in a page, then embedding a script block inside the partial view is one clean way to wrap the markup and the initialization script together in a partial view. For example, I might have a partial view named "_EventList" that I use throughout my site. If I place in two places on my master page it should just work and I prefer not to have to write logic in my master page to initialize the widget.

If you will never use it more than once in a page, its simple. But if you might, then wrap the script so it doesn't execute twice. See below. For the sake of Stack Overflow snippets I simulate it by repeating the partial view twice in the code snippet to represent including a partial view twice in a master page.

My master page might look like:

<div id="left-nav">   @Html.Partial("_EventList")           </div><div id="body"></div><div id="right-nav">   @Html.Partial("_EventList")</div>

Example:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!-- Self-contained partial view containing widget --><div id="widgetDiv" class="panel panel-default">    <div class="panel-heading">Event Dates</div>    <div class="panel panel-group">       <ul class="widget">         <!-- These will load dynamically -->       </ul>    </div>    <script>        $(document).ready(function() {            // Run this once only in case widget is on page more than once            if(typeof $widget == 'undefined') {                $widget = $("ul.widget"); // could be more than one                // mock data to simulate an ajax call                var data = [                   {Description: "March", StartDate: "03/01/2015"},                   {Description: "April", StartDate: "04/01/2015"},                   {Description: "May", StartDate: "05/01/2015"}                ];                $.each($widget, function(w, widget) {                    // might be an $.ajax call                    $.each(data, function(i, row) {                        $(widget).append("<li><a href='/Widget/Search?startDate=" + row.StartDate + "'>" + row.Description + "</a></li>");                    });                });            }        });    </script></div><!-- End of widget / partial view --><!-- Second copy of above for sake of example snippet --><!-- No need to read further --><!-- Self-contained partial view containing widget --><div id="widgetDiv" class="panel panel-default">    <div class="panel-heading">Event Dates</div>    <div class="panel panel-group">       <ul class="tinylist nav nav-sidebar widget">         <!-- These will load dynamically -->       </ul>    </div>    <script>        $(document).ready(function() {            // Run this once only in case widget is on page more than once            if(typeof $widget == 'undefined') {                $widget = $("ul.widget"); // could be more than one                // mock data to simulate an ajax call                var data = [                   {Description: "March", StartDate: "03/01/2015"},                   {Description: "April", StartDate: "04/01/2015"},                   {Description: "May", StartDate: "05/01/2015"}                ];                $.each($widget, function(w, widget) {                    // might be an $.ajax call                    $.each(data, function(i, row) {                        $(widget).append("<li><a href='/Widget/Search?startDate=" + row.StartDate + "'>" + row.Description + "</a></li>");                    });                });            }        });    </script></div><!-- End of widget / partial view -->