Asp.net mvc 布局和不同的内容和样式,复杂的MVC4应用程序
我看了很多教程,从Asp.net mvc 布局和不同的内容和样式,复杂的MVC4应用程序,asp.net-mvc,asp.net-mvc-4,master-pages,partial-views,Asp.net Mvc,Asp.net Mvc 4,Master Pages,Partial Views,我看了很多教程,从webforms和.master到MVC主布局 我的问题是关于嵌入的全局文件与单个页面自己的文件 (文件=样式和脚本) 旁注:在我的视图中,我实现了一个小小的命名约定/规则,这样布局主机就有了一个LOpostfix, 因此,如果我的应用程序名为“SAdmin”,那么我的布局(主)-chtml将命名为:_SAdminLO.cshtml 在我的布局母版中,我有: (为了简单起见)只有一个主栏-链接(这样所有页面都有“链接”顶栏) 这是主要布局 [textlink1] | [t
webforms
和.master
到MVC主布局
我的问题是关于嵌入的全局文件与单个页面自己的文件
(文件=样式和脚本)
旁注:在我的视图中,我实现了一个小小的命名约定/规则,这样布局主机就有了一个LO
postfix,
因此,如果我的应用程序名为“SAdmin”,那么我的布局(主)-chtml将命名为:_SAdminLO.cshtml
在我的布局母版中,我有:
(为了简单起见)只有一个主栏-链接(这样所有页面都有“链接”顶栏)
这是主要布局
[textlink1] | [textlink2] | [textlink3] | [textlink4] ....
然后我有了索引页(它的名字是cpanel)
在我的索引cpanel.chtml
中,除了主布局的文本栏之外,我还添加了图标。。。以以下形式复制顶栏:
图标菜单
[IMG] [IMG]
page_name page_name
[IMG] [IMG]
page_name page_name
因此,Layout master\u SAdminLO.cshtml
+cpanel.chtml
-从我的应用程序的“主页”开始
现在我有了独立的页面,它们的行为是完全独立的
但他们所需要的只是顶部栏的css+html,而不是cpanel
(索引)
所以我的情况是:
在右键单击->查看源代码中,我可以看到我的所有页面都有两个html标记-
<html> + <head> + <body> markup of `LO`
++LO的标记`
&
++标记`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>
@视图包。标题
@Scripts.Render(“~/js”)//C#bundle
@渲染部分(“头部”,假)
控制面板
@RenderBody()
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>
@{
Layout=“~/Views/Shared/_EvProAdminLO.cshtml”;
}
@模型MvcE.Models.IndexModel.CreatedTemplateJPacket
@{
ViewBag.Title=“TemplateGenerator”;
}
模板生成器
控制面板-模板生成器
@*----------------------------------本地数据-------------------------------------*@
也许我不太理解,但您似乎可以使用自定义部分 \u布局
<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>
您还可以使用局部视图和子操作来进行可变内容呈现,而不是使用多个布局
SomePage3.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>
@{
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>
@{
Layout = "~/Views/Shared/_Layout.cshtml";
ViewBag.Title = "Some Page 3";
}
@Html.Partial("widget")
@{Html.RenderAction("UserInfo");}
现在,大部分版面内容被删除,变成了内容包含,而不是使用排除规则定义所有内容
我发现更少的布局页面,使用部分更易于维护,而且只查看视图页面更容易理解页面将呈现什么。您有了双
,因为布局页面和主视图页面都有标签。将其从视图页面中删除,然后将可变标题内容包含在自定义(非必需)部分@section myCustomSection{…}
@Jasen此“individual.cshtml”视图需要它自己的css+js调用,individual2也有。。。主布局+索引部分有自己的,如果你可以发布一个只包含框架的代码Layoutfile
+这是索引
灵魂伴侣局部视图
&另一个individualX.cshtml
,你可以简单地从其他页面移除头部和身体标签,而不是从布局中,并使用部分加载自己的css和js文件检查此项以了解如何操作在mvc中使用部分,谢谢,现在我看到了整个画面@section customHead
调用@RenderSection(“customHead”,必填项:false)
但是w8..这非常适合某个页面
另一个页面呢,它是自己的头+脚本可能我需要类似的链接。。。看起来杀伤力太大了。。。或者在你的基础上再加一点就可以了?嵌套主控布局链接[与嵌套布局相比,我更喜欢局部视图和子操作。我发现更难理解多个复杂布局页面将呈现什么。局部视图和子操作使我能够处理单个页面,并轻松查看它将输出什么,而无需切换回各种布局。非常感谢Jasen…的编辑。现在正是时候
@{
Layout = "~/Views/Shared/_Layout.cshtml";
ViewBag.Title = "Some Page 3";
}
@Html.Partial("widget")
@{Html.RenderAction("UserInfo");}