Apply the user interface design for a web application

 介绍了Css的常用属性和html5的新element，以及Htmlhelper的简单方法，如BeginForm, TextBox, TextArea。

Design and implement UI behavior

  • client validation：

在Model中使用attribute binding to property，在View中使用EditorFor/ValidationMessageFor实现client validation。

Server side再通过ModelState.IsValid来check。

  • remote validation

通过Remote("Action", "Controller")属性binding to property，

如下web.config中key的value需为true。

<appSettings>

    <add key="ClientValidationEnabled" value="true" />

    <add key="UnobtrusiveJavaScriptEnabled" value="true" />

</appSettings>

  • 使用AJAX更新部分page
  • 使用jQuery实现UI

Compose the UI layout of an application

  1. 用partial view实现公共部分，@Html.Partial("partialPage")
  2. 使用Razor的templates实现如EditorFor这类功能，~/Views/ControllerName(Shared)/EditorTemplates/Templatename.cshtml, ~/Views/ControllerName(Shared)/DisplayTemplates/Templatename.cshtml
  3. 使用Master page，Layout可变，if(ViewBag.switch=="layout1") Layout = “~/Views/Shared/_plainLayout.cshtml"; else Layout = "~/Views/Shared/_Layout.cshtml";

Enhance application behavior and style based on browser feature detection

  • 使用userAgent header的信息判断browser的名字，如IE
  • 通过DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("")...)，支持不同的display mode。

Plan an adaptive UI layout

  • 使用<meta> tag和CSS的@media查询指定layout
  • 使用jQuery.Mobile.MVC