我有一个使用 Razor 和 Shared_Layout 文件的 MVC 5 应用程序。他们的布局文件工作正常，包括我的菜单。
我遇到的问题是当我尝试将它与使用 dhtmlxgannt jquery 脚本的页面结合使用时。当我注释掉共享布局时，页面按预期呈现，但页面顶部没有菜单。当我将共享布局保留在文件中时，我的页面不会呈现甘特图，它似乎缩小到一个小容器中，我只能看到一个水平滚动条。
共享布局
<!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>© @DateTime.Now.Year - Mojito</p>
</footer>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>
甘特图 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>
最佳答案
使用布局的想法是避免重复代码， 在甘特图 TableView 中，您只需要正文部分，
如:
<div id="ganntcontainer" style="width: 100%; height: 100%;">
</div>
@section scripts {
//Your scripts here
}
关于javascript - MVC Razor 共享布局页面渲染问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24415334/