Partial view issue - jQuery not defined

jquery asp.net-mvc asp.net-mvc-3 asp.net-mvc-4 asp.net-mvc-5

17,337

Solution 1

Your views (not partial views) need to include the code in a @section Scripts block. As you pointed out @sections do not work in Partial Views.

Ensure your code in the parent view is in one like this:

@section Scripts{
    <script>
         // DOM ready handler if needed
         $(function(){
              // Your Javascript/jQuery code here
         });
    </script>
}

The @section directive tells the view builder where to insert this block in the master page. With Javascript you need it to always be in the Scripts section, or it will be rendered inline where it was declared.

The alternative is to move the jQuery inclusion to before RenderBody() calls in the master page:

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
    @Scripts.Render("~/bundles/modernizr")
    @RenderSection("Head", false)
    <!-- jQuery -->
    @Scripts.Render("~/bundles/jquery")
</head>
<body>
    <section >
        <div>
            @RenderBody()
        </div>

        <div>
            @RenderSection("Sidebar", false)
        </div>

    </section>

    @RenderSection("Scripts", false)
</body>

The browser caching associated with using bundles means only the very first page load will be a tiny bit inefficient on your site.

Solution 2

If you must run scripts on a partial view, as is the case when dynamically created content is returned when calling partial views from an AJAX call, you should find that the problem described in the question actually only happens on the initial parent page load. If this is the case, you can work around the problem by NOT loading the partial on the primary view. Instead, you can load the partial view using JQuery AFTER the initial page load.

So, instead of doing this inline with the HTML on the primary view:

@Html.Partial("YourCoolDynamicDashboard")

Do this in a .js file or within your primary view's javascript tag:

$(document).ready(function () {
      $.get("/YourController/YourCoolDynamicDashboard", [<... data goes here...>], function (result) {
            $("#YourDashboardContainer").html(result);    
      });
});

This work around will allow you to run client-side JQuery code on both the primary view AND in the partial view.

17,337

Author by

Shoaib Ijaz

Software Engineer - Competitive Intelligence | E-Commerce | GIS | Process Automation

Updated on June 26, 2022

Comments

Shoaib Ijaz almost 2 years

I am facing jQuery loading issue in an ASP.NET MVC 5 project. I am trying to load a partial view so I have used

@Html.Action("GetView", "Home")

Partial view contains some jQuery functions. When it's loaded it shows jQuery not defined message, but jQuery is working on main page.

So I have tried two other methods to load the partial view and there is no issue of jQuery with these methods

@Html.Partial("_viewname")

@Ajax.BeginForm()

Home Controller

public class HomeController : Controller
    {

        public ActionResult Index()
        {
            return View();
        }

        public ActionResult GetView(string id = "")
        {
           return PartialView("_ViewName");

        }
    }

_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
    @Scripts.Render("~/bundles/modernizr")
    @RenderSection("Head", false)
</head>
<body>
    <section >
        <div>
            @RenderBody()
        </div>

        <div>
            @RenderSection("Sidebar", false)
        </div>

    </section>

    <!-- jQuery -->
    @Scripts.Render("~/bundles/jquery")
    @RenderSection("Scripts", false)
</body>

Parent Page Index.cshtml

@{
    ViewBag.Title = "Admin";
}

<div id="main_content">
    @Html.Action("GetView", "Packages")
</div>

Partial View _view.cshtml

<div class="row">
    <div class="col-sm-12">
        <select>
            <option>1</option>
            <option>2</option>
        </select>
    </div>
</div>


<script type="text/javascript">

    $(document).ready(function () {
        $("select").addClass("form-control");
    });

</script>

I think there is some jQuery loading issue, but I don't understand why this is happening on specific action.

Please suggest me solution for this issue.