MVC 5 with @Scripts.Render("~/bundles/jquery") and JQuery Dialog

Question

I have just started working on MVC. Today I tried writing a test application just to show a Jquery Dialog whenever I click on a button. I created a web project in Visual Studio 2013 and selected MVC template. in Index.cshtml I have following code. I included all the ui related js files from downloading from jqueryui.com

@{
ViewBag.Title = "Home Page";
}
<link href="~/Scripts/jquery-ui.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery-ui.js"></script>
<div id="dialog" title="Basic dialog">
<p> This is a basic dialog.</p>
</div>
<button type="button" id="open">Click Me.</button>
<script type="text/javascript">
    $(document).ready(function () {
    $("#open").click(function () {
        $("#dialog").dialog();
    });
});
</script>

When I tried to run above code it didn't worked at all. But when I commented following line in _Layout.cshtml it worked.

@Scripts.Render("~/bundles/jquery")

I tried commenting the include script section in Index.cshtml file without commenting above line but it didn't worked. The dialog only shows when I comment above line.

Can anybody tell me what is the issue here or any link to the resource where I can get more information about this issue?

Take a look at the App_Start\BundleConfig.cs file included in your project, where all the scripts you are using may already be loaded. You may have created a conflict when adding your js/css in you index.cshtml instead of in the BundleConfig — Nicolas R
– Nicolas R, Commented Aug 26, 2014 at 11:16

Kartikeya Khosla · Accepted Answer · 2014-08-26 11:23:58Z

3

Don't include js/css file on view,just make its bundle(i think js/css files are there in bundleconfig and you are also explicitely including them in view and that is why they js files are conflicting) just render bundles on Layout page with @Scripts.Render("~/bundles/jquery") and then use below code on your view :-

Use @section scripts{ } in .cshtml as :-

 @section scripts{
   <script type="text/javascript">
    $(document).ready(function () {
      $("#open").click(function () {
       $("#dialog").dialog();
     });
   });
   </script>
 }

edited Aug 26, 2014 at 11:23

answered Aug 26, 2014 at 11:17

Kartikeya Khosla

18.9k8 gold badges46 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

MVC 5 with @Scripts.Render("~/bundles/jquery") and JQuery Dialog

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related