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佈局

回答

相關問題