Javascript MVC Razor共享布局页面呈现问题_Javascript_Jquery_Html_Css_Razor

Javascript MVC Razor共享布局页面呈现问题

javascript jquery html css razor

Javascript MVC Razor共享布局页面呈现问题,javascript,jquery,html,css,razor,Javascript,Jquery,Html,Css,Razor,我有一个MVC5应用程序，它使用Razor和一个共享的_布局文件。他们的布局文件工作良好，包括我的菜单我遇到的问题是，当我尝试将它与使用dhtmlxgannt jquery脚本的页面结合使用时。当我注释掉共享布局时，页面呈现出我所期望的效果，但在页面顶部没有菜单。当我将共享布局留在文件中时，我的页面不会呈现gannt图表，它似乎缩小到一个小容器中，我所能看到的只是一个水平滚动条共享布局 <!DOCTYPE html> <html> <head> &

我有一个MVC5应用程序，它使用Razor和一个共享的_布局文件。他们的布局文件工作良好，包括我的菜单

我遇到的问题是，当我尝试将它与使用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>


@取景袋。标题-莫吉托
@style.Render（“~/Content/css”）
@Scripts.Render（“~/bundles/modernizer”）
html，正文{
身高：100%；
填充：0px；
利润率：40像素；
溢出：隐藏；
}

@ActionLink（“Mojito”、“Index”、“Home”、新的{area=”“}、新的{@class=“navbar brand”}）
@ActionLink（“主页”、“索引”、“主页”）
@ActionLink（“关于”、“关于”、“主页”）
@ActionLink（“联系人”、“联系人”、“主页”）

@if（HttpContext.Current.User.Identity.IsAuthenticated）
{

@ActionLink（“客户”、“索引”、“客户”，新的{area=“Customers”}，空）


@ActionLink（“Projects”、“Index”、“ProjectTasks”，new{area=“Project”}，null）
@ActionLink（“Gannt图表”、“Gannt”、“ProjectTasks”，new{area=“Project”}，null）
@ActionLink（“Gannt图表”、“索引”、“GantTasks”，新的{area=“Project”}，空）




@ActionLink（“支付代码”、“索引”、“KronosPayCodes”，new{area=“Kronos”}，null）
@ActionLink（“从Excel导入”、“索引”、“KronosImportData”、新的{area=“Kronos”}，null）
@ActionLink（“从Xml导入”、“索引”、“KronosXmlConfiguration”，new{area=“Kronos”}，null）
@ActionLink（“创建设计文档”、“索引”、“KronosDesignDocument”，new{area=“Kronos”}，null）



}
@Html.Partial（“_LoginPartial”）
@RenderBody（）

&抄袭@DateTime.Now.Year-莫吉托
@Scripts.Render（“~/bundles/jquery”）
@Scripts.Render（“~/bundles/bootstrap”）
@RenderSection（“脚本”，必需：false）

Gannt图表视图

<!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>


@模型IEnumerable
@{
ViewBag.Title=“Index”；
//Layout=“~/Views/Shared/_Layout.cshtml”；
}
html，正文{
身高：100%；
填充：0px；
利润率：40像素；
溢出：隐藏}
消息（“尝试将任务移动或调整大小到非工作时间”）；
gantt.config.work\u time=true；
gantt.config.correct\u work\u time=true；
gantt.config.scale_unit=“天”；
gantt.config.date_scale=“%D，%D”；
gantt.config.min\u列宽度=60；
gantt.config.duration_unit=“天”；
甘特图.config.scale_height=20*3；
gantt.config.row_height=30；
var weekScaleTemplate=函数（日期）{
var dateToStr=gantt.date.date_至_str（“%d%M”）；
var weekNum=gantt.date.date_到_str（“（周%W）”）；
var endDate=gantt.date.add（gantt.date.add（日期，1，“周”），-1，“天”）；
返回日期为TR（日期）+“-”+dateToStr（结束日期）+“+weekNum（日期）；
};
甘特图.config.subscales=[
{单位：“月”，步骤：1，日期：“%F，%Y”}，
{单位：“周”，步骤：1，模板：weekScaleTemplate}
];
gantt.templates.task\u cell\u class=函数（任务，日期）{
如果（！gantt.isWorkTime（日期））
返回“周末”；
返回“”；
};
gantt.init（“ganntcontainer”）；
甘特图解析（演示任务）；

使用布局的想法是避免重复代码，在甘特图视图中，您只需要主体部分

例如：


@节脚本{
//你的脚本在这里
}

是的，但我不想让gannt脚本在我的布局页面上运行，因为应用程序中的每个页面都会使用gannt脚本，而gannt图表页面上的脚本是特定于该页面的。我也只是尝试了一下，看看它是否能正确渲染，但它并没有解决问题。

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