Menu
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.
960
Partial helper functions will not work with jQuery Client Side scripting. The Partial View will be populated and fetched using jQuery AJAX and finally it will be rendered as HTML inside DIV using jQuery.
Solution 1 There is no difference in the markup between a partial view and a view; the only difference is in how they are delivered to the browser. A partial view is sent via AJAX and must be consumed by JavaScript on the client side, while a View is a full postback. That's it.
Partial Views can use the Page Model for their data whereas Child Actions use independent data from the Controller. Editor/Display templates pass items from the model to the system but can be overridden by user partial views.
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.
187
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
