All geek questions in one place

Partial view issue - jQuery not defined

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

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

A partial view contains some jQuery functions. When it loads, it shows a jQuery message not defined, but jQuery works on the main page.

So, I tried two other methods to load a partial view, and there is no problem with 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 Index.cshtml Page

 @{ ViewBag.Title = "Admin"; } <div id="main_content"> @Html.Action("GetView", "Packages") </div>

Partial view of _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 a problem with jQuery loading, but I don’t understand why this happens with certain actions.

Please offer me a solution to this problem.

+6
source share
2 answers

Your views (and not partial views) should include code in the @section Scripts block. As you pointed out, @section does not work in partial views.

Make sure your code in the parent view looks like this:

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

The @section directive tells the view designer where to insert this block on the main page. With Javascript, you need it to always be in the Scripts section, or it will appear in the line where it was declared.

An alternative is to move jQuery's inclusion to RenderBody() calls on the main 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>

Browser caching associated with the use of packages means that only loading the first page will be slightly inefficient on your site.

+13
source

If you need to run scripts on a partial view, as in 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 occurs on the original parent load page. If so, you can work around the problem by NOT loading the partial part on the main view. Instead, you can load a partial view using jQuery AFTER loading the start page.

So, instead of doing this inside HTML with a basic view:

 @Html.Partial("YourCoolDynamicDashboard")

Do this in a .js file or in your main javascript tag:

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

This work will allow you to run client-side jQuery code on both the main AND view and the partial view.

0
source

Source: https://habr.com/ru/post/975483/

More articles:


All Articles