Asp.net MVC 4 布局答案

【问题标题】：Asp.net MVC 4 LayoutAsp.net MVC 4 布局
【发布时间】：2015-09-30 15:12:31
【问题描述】：

我对 Asp.net MVC 和一般编程相当陌生。我在 Asp.Net MVC 4 中使用布局时遇到问题。我有一个主布局页面。此页面在 body 关闭标记上方的底部有所有 jquery 和 javascript 文件引用，在标题下方的 head 部分有 css 文件。我有另一个布局，_UserLayout，它使用 _Layout 文件。当我在视图中引用 _UserLayout 文件时，脚本不会呈现。我还必须在视图上使用 script.render。为什么我使用布局时脚本没有渲染？

常规布局页面：

@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")，即使它有布局？我可以做些什么来确保脚本引用正确呈现吗？

【问题讨论】：

标签： asp.net asp.net-mvc-4 layout

【解决方案1】：

您多次包含 ~/MyBundle，这会导致问题。此外，您应该使用 Scripts 部分在您的视图中呈现脚本，而不是像您所做的那样。尝试使用以下代码：

对于布局 - 为所有 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"));

还只是关于“bootstrap-switch.min.js”的注释 - 捆绑会在发布时缩小 js 文件，因此这不适用于已经缩小的文件。尝试使用此引导组件的完整版本，并将其包含在我上面向您展示的捆绑包中。

【讨论】：