gpt4 book ai didi

asp.net-mvc - 布局和不同的内容和风格,复杂的MVC4应用程序

转载 作者:行者123 更新时间:2023-12-02 02:03:48 24 4
gpt4 key购买 nike

我查看了很多教程,从 web-forms.master 与 MVC Master 布局转向。

我遇到的问题是关于嵌入的全局文件与单个页面自己的文件。

(文件=样式和脚本)

在我的观点中,我已经实现了一些命名约定/规则,以便布局大师有一个 LO 后缀,因此,如果我的应用程序名为“SAdmin”,那么我的布局(master)-chtml 将被命名为:_SAdminLO.cshtml

在我的布局大师中我有:

(为简单起见)只是一个主栏 - 链接(以便所有页面都有“链接”顶栏)

这是主要布局

   [textlink1] | [textlink2] | [textlink3] | [textlink4] ....

然后我有索引页面(它的名称是cpanel)

在我的索引cpanel.chtml中,除了主布局的文本栏之外,我还添加了图标...以以下形式复制顶部栏图标菜单

  [IMG]           [IMG]
page_name page_name

[IMG] [IMG]
page_name page_name

所以一起布局大师_SAdminLO.cshtml + cpanel.chtml - 来 self 的应用程序的“主页”

现在我有单独的页面,它们的操作完全独立

但他们需要的只是顶部栏的 css + html,而不是 cpanel (索引)

所以我的情况是:在右键->查看源代码中,我可以看到我的所有页面都有双 html 标签 -

<html> + <head> + <body> markup of `LO`

&

<html> + <head> + <body> markup of `individual.cshtml `

文件:

-大师-

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />

<link href='@Href("~/Content/css/GlobUtils.css")' rel='stylesheet' type='text/css' />

<title>@ViewBag.Title</title>
@Scripts.Render("~/js")// C# bundle

@RenderSection("head", false)
</head>
<body id="bodid">
<h2>Cpanel</h2>



<div id="navbar">

<ul id="nav">

<div class="menu-main-container">
<ul id="menu-main" class="menu">
<li id="menu-item-0" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-0 current_page_item menu-item-0">
@Html.ActionLink("Cpanel", "Cpanel", "ControlPanel")
</li>
<li id="menu-item-1" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-1 current_page_item menu-item-1">
@Html.ActionLink("Templates Generator", "TemplateGenerator", "ControlPanel")
</li>
<li id="menu-item-2" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-2">
@Html.ActionLink("Content Editor", "ContentEditor", "ControlPanel")
</li>
<li id="menu-item-3" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-3 current_page_item menu-item-2">
@Html.ActionLink("Files Uploader", "FilesUploader", "ControlPanel")
</li>
<li id="menu-item-4" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-4 current_page_item menu-item-2">
@Html.ActionLink("Code Dev", "CodeDev", "ControlPanel")
</li>

</ul>
</div>
</ul>

</div>
@RenderBody()

</body>
</html>

someindividualpage.chtml

@{
Layout = "~/Views/Shared/_EvProAdminLO.cshtml";
}
@model MvcE.Models.IndexModel.CreatedTemplateJPacket

<!DOCTYPE html>
@{
ViewBag.Title = "TemplateGenerator";
}
<html>
<head>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Template Generator</title>

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />


<script src="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<link href='@Href("~/Content/css/Chrm_TemplateGenerator.css")' rel="stylesheet" type="text/css" />


</head>
<body id="bodid">
<div id="DivEditor">
<h1 id="ContH"> ControlPanel - TemplateGenerator</h1>
<div class="container-fluid">



<div>
<a class="btn btn-CtrlsTmplt" id="save" href="#">save</a>
<a class="btn btn-CtrlsTmplt" id="load" href="#">load</a>
<a class="btn btn-CtrlsTmplt" id="clear" href="#">clear</a>
<input type="text" id="scr1" class="input_Border_AndBGClear" />
</div>



<hr/>
@*----------------------------------localData-------------------------------------*@
<div id="localData">

<input id="DataValue_FormFileds" type="hidden" />
</div>
</div>


</div>


<div id="SaveNewTmpltWwrap">

</div>



<script src='@Href("~/Js/jspart2.js")' type="text/javascript"></script>

</body>

最佳答案

也许我不太明白,但似乎你可以使用自定义部分。

_布局

<html>
<head>
<title>@ViewBag.Title</title>
@* common script, css *@
<script src="jquery.js"></script>

@* variable script, css *@
@RenderSection("customHead", required: false)
</head>

<body>
<!-- nav bar here -->
@RenderBody()

@RenderSection("footer", required: false)
</body>
</html>

SomePage.cshtml

@{
Layout = "~/Views/Shared/_EvProAdminLO.cshtml";
ViewBag.Title = "Some Page 1";
}

@section customHead {
<script src="page1.js"></script>
}

@* no <html>,<head>,<body> *@

@* inserted into RenderBody() *@
<div id="page1content">
...
</div>

因为该部分声明为 required: false ,除非 View 包含该部分,否则它不会尝试渲染任何内容。

您可以更改每页的部分内容。

SomePage2.cshtml

@{
Layout = "~/Views/Shared/_EvProAdminLO.cshtml";
ViewBag.Title = "Some Page 2";
}

@section customHead {
<script src="page2.js"></script>
}

@section footer {
<div>footer</div>
}

<div id="page2content">
</div>

除了使用多个布局之外,您还可以使用部分 View 和子操作来进行可变内容渲染。

SomePage3.cshtml

@{
Layout = "~/Views/Shared/_Layout.cshtml";
ViewBag.Title = "Some Page 3";
}

@Html.Partial("widget")
@{Html.RenderAction("UserInfo");}

现在,大部分布局内容已被删除,并且变成了内容包含,而不是使用排除规则定义所有内容。

我发现布局页面更少,并且使用部分更易于维护,并且通过仅查看 View 页面,页面更容易理解将呈现的内容。

关于asp.net-mvc - 布局和不同的内容和风格,复杂的MVC4应用程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36224947/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com