Asp.net MVC 4布局

我是相当新的Asp.net MVC和一般编程。我有一个在Asp.Net MVC 4中使用布局的问题。我有一个主布局页面。此页面的所有jquery和JavaScript文件引用位于主体关闭标记上方的底部，以及标题下方头部的css文件。我有另一个布局，_UserLayout，使用_Layout文件。当我在视图中引用_UserLayout文件时，脚本不会呈现。我还必须在视图上使用script.render。为什么在使用布局时没有渲染脚本？Asp.net MVC 4布局

常规布局页：

@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 By 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>

的_UserLayout页

@{ 
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")

本页面应该使用_UserLayout页面。但是，我必须将@Scripts.Render("~/MyBundle")添加到页面。

@{ 
    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>

我在这里做错了什么？为什么我必须将@Scripts.Render("~/MyBundle")添加到文件中，即使它具有布局？有没有什么我可以做的，以确保脚本引用渲染正确？

来源

2015-09-30 Jean B

您包含〜/ MyBundle多次，这是导致问题。你也应该使用脚本部分在你的视图中渲染脚本，而不是像你一样。请尝试使用下面的代码：

对于布局 - 挣大钱所有jQuery和引导脚本：

@Scripts.Render("~/bundles/jquery") 
@Scripts.Render("~/bundles/bootstrap") 
@RenderSection("Scripts", required: false)

然后在你看来，你可以打电话给你的包那样：

@section Scripts{ 
    @Scripts.Render("~/bundles/MyBundle") 
}

你的包看起来应该是这样的：

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"));

也只是一个不e关于“bootstrap-switch.min.js” - bundle在发布时缩小了js文件，所以这不适用于已经缩小的文件。尝试使用该引导程序组件的完整版本，并将其包含在上面显示的包中。

来源

2015-09-30 07:12:31 dlght

谢谢@dght –

Asp.net MVC 4布局

回答

相关问题