.NET MVC第六章、@Html.Partial[ˈpɑːʃl](string name)分布视图

简介: .NET MVC第六章、@Html.Partial[ˈpɑːʃl](string name)分布视图

Partial视图

使用HTML辅助方法 Html.Partial()可以直接引用分部视图


使用Partial需要单独声明一个【视图层】


控制器


public ActionResult Show() {
    return View();
}

partial视图层


@{
    ViewBag.Title = "Show";
}
<h2>作为Partial[ˈpɑːʃl]展示页面</h2>
<hr />
<div>
    <ul class="nav nav-pills">
        <li class="active"><a href="#">首页</a></li>
        <li><a href="#">正文</a></li>
        <li><a href="#">展示</a></li>
        <li><a href="#">资源</a></li>
        <li><a href="#">联系我们</a></li>
    </ul>
</div>
<hr/>

image.png


引入Partial

在主页直接引入Partial(string)即可


@{
    ViewBag.Title = "Index";
}
<h2>引入Partial</h2>
<hr />
@Html.Partial("Show")
<hr/>

image.png


母版页测试

画UI比较麻烦,我就简单处理了一下。


很多时候插入模板的方式还是使用母版页进行处理的。一般使用上下结构/上左右结构这两个类型比较多。我们可以根据具体的需求进行编辑。


在Razor引擎中没有了“母版页”,取而代之的是叫做“布局”的页面(_Layout.cshtml)放在了共享视图文件夹中。在这个页面中,会看到<body>标签里有这样一条语句:


@RenderBody()

其实它的作用和母版页中的<contentplaceholder>服务器控件类似,当创建基于此布局页面的视图时,视图的内容会和布局页面合并,而新创建视图的内容会通过布局页面的@RenderBody()方法呈现在<body>标签之间。


这个方法不需要参数,而且只能出现一次。


RenderPage


从名称可以猜出来这个方法是要呈现一个页面。比如网页中固定的头部可以单独放在一个共享的视图文件中,然后在布局页面中通过这个方法调用,用法如下:


@RenderPage(“~/Views/Shared/_Header.cshtml”)


@RenderBody()


RenderSection


布局页面还有节(Section)的概念,用于单独呈现视图模板中定义的一个节,用法如下:


@RenderPage(“~/Views/Shared/_Header.cshtml”)


@RenderBody()


@RenderSection(“footer”)


当然还要在视图中定义节,否则会出现异常:


@section footer {


   <b>Footer Here</b>


}


为了防止因缺少节而出现异常,可以给RenderSection()提供第2个参数:


@RenderSection(“footer”, false)


MVC 中Html.RenderPartial与Html.RenderAction 和 Html.Partial 区别


Html.Partial是将视图内容直接生成一个字符串并返回


Html.RenderPartial方法是直接输出至当前HttpContext


Html.RenderAction调用一下Action再重新執行一次Controller → Model → View的順序


它们在视图中的使用方式是不同的:


<%Html.RenderPartial("MyPartialView");%>


<%Html.RenderAction("MyPartialView");%>


<%=Html.Partial("MyPartialView")%> (相当于一个字符串)


注意:RenderPartial以<%开头,末尾有分号。而Partial,RenderAction以<%=开头,末尾没有分号。


这里RenderPartial,RenderAction 方法不是返回一个字符串,而是直接输出内容到调用视图模板的输出流中。 方法后使用分号,否则会导致编译器错误。这是因为<% %>代码块是一串代码语句,在C#代码中,需要通过分号标识语句结束。


<!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 - 我的 ASP.NET 应用程序</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div>
        <ul class="nav nav-pills">
            <li class="active"><a href="~/Test/Index">首页</a></li>
            <li><a href="~/Test/Show">正文</a></li>
            <li><a href="#">展示</a></li>
            <li><a href="#">资源</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </div>
    <div class="row">
        <div class="col-lg-2">
            <ul class="nav nav-stacked">
                <li class="active"><a href="~/Test/Index">首页</a></li>
                <li><a href="~/Test/Show">正文</a></li>
                <li><a href="#">展示</a></li>
                <li><a href="#">资源</a></li>
                <li><a href="#">联系我们</a></li>
            </ul>
        </div>
        <div class="col-lg-10">
            @RenderBody()
        </div>
    </div>
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>


image.png

相关文章
|
3月前
|
数据可视化 前端开发
Twaver-HTML5基础学习(39)鹰眼可视化视图组件(OverView)
本文介绍了如何在Twaver-HTML5中使用鹰眼(Overview)可视化视图组件,它作为Network的缩略图,允许用户通过缩略图导航Network,支持单击、双击和框选操作来控制Network视图。
50 5
Twaver-HTML5基础学习(39)鹰眼可视化视图组件(OverView)
|
3月前
Twaver-HTML5基础学习(35)Network中ToolTip显示Chart(视图未成功出现)
本文尝试在Twaver-HTML5的Network组件的ToolTip中显示echarts饼图,但未成功,可能与版本有关。
42 4
Twaver-HTML5基础学习(35)Network中ToolTip显示Chart(视图未成功出现)
|
3月前
|
数据可视化 前端开发 容器
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
本文介绍了如何在Twaver-HTML5中使用列表可视化视图组件(List),展示了如何创建列表、设置列表属性(如行高、间隔颜色等)、实现数据绑定和排序,以及如何通过React代码示例进行操作。
43 2
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
|
3月前
Twaver-HTML5基础学习(30)监听事件_network绘制监听_network视图操作监听_鼠标事件的监听
本文介绍了如何在Twaver-HTML5中监听网络视图操作事件,包括视图绘制、鼠标事件以及获取鼠标下的网元等。
43 1
Twaver-HTML5基础学习(30)监听事件_network绘制监听_network视图操作监听_鼠标事件的监听
|
3月前
|
数据可视化 前端开发
Twaver-HTML5基础学习(25)网元可视化视图组件(Network)
这篇文章介绍了Twaver-HTML5中的网元可视化视图组件(Network)的层次结构,包括view、rootCanvas和topCanvas的使用方法和示例。
42 6
|
3月前
|
移动开发 数据可视化 HTML5
Twaver-HTML5基础学习(40)表格可视化视图组件(Table)
本文介绍了如何在Twaver-HTML5中使用表格可视化视图组件(Table),包括创建表格、定义列对象、实现数据绑定和排序,以及处理表格事件和获取表格数据的方法。
45 1
|
3月前
|
开发框架 前端开发 JavaScript
ASP.NET MVC 教程
ASP.NET 是一个使用 HTML、CSS、JavaScript 和服务器脚本创建网页和网站的开发框架。
46 7
|
3月前
|
存储 开发框架 前端开发
ASP.NET MVC 迅速集成 SignalR
ASP.NET MVC 迅速集成 SignalR
74 0
|
4月前
|
Java 开发工具 Spring
【Azure Spring Cloud】使用azure-spring-boot-starter-storage来上传文件报错: java.net.UnknownHostException: xxxxxxxx.blob.core.windows.net: Name or service not known
【Azure Spring Cloud】使用azure-spring-boot-starter-storage来上传文件报错: java.net.UnknownHostException: xxxxxxxx.blob.core.windows.net: Name or service not known
|
4月前
|
开发框架 前端开发 .NET
ASP.NET MVC WebApi 接口返回 JOSN 日期格式化 date format
ASP.NET MVC WebApi 接口返回 JOSN 日期格式化 date format
55 0