CODEWITHSUNDEEP
jqueryasp.net-mvc
user1233664
user1233664

Reputation:

Jquery integration with asp. net mvc framework

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.

Upvotes: 0

Views: 795

Answers (2)

Naresh Pansuriya
Naresh Pansuriya

Reputation: 2045

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

Upvotes: 0

Karthik Chintala
Karthik Chintala

Reputation: 5545

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.

Upvotes: 1

Related Questions