1. 概述

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

2. 主要内容

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

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

  1. <link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
  2. <script src="~/Scripts/jquery-1.7.1.min.js"></script>
  3. <script src="~/Scripts/jquery-ui-1.8.20.min.js"></script>
  4. <script> 
  5.  
  6. <header>
  7.     <div class="content-wrapper">
  8.         <div class="float-left">
  9.             <p class="site-title">@Html.ActionLink("your logo", "Index", "Home")</p>
  10.         </div>
  11.         <div class="float-right">
  12.             <section id="login">
  13.                 @Html.Partial("_LoginPartial")
  14.             </section>
  15.             <nav>
  16.                 <ul id="menu">
  17.                     <li>@Html.ActionLink("Home", "Index", "Home")</li>
  18.                     <li>@Html.ActionLink("About", "About", "Home")</li>
  19.                     <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
  20.                 </ul>
  21.             </nav>
  22.         </div>
  23.     </div>
  24. </header>

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

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

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

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

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

  1. @model MyMVCApplication1.Article
  2. @if (Model != null) {
  3.     @Html.TextBox("", Model.Title)
  4.     @Html.TextBox("", Model.Body)
  5. }
  6. else
  7. {
  8.     @Html.TextBox("", string.Empty)
  9.     @Html.TextBox("",string.Empty)
  10. }

　　2.3 设计可视结构的布局

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

  1. <!DOCTYPE HTML>
  2. <html>
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5.         <title>Application Title Name</title>
  6.     </head>
  7.     <body>
  8.         <header>
  9.             <nav>
  10.                 <ul>
  11.                      <li>Your menu</li>
  12.                 </ul>
  13.             </nav>
  14.         </header>
  15.         <section>
  16.             <article>
  17.                 <header>
  18.                     <h2>Article title</h2>
  19.                     <p>Posted on <time datetime="2013-09-04T16:31:24+02:00">
  20.                          September 4th 2013</time> by
  21.                        <a href="#">Writer</a> - <a href="#comments">6 comments</a>
  22.                     </p>
  23.                  </header>
  24.                  <p>This is a sample text. This is a sample Text.</p>
  25.             </article>
  26.         </section>
  27.                 <aside>
  28.             <h2>About section</h2>
  29.             <p>This is a sample text</p>
  30.         </aside>
  31.         <footer>
  32.             <p>Copyright information</p>
  33.         </footer>
  34.     </body>
  35. </html>

　　2.4 基于模板页开发

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

  1. @if (ViewBag.Switch = "Layout1")
  2. {
  3.     Layout = "~/Views/Shared/_plainLayout.cshtml";
  4. }
  5. else
  6. {
  7.     Layout = "~/Views/Shared/_Layout.cshtml";
  8. }

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. 【Codeforces】879D. Teams Formation 思维+模拟

    题意 给定$n$个数,重复拼接$m$次,相邻$k$个重复的可消除,问最后序列中有多少个数 首先可以发现当$k>=n$时,如果要使$n$个数可以被消除,那么$n$个数必须一样,否则$n$个数不能被 ...

  2. 「LOJ#10015」「一本通 1.2 练习 2」扩散（并查集

    题目描述 一个点每过一个单位时间就会向 444 个方向扩散一个距离,如图所示:两个点 a .b 连通,记作 e(a,b),当且仅当 a .b的扩散区域有公共部分.连通块的定义是块内的任意两个点 u.v ...

  3. 洛谷 P1509 找啊找啊找GF（复习二维费用背包）

    传送门 题目背景 "找啊找啊找GF,找到一个好GF,吃顿饭啊拉拉手,你是我的好GF.再见." "诶,别再见啊..." 七夕...七夕...七夕这个日子,对于sq ...

  4. Batch Normalization层

    Batch Normalization的加速作用体现在两个方面:一是归一化了每层和每维度的scale,所以可以整体使用一个较高的学习率,而不必像以前那样迁就小scale的维度:二是归一化后使得更多的权 ...

  5. Win32编程点滴3 - 简单ActiveX控件的使用

    虽然这里一片的.net气氛,到处充斥着像MVC.WPF.WorkFlow.LINQ等各种niubility的术语.但我们使用的Windows还是由COM技术主宰着:我们在选择日常使用的软件时,也会避免 ...

  6. Android四种启动模式

    四种启动模式 standard(默认) singleTop singleTast singleInstance standard(默认) 系统默认的启动模式. Android是使用返回栈来管理活动的, ...

  7. 性能测试之Jmeter学习（四）

    本节主要讲解:如何创建Web测试计划 如何创建一个简单的测试计划,用于测试web站点? 1.明确测试需求:我们会模拟5个并发用户,对Jakarta Web站点的网个页面进行访问,另外每个并发用户都会运 ...

  8. Java编程环境eclipse配置

    一. 下载并安装JDK https://www.cnblogs.com/zhangchao0515/p/6806408.html 二.下载并解压Eclipse https://www.cnblogs. ...

  9. HDU - 2181 哈密顿绕行世界问题 dfs图的遍历

    哈密顿绕行世界问题 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total S ...

  10. 洛谷 - P1072 Hankson - 的趣味题 - 质因数分解

    https://www.luogu.org/problemnew/show/P1072 一开始看了一看居然还想放弃了的. 把 \(x,a_0,a_1,b_0,b_1\) 质因数分解. 例如 \(x=p ...