使用MVC4，Ninject，EF，Moq，构建一个真实的应用电子商务SportsStore(五)

做了这么久，我们的项目已经有了一些进展，但是我们依然没有关注过我们UI，它看起来很不友好，这将使我们的网站不是很吸引眼球，今天我们就改进一下我们的UI，让他看起来友好些。首先，让我们找到SportsStore.WebUI工程的Views/Shared下的_Layout.cshtml文件，修改如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
<link href="~/Content/Site.css" type="text/css" rel="stylesheet" />
</head>
<body>
    <div id="header">
        <div class="title">SPORTS STORE</div>
    </div>
    <div id="categories">
        We will put something useful here later
    </div>
    <div id="content">
        @RenderBody()
    </div>
</body>
</html>

添加样式单

你一定已经注意到了，我们的代码中使用了一个名为Site.css的样式单，它是我们创建应用时，VS自动为我们创建的，它就在SportsStore.WebUI工程的content文件夹中，现在我们编辑它，添加如下代码：

BODY { font-family: Cambria, Georgia, "Times New Roman"; margin: 0; }
DIV#header DIV.title, DIV.item H3, DIV.item H4, DIV.pager A {
font: bold 1em "Arial Narrow", "Franklin Gothic Medium", Arial;
}
DIV#header { background-color: #444; border-bottom: 2px solid #111; color: White; }
DIV#header DIV.title { font-size: 2em; padding: .6em; }
DIV#content { border-left: 2px solid gray; margin-left: 9em; padding: 1em; }
DIV#categories { float: left; width: 8em; padding: .3em; }
DIV.item { border-top: 1px dotted gray; padding-top: .7em; margin-bottom: .7em; }
DIV.item:first-child { border-top:none; padding-top: 0; }
DIV.item H3 { font-size: 1.3em; margin: 0 0 .25em 0; }
DIV.item H4 { font-size: 1.1em; margin:.4em 0 0 0; }
DIV.pager { text-align:right; border-top: 2px solid silver;
padding: .5em 0 0 0; margin-top: 1em; }
DIV.pager A { font-size: 1.1em; color: #666; text-decoration: none;
padding: 0 .4em 0 .4em; }
DIV.pager A:hover { background-color: Silver; }
DIV.pager A.selected { background-color: #353535; color: White; }

运行你的应用，你将看到如下效果：

创建一个Partial View

为了使我们的页面更加美观，更加专业，我们要创建一个Partial View，Partial View是一个页面的一部分，它可以被多个页面重用，最广泛的应用就是Header与footer。现在，在/Views/Shared文件夹上右击，并选择添加View，命名为ProductSummary，注意一定要勾选Create as a partial view选项，如下图：

Partial view和一个常规的View没有什么区别，除了它生成的是一个HTML片段，现在，我们修改下这个Partial view 文件：

@model SportsStore.Domain.Entities.Product

<div class="item">
    <h3>@Model.Name</h3>
            @Model.Description
    <h4>@Model.Price.ToString("c")</h4>
</div>

我们要对以前的List.cshtml文件，做些微妙的改动：

@model SportsStore.WebUI.Models.ProductsListViewModel
@{
    ViewBag.Title = "Products";
}
@foreach (var p in Model.Products)
{
    Html.RenderPartial("ProductSummary", p);
}
<div class="pager">
        @Html.PageLinks(Model.PagingInfo, x => Url.Action("List", new {page = x}))
</div>

运行你的项目，去看看效果吧！在下一篇中，我们将为我们网站添加一个导航的功能，通过对产品的过滤与分类，使得用户的操作更加灵活简单，更充分的体现MVC4架构的特性！请继续关注我的续篇！

posted on 2013-06-04 10:55 王志岳阅读(2357) 评论(2) 编辑收藏举报

刷新页面返回顶部

王志岳

导航

公告

使用MVC4，Ninject，EF，Moq，构建一个真实的应用电子商务SportsStore(五)