How do I integrate jquery with mvc framework, i have created a sample application and i have the directories named app_data, Content, Controllers, Model, Views and many others . The controller folder contains All the controllers written in c#.So where should i write the jquery script, should i write it in layout.cshtml or in index.cshtml ? How do i integrate jquery with asp.net mvc framework.
2 Answers
As you know in MVC, there is a Layout.cshtml file.
This is what my _Layout.cshtml contains. The below code for _Layout.cshtml is as per my requirement.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Your title</title>
<meta name="viewport" content="width=device-width" />
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
</head>
<body>
<div id="body">
<section class="content-wrapper main-content clear-fix">
@RenderBody()
</section>
</div>
//blah blah
</body>
</html>
If you were to include your Master Page(_Layout.cshtml) in all your views you can just include your scripts in _Layout page and refer to that _Layout.cshtml page in your view.
This is how you should refer to your _Layout.cshtml file in your view.
On top of your view, you should write a code block like this inorder to add your MasterPage reference.
@{
ViewBag.Title= "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
Now go a head and write your jQuery code that you needed in your view:
<script type="text/javascript">
$(function(){
//your jQuery goes here
});
</script>
Finally your view should look like this :
@{
ViewBag.Title= "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<html>
<head>
<style>
</style>
<script type="text/javascript">
$(function(){
//your jQuery goes here
});
</script>
</head>
<body>
@: This is my Index View
</body>
</html>
Hope it helps.
If anything went wrong please tell me.
3 Comments
Karthik Chintala
It is called as
tilde, when you use relative paths, if you use ~ it gets you from the application root.
Dave Alperovich
this is a pretty exhaustive tutorial. @Falcon, Karthik can only take you so far. At this point you should be able to implement with your own research.
please follow below url for MVC with Jquery with proper architecture
http://www.codeproject.com/Articles/344292/ASP-NET-MVC3-Razor-With-jQuery-For-Beginners
_Layout.cshtmlto all your views, then simply write@Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/jqueryui")in your Layout page. Include aLayout="path of layout"in a section in your view and write yourjQueryin your views