Asp.net MVC 4 Layout -
i new asp.net mvc , programming in general. having issue using layout in asp.net mvc 4. have main layout page. page has jquery , javascript file reference @ bottom above body close tag, , css files in head section below title. have layout, _userlayout, use _layout file. when reference _userlayout file in view, scripts not render. have use script.render on view. why didn't script render when use layout?
the regular layout page:
@using system.web.optimization; @using microsoft.web.mvc; <!doctype html> <html lang="en"> <head> <meta http-equiv="x-ua-compatible" content="ie=edge" /> <title>@viewbag.title</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <link href="~/content/bootstrap-switch.css" rel="stylesheet" /> <link href='https://fonts.googleapis.com/css?family=roboto' rel='stylesheet' type='text/css'> <link href="~/content/bootstrap.css" rel="stylesheet" /> @styles.render("~/content/css") @rendersection("head", required: false) @rendersection("style", false) </head> <body style="padding-top: 50px;" > <div class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar fa fa-user fa-3x">tester</span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="@url.action("index", "home")">home</a> <a class="navbar-brand" href="@url.action("about","home")">about us</a> <a class="navbar-brand" href="@url.action("login","account")">login</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li id="settings-menu" class="dropdown"> <a href="#" id="drop4" role="button" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user fa-3x"></i></a> <ul class="dropdown-menu" role="menu" aria-labelledby="drop4"> </ul> </li> </ul> </div> </div> </div> <div class="container"> <div> @renderbody() </div> <hr> </div> <footer class="navbar navbar-fixed-bottom footer"> <div class="form-group"> <div class="col-md-12"> <div class="form-group row"> <p id="pfooter" class="pull-left">designed example, inc.</p> <p class="pull-right"><a href="@url.action("index", "releasenotes")">1.0.0.0</a></p> </div> </div> </div> </footer> @scripts.render("~/mybundle") <script src="~/scripts/jquery-1.8.2.js"></script> <script src="~/scripts/bootstrap.js"></script> <script src="~/scripts/bootstrap-switch.min.js"></script> @rendersection("scripts", required: false) </body> </html> the _userlayout page
@{ viewbag.title = "list"; layout = "~/views/shared/_layout.cshtml"; } <div class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar fa fa-user fa-3x">tester</span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <button class="navbar-brand" id="edituser">edit</button> <button class="navbar-brand" id="adduser">add user</button> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li id="settings-menu" class="dropdown"> <a href="#" id="drop4" role="button" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user fa-3x"></i></a> <ul class="dropdown-menu" role="menu" aria-labelledby="drop4"> </ul> </li> </ul> </div> </div> </div> <div class="container"> <div> @renderbody() </div> <hr> </div> @rendersection("scripts", required: false) @scripts.render("~/mybundle") this page supposed use _userlayout page. however, had add @scripts.render("~/mybundle") page.
@{ viewbag.title = "list"; layout = "~/views/shared/_userlayout.cshtml"; } <h2>user view</h2> @scripts.render("~/mybundle") <script type="text/javascript"> $('#edituser').on('click', function () { alert('test'); }); </script> am doing wrong here? why did have add @scripts.render("~/mybundle") file though has layout? there have done make sure script references render properly?
you include ~/mybundle multiple times , causing problems. should use scripts section render scripts in views not did. try using following code:
for layout - make bundles of jquery , bootstrap scripts:
@scripts.render("~/bundles/jquery") @scripts.render("~/bundles/bootstrap") @rendersection("scripts", required: false) and in view can call bundle that:
@section scripts{ @scripts.render("~/bundles/mybundle") } your bundles should this:
bundles.add(new scriptbundle("~/bundles/jquery").include("~/scripts/jquery-1.8.2.js")); bundles.add(new scriptbundle("~/bundles/bootstrap").include( "~/scripts/bootstrap.js", "~/scripts/bootstrap-switch.min.js")); bundles.add(new scriptbundle("~/bundles/mybundle").include("~/scripts/yourscript.js")); also note "bootstrap-switch.min.js" - bundles minifies js files on publish won't work minified file. try use full version of bootstrap component , include in bundle showed above.
Comments
Post a Comment