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

2024-01-12 10:21:58

原文链接：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

码农公寓

相关文章