使用MVC4，Ninject，EF，Moq，構建一個真實的應用電子商務SportsStore(五)

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

做了這麼久，我們的項目已經有了一些進展，但是我們依然沒有關注過我們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架構的特性！請繼續關注我的續篇！

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More