Question

我有一个使用Razor和Shared_Layout文件的MVC 5应用程序。他们的布局文件工作正常，包括我的菜单。

我遇到的问题是当我尝试将它与使用dhtmlxgannt jquery脚本的页面结合使用时。当我注释掉共享布局时，页面会按照我的预期呈现，但我的页面顶部没有菜单。当我将共享布局留在文件中时，我的页面无法呈现gannt图表似乎缩小为一个小容器，我只能看到一个水平滚动条。

共享布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Mojito</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

    <style type="text/css">
        html, body {
            height: 100%;
            padding: 0px;
            margin: 40px;
            overflow: hidden;
        }
    </style>

</head>
<body>
    <div class="navbar navbar-inverse 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"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li>@Html.ActionLink("Mojito", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })</li>
                        <li>@Html.ActionLink("Home", "Index", "Home")</li>
                        <li>@Html.ActionLink("About", "About", "Home")</li>
                        <li>@Html.ActionLink("Contact", "Contact", "Home")</li>

                    </ul>
                    @if (HttpContext.Current.User.Identity.IsAuthenticated)
                    {
                        <ul class="nav navbar-nav">
                            <li>@Html.ActionLink("Customers", "Index", "Customers", new { area = "Customers" }, null)</li>

                            <li class="dropdown">
                                <a class="dropdown-toggle" data-toggle="dropdown" href="#">Projects<b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li>@Html.ActionLink("Projects", "Index", "ProjectTasks", new { area = "Project" }, null)</li>
                                    <li>@Html.ActionLink("Gannt Chart", "Gannt", "ProjectTasks", new { area = "Project" }, null)</li>
                                    <li>@Html.ActionLink("Gannt Chart", "Index", "GanttTasks", new { area = "Project" }, null)</li>
                                </ul>
                            </li>
                            <li class="dropdown">
                                <a class="dropdown-toggle" data-toggle="dropdown" href="#">Kronos<b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li>@Html.ActionLink("Pay Codes", "Index", "KronosPayCodes", new { area = "Kronos" }, null)</li>
                                    <li>@Html.ActionLink("Import From Excel", "Index", "KronosImportData", new { area = "Kronos" }, null)</li>
                                    <li>@Html.ActionLink("Import From Xml", "Index", "KronosXmlConfiguration", new { area = "Kronos" }, null)</li>
                                    <li>@Html.ActionLink("Create Design Document", "Index", "KronosDesignDocument", new { area = "Kronos" }, null)</li>
                                </ul>
                            </li>
                        </ul>
                    }
                    @Html.Partial("_LoginPartial")

                </div>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - Mojito</p>
        </footer>
    </div>

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

</body>
</html>

Gannt Chart View

<!DOCTYPE html>
<html>
@model IEnumerable<Mojito.Domain.Entities.GanttTask>
@{
    ViewBag.Title = "Index";
    //Layout = "~/Views/Shared/_Layout.cshtml";
}


<head>
    <title></title>
    <script src="~/Scripts/dhtmlxgantt/dhtmlxgantt.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" href="~/Content/dhtmlxgantt/dhtmlxgantt.css" type="text/css" />
    <script type="text/javascript" src="~/Scripts/Dhtmlxgannt/CodeBase/testdata.js"></script>
    <style type="text/css">
        html, body {
            height: 100%;
            padding: 0px;
            margin: 40px;
            overflow: hidden}
    </style>

</head>
<body>
   <div id="ganntcontainer" style="width: 100%; height: 100%;">
        <script type="text/javascript">

    dhtmlx.message("Try to move or resize task to not working time");

    gantt.config.work_time = true;
    gantt.config.correct_work_time = true;

    gantt.config.scale_unit = "day";
    gantt.config.date_scale = "%D, %d";
    gantt.config.min_column_width = 60;
    gantt.config.duration_unit = "day";
    gantt.config.scale_height = 20 * 3;
    gantt.config.row_height = 30;



    var weekScaleTemplate = function (date) {
        var dateToStr = gantt.date.date_to_str("%d %M");
        var weekNum = gantt.date.date_to_str("(week %W)");
        var endDate = gantt.date.add(gantt.date.add(date, 1, "week"), -1, "day");
        return dateToStr(date) + " - " + dateToStr(endDate) + " " + weekNum(date);
    };

    gantt.config.subscales = [
        { unit: "month", step: 1, date: "%F, %Y" },
        { unit: "week", step: 1, template: weekScaleTemplate }

    ];

    gantt.templates.task_cell_class = function (task, date) {
        if (!gantt.isWorkTime(date))
            return "week_end";
        return "";
    };

    gantt.init("ganntcontainer");
    gantt.parse(demo_tasks);
        </script>

    </div>


</body>
</html>

Answer 1

使用Layouts的想法是避免重复代码，在甘特图表视图中，您只需要正文部分

EG：

<div id="ganntcontainer" style="width: 100%; height: 100%;">
</div>
@section scripts {
//Your scripts here
}

Answer 2

尝试使用部分。我在这里有一个类似的答案 -

https://stackoverflow.com/revisions/24182922/1

MVC Razor共享布局页面渲染问题

2 个答案: