第十章 设计用户界面 之 构建UI布局
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布局的更多相关文章
- 第十章 Odoo 12开发之后台视图 - 设计用户界面
本文将学习如何为用户创建图形化界面来与图书应用交互.我们将了解不同视图类型和小组件(widgets)之间的差别,以及如何使用它们来提供更优的用户体验. 本文主要内容有: 菜单项 窗口操作(Window ...
- 移动UI布局设计原则(一)
学习笔记1 Learning notes one 移动UI布局设计的布局原则 Layout Principles of Mobile UI Layout Design 移动UI视觉交互设计法则 Des ...
- iOS开发～UI布局（二）storyboard中autolayout和size class的使用详解
一.概要:前一篇初步的描述了size class的概念,那么实际中如何使用呢,下面两个问题是我们一定会遇到的: 1.Xcode6中增加了size class,在storyboard中如何使用? 2.a ...
- iOS开发～UI布局（一）初探Size Class
随着iOS8系统的发布,一个全新的页面UI布局概念出现,这个新特性将颠覆包括iOS7及之前版本的UI布局方式,这个新特性就是Size Class.Size Class配合Auto Layout可以解决 ...
- 如果选择构建ui界面方式，手写代码，xib和StoryBoard间的博弈
代码手写UI这种方法经常被学院派的极客或者依赖多人合作的大型项目大规模使用. 大型多人合作项目使用代码构建UI,主要是看中纯代码在版本管理时的优势,检查追踪改动以及进行代码合并相对容易一些. 另外,代 ...
- iOS UI布局调试工具
查看ios软件的ui布局有三种: 1.DCIntrospect 这种方式是开源的,我从github上clone下来后运行demo,运行遇到了问题:Xcode cannot run using t ...
- iOS8开发～UI布局（二）storyboard中autolayout和size class的使用具体解释
一.概要:前一篇初步的描写叙述了size class的概念,那么实际中怎样使用呢,以下两个问题是我们一定会遇到的: 1.Xcode6中添加了size class,在storyboard中怎样使用? 2 ...
- iOS 8 UI布局 AutoLayout及SizeClass(二)
一.新特性Size Class介绍 随着iOS8系统的公布,一个全新的页面UI布局概念出现,这个新特性将颠覆包含iOS7及之前版本号的UI布局方式,这个新特性就是Size Class. Size Cl ...
- 使用Apache Tiles3.x构建界面布局
Tiles是一个免费的开源模板Java应用程序的框架.基于复合模式简化的用户界面的构建.对于复杂的网站仍是最简单.最优雅的方式与任何MVC技术一起工作.Struts2对Tiles提供了支持,如今Til ...
随机推荐
- sipp 对asterisk 进行压力测试
测试环境 asterisk 192.168.106.170 版本astrisk1.8 sipp 192.168.106.141 sipp版本3.3 安装依赖包yum install make g ...
- Mysql源码学习——Thread Manager
一.前言 上篇的Connection Manager中,曾提及对于一个新到来的Connection,服务器会创建一个新的线程来处理这个连接. 其实没那么简单,为了提高系统效率,减少频繁创建线程和中止线 ...
- py-day1简单使用方法及语法使用详解
一.python入门 1.python的标准格式 创建python文件以.py结尾 如:vi hello.py #!/usr/bin/env python #-*- coding:utf-8 -*- ...
- hibernate的优缺点和适用场合
Hibernate优点: 1.对象化.人员以面相对象的思想来操作数据库.Hibernate支持许多面向对象的特性,如组合,继承,多态等. 2.更好的移植性.对于不同的数据库,开发者只需要使用相同的数据 ...
- 改变静态文本框和PictureControl的背景颜色
/************************************************************************/ /* 改变静态文本框和选择框的背景颜色 */ /* ...
- TypeScript完全解读(26课时)_10.TypeScript完全解读-枚举
10.TypeScript完全解读-枚举 新建enum.ts并在jindex.ts中引用 一个简单的数字枚举 可以通过两种方式获取枚举的值 获取到编码,第一个默认为0,后面的一次递增 第二种形式 可以 ...
- Nginx的安装配置和tomcat负载均衡
Nginx简介 什么是nginx? Nginx是一款高性能的http 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器.由俄罗斯的程序设计师Igor Sysoev所开发,官方测试ngi ...
- 梦工厂实验室 取石子之fans 博弈
问题 D: 取石子之fans 时间限制: 1 Sec 内存限制: 64 MB提交: 57 解决: 26[提交][状态][讨论版] 题目描述 Yougth和Hrdv玩一个游戏,拿出n个石子摆成一圈, ...
- supervisor简明教程
一.supervisor是什么 Linux的后台进程运行有好几种方法,例如nohup,screen等,但是,如果是一个服务程序,要可靠地在后台运行,我们就需要把它做成daemon,最好还能监控进程状态 ...
- POJ3450【KMP理解】
题意: 求多个字符串的最长公共子串 思路: 4000个串,200长度. 一种暴力,对于一个串最多有200*200=40000级别个子串,然后我要再处理一下next数组200,8e6复杂度: 然后我要和 ...