如何在PartialView中添加自己的引用信息

由于 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 &raquo;</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 &raquo;</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 &raquo;</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 &raquo;</a></p>
        </div>
    </div>
    <footer>
        <p>&copy; @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中引用的不统一问题。

转载于:https://my.oschina.net/u/2308182/blog/666032

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值