由于 PartialView 对与 @section 的方法是不支持的,因此我们写在 PartialView 里面的内容无法进入到主页中,这就为PartialView 的使用带来了诸多不便,因此我们要采用一种方法来加以实施,为系统使用带来方便。
首先我们要建立一个RunTime.CS文件
public static class HtmlExtensions
{
public static MvcHtmlString Import(this HtmlHelper htmlHelper, string section, string name, Func<object, HelperResult> template)
{
foreach (object key in htmlHelper.ViewContext.HttpContext.Items.Keys)
{
string[] keySection = key.ToString().Split(new char[] { '_' });
if (keySection.Length == 3 && keySection[0] == "von" && keySection[2].Equals(name, StringComparison.OrdinalIgnoreCase))
htmlHelper.ViewContext.HttpContext.Items.Remove(key);
}
htmlHelper.ViewContext.HttpContext.Items["von_" + section.ToLower() + "_IMPORT_" + name.ToLower()] = template;
return MvcHtmlString.Empty;
}
public static IHtmlString RenderImports(this HtmlHelper htmlHelper, string section)
{
string sectionKey = "von_" + section.ToLower() + "_IMPORT_";
foreach (object key in htmlHelper.ViewContext.HttpContext.Items.Keys)
{
if (key.ToString().StartsWith(sectionKey))
{
var template = htmlHelper.ViewContext.HttpContext.Items[key] as Func<object, HelperResult>;
if (template != null)
{
htmlHelper.ViewContext.Writer.Write(template(null));
}
}
}
return MvcHtmlString.Empty;
}
}
这样我们就可以完成引用信息的基础工作了,然后我们写个例子测试一下:
首先修改布局文件 _Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title</title>
@Html.RenderImports("header")
</head>
<body>
@RenderBody()
@Html.RenderImports("footer")
</body>
</html>
关注 一下这两句话,这是放置我们应用内容的地方。
@Html.RenderImports("header")
...
@Html.RenderImports("footer")
然后我们修改 Index.cshtml 文件,这里面增加 PartialView 引用段落
@{
ViewBag.Title = "Home Page";
}
<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>
@Html.ActionLink("应用程序名称", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("主页", "Index", "Home")</li>
<li>@Html.ActionLink("关于", "About", "Home")</li>
<li>@Html.ActionLink("联系方式", "Contact", "Home")</li>
</ul>
@Html.Partial("_LoginPartial")
</div>
</div>
</div>
<div class="container body-content">
<hr />
<div class="jumbotron">
<h1>ASP.NET</h1>
<p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
<p><a href="http://asp.net" class="btn btn-primary btn-lg">Learn more »</a></p>
</div>
<div class="row">
<div class="col-md-4">
<h2>Getting started</h2>
<p>
@Html.Partial("../Test/A")
</p>
<p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301865">Learn more »</a></p>
</div>
<div class="col-md-4">
<h2>Get more libraries</h2>
<p>
@Html.Partial("../Text/B")
</p>
<p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more »</a></p>
</div>
<div class="col-md-4">
<h2>Web Hosting</h2>
<p>
</p>
<p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301867">Learn more »</a></p>
</div>
</div>
<footer>
<p>© @DateTime.Now.Year - 我的 ASP.NET 应用程序</p>
</footer>
</div>
关注这里面的
@Html.Partial("../Test/A")
...
@Html.Partial("../Test/B")
这里面分别引用了两个 PartialView 段落内容,然后我们简单实现这两个 PartialView ,这是 Test/A.cshtml
//Test/A.cdhtml
@{
Layout = null;
}
@Html.Import("header", "A_CSS", @<link rel="stylesheet" type="text/css" href="/content/A.css">)
<div>
<H1>This is Test A</H1>
</div>
@Html.Import("footer", "B_CSS", @<link rel="stylesheet" type="text/css" href="/content/B.css">)
这是Test/B.cshtml
//Test/B.cdhtml
@{
Layout = null;
}
@Html.Import("header", "A_CSS", @<link rel="stylesheet" type="text/css" href="/content/A.css">)
<div>
<H1>This is Test A</H1>
</div>
@Html.Import("footer", "C_CSS", @<link rel="stylesheet" type="text/css" href="/content/C.css">)
Controller的实现我这里就不讲了,关键看执行的结果,哈哈!
<head>
...
<link rel="stylesheet" type="text/css" href="/content/A.css">
</head>
<body>
...
<link rel="stylesheet" type="text/css" href="/content/B.css">
<link rel="stylesheet" type="text/css" href="/content/C.css">
</body>
成功。这样就从更本上解决了 PartialView 引用以及Action中引用的不统一问题。