1. 概述

　　本章内容包括：实现可在不同区域重用的片段、使用Razor模板设计和实现页面、设计可视结构的布局、基于模板页开发。

2. 主要内容

　　2.1 实现可在不同区域重用的片段

　　　　最简单的重用方式就是在设计视图中插入一个局部视图(partial view).

<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />

<script src="~/Scripts/jquery-1.7.1.min.js"></script>

<script src="~/Scripts/jquery-ui-1.8.20.min.js"></script>

<script> 

<header>

    <div class="content-wrapper">

        <div class="float-left">

            <p class="site-title">@Html.ActionLink("your logo", "Index", "Home")</p>

        </div>

        <div class="float-right">

            <section id="login">

                @Html.Partial("_LoginPartial")

            </section>

            <nav>

                <ul id="menu">

                    <li>@Html.ActionLink("Home", "Index", "Home")</li>

                    <li>@Html.ActionLink("About", "About", "Home")</li>

                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>

                </ul>

            </nav>

        </div>

    </div>

</header>

　　　　* 绑定到一个模板的局部试图，如果被放置到绑定了其他模板的视图中，会导致一些问题。

　　2.2 使用Razor模板设计和实现页面

　　　　Razor模板是使用Razor视图引擎的强大功能来创建、维护以及显示页面布局片段的一种方式。

　　　　使用@Html.EditorFor helper方法时可以使用EditorTemplate。

　　　　* @Html.EditorFor(model=>model.Article)

@model MyMVCApplication1.Article

@if (Model != null) {

    @Html.TextBox("", Model.Title)

    @Html.TextBox("", Model.Body)

}

else

{

    @Html.TextBox("", string.Empty)

    @Html.TextBox("",string.Empty)

}

　　2.3 设计可视结构的布局

　　　　一般来说，一个网页或者一个MVC程序页面都包含一个header区域、一个menu区域、一个内容区域、一个footer区域。

<!DOCTYPE HTML>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <title>Application Title Name</title>

    </head>

    <body>

        <header>

            <nav>

                <ul>

                     <li>Your menu</li>

                </ul>

            </nav>

        </header>

        <section>

            <article>

                <header>

                    <h2>Article title</h2>

                    <p>Posted on <time datetime="2013-09-04T16:31:24+02:00">

                         September 4th 2013</time> by

                       <a href="#">Writer</a> - <a href="#comments">6 comments</a>

                    </p>

                 </header>

                 <p>This is a sample text. This is a sample Text.</p>

            </article>

        </section>

                <aside>

            <h2>About section</h2>

            <p>This is a sample text</p>

        </aside>

        <footer>

            <p>Copyright information</p>

        </footer>

    </body>

</html>

　　2.4 基于模板页开发

　　　　MVC web程序的UI都是基于模板页布局的。也可以在代码中切换到其他模板页。

@if (ViewBag.Switch = "Layout1")

{

    Layout = "~/Views/Shared/_plainLayout.cshtml";

}

else

{

    Layout = "~/Views/Shared/_Layout.cshtml";

}

3. 总结

　　① 局部试图是在多页面间重用的一种方式。类似ASP.NET中的用户控件。局部试图一般放在 Views/Shared文件夹中。

　　② 使用Razor视图引擎可以创建可重用的模板。这些模板一般存放到~Views/Shared/EditorTemplates 或者~Views/ControllerName/EditorTemplates中。

　　    通过 @Html.EditorFor 和 @Html.DisplayFor来调用。

　　③ 应当尽可能的重用视图。如果视图使用不同的模型和控制器，还需要自己实现验证操作。

　　④ 模板页可以通过代码来切换。

第十章 设计用户界面 之 构建UI布局的更多相关文章

  1. 第十章 Odoo 12开发之后台视图 - 设计用户界面

    本文将学习如何为用户创建图形化界面来与图书应用交互.我们将了解不同视图类型和小组件(widgets)之间的差别,以及如何使用它们来提供更优的用户体验. 本文主要内容有: 菜单项 窗口操作(Window ...

  2. 移动UI布局设计原则(一)

    学习笔记1 Learning notes one 移动UI布局设计的布局原则 Layout Principles of Mobile UI Layout Design 移动UI视觉交互设计法则 Des ...

  3. iOS开发～UI布局（二）storyboard中autolayout和size class的使用详解

    一.概要:前一篇初步的描述了size class的概念,那么实际中如何使用呢,下面两个问题是我们一定会遇到的: 1.Xcode6中增加了size class,在storyboard中如何使用? 2.a ...

  4. iOS开发～UI布局（一）初探Size Class

    随着iOS8系统的发布,一个全新的页面UI布局概念出现,这个新特性将颠覆包括iOS7及之前版本的UI布局方式,这个新特性就是Size Class.Size Class配合Auto Layout可以解决 ...

  5. 如果选择构建ui界面方式，手写代码，xib和StoryBoard间的博弈

    代码手写UI这种方法经常被学院派的极客或者依赖多人合作的大型项目大规模使用. 大型多人合作项目使用代码构建UI,主要是看中纯代码在版本管理时的优势,检查追踪改动以及进行代码合并相对容易一些. 另外,代 ...

  6. iOS UI布局调试工具

    查看ios软件的ui布局有三种: 1.DCIntrospect    这种方式是开源的,我从github上clone下来后运行demo,运行遇到了问题:Xcode cannot run using t ...

  7. iOS8开发～UI布局（二）storyboard中autolayout和size class的使用具体解释

    一.概要:前一篇初步的描写叙述了size class的概念,那么实际中怎样使用呢,以下两个问题是我们一定会遇到的: 1.Xcode6中添加了size class,在storyboard中怎样使用? 2 ...

  8. iOS 8 UI布局 AutoLayout及SizeClass(二)

    一.新特性Size Class介绍 随着iOS8系统的公布,一个全新的页面UI布局概念出现,这个新特性将颠覆包含iOS7及之前版本号的UI布局方式,这个新特性就是Size Class. Size Cl ...

  9. 使用Apache Tiles3.x构建界面布局

    Tiles是一个免费的开源模板Java应用程序的框架.基于复合模式简化的用户界面的构建.对于复杂的网站仍是最简单.最优雅的方式与任何MVC技术一起工作.Struts2对Tiles提供了支持,如今Til ...

随机推荐

  1. 解决Exception：Could not open Hibernate Session for transaction; nested exception is java.lang.NoClassDefFoundError: org/hibernate/engine/transaction/spi/TransactionContext

    原因是配置文件中 <bean id="transactionManager" class="org.springframework.orm.hibernate4.H ...

  2. C++之运算符重载（前置++和后置++）

    今天在阅读<google c++ 编程风格>的文档的时候,5.10. 前置自增和自减:有一句话引起了我的注意: 对于迭代器和其他模板对象使用前缀形式 (++i) 的自增, 自减运算符.,理 ...

  3. PYTHON 异常处理 二 TRY 模块

    异常处理 捕捉异常可以使用try/except语句. try/except语句用来检测try语句块中的错误,从而让except语句捕获异常信息并处理. 如果你不想在异常发生时结束你的程序,只需在try ...

  4. ABP 框架启程 及 ABP 翻译目录及传送门

    准备动手写一套电商的系统,辗转收集了不少相关的开源项目,最后决定使用ABP作为起点. 在园子里好多人都在推广ABP.有个园友做了一个集合贴,方便大家使用  ABP集合贴 建议大家优先看 HK Zhan ...

  5. Spark Streaming之二：StreamingContext解析

    1.1 创建StreamingContext对象 1.1.1通过SparkContext创建 源码如下: def this(sparkContext: SparkContext, batchDurat ...

  6. Docker运行MongoDB及Redis及ssh端口映射远程连接

    Docker运行MongoDB及Redis及ssh端口映射远程连接 本节内容简介 在本实验里我们将通过完成 MongoDB 和 Redis 两个容器来学习Dockerfile及Docker的运行机制. ...

  7. C语言指针入门知识

    C语言指针往往是C语言学习过程中最困难的地方, 最近重新理解了一下C语言的指针知识, 在此整理一下, 如果有错误请留言指正. 对于刚入门的人来说, 指针涉及方方面面, 从简单的数组到结构体, 都会用到 ...

  8. [hdu2243]考研路茫茫——单词情结(AC自动机+矩阵快速幂)

    题意:长度不超过L,只由小写字母组成的,至少包含一个词根的单词,一共可能有多少个. 解题关键:利用补集转化的思想,先求一个词根也不包含的单词个数,然后用总的减去即可.长度不超过L需要用矩阵维数增加一倍 ...

  9. windows设置远程连接

    两台windows机器: 1台用于开放远程连接,供其他机器连接(通常指服务器) 1台用于连接到那台机器(通常指的客户机) 一.服务器配置 1.设置开放远程连接 2.开放端口(其中windows远程桌面 ...

  10. 20个Flutter实例视频教程-第08节: 保持页面状态

    博客地址: https://jspang.com/post/flutterDemo.html#toc-bb9 视频地址: https://www.bilibili.com/video/av397092 ...