第十章 设计用户界面 之 构建UI布局

原文链接:http://www.cnblogs.com/stone_lv/p/5054793.html

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来调用。

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

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

转载于:https://www.cnblogs.com/stone_lv/p/5054793.html

上一篇:C#-Visual Studio 2017 CSHTML文件错误


下一篇:剃刀页面中的Javascript语法错误