ASP.NET MVC入門教程（二）文章列表頁、內容頁的實現

ASP.NET MVC入門教程（二）

本部分主要實現文章控制器的創建與列表頁、內容頁的設計與實現

一、佈局頁介紹

1.佈局頁介紹

在所有的網頁中，有很多內容在所有的頁面中都是相同的，比如Logo、導航、版權信息等部分，在ASP.NET Form時，採用母版頁的方法實現，在MVC中，採用了佈局頁的方法。

佈局頁在Views下的Shared下，其項目默認的佈局頁是_Layout.cshtml，佈局模板允許你在頁面的某個地方指定HTML容器，然後在網站中多個頁面中應用。

@RenderBody()。是一個佔位符，即所有使用了該佈局頁的內容頁，其內容會被顯示在這個地方。

@RenderSection("scripts", required: false)，這個是爲了在子頁面中引用JS，相當於在佈局頁中定義了一個佔位符，在子頁面中去填充這個佔位。在子頁面中使用以下方式來引用js

@section scripts{}

在本教程中，不對佈局頁進行修改，只修改其超鏈接部分，修改部分如下

<ul class="nav navbar-nav">
                    <li>@Html.ActionLink("主頁", "Index", "Home")</li>
                    <li>@Html.ActionLink("關於", "About", "Home")</li>
                    <li>@Html.ActionLink("聯繫方式", "Contact", "Home")</li>
                    <li>@Html.ActionLink("文章列表","Index","Article")</li>
                    <li>@Html.ActionLink("發表文章","Create","Article")</li>
                </ul>

二、創建Article控制器

1.創建Article控制器

在Controllers文件夾上右鍵單擊，選擇“添加"、“控制器”，選中“包含讀/寫操作的MVC5控制器”，點擊添加，

控制器名稱修改爲Article

點擊“添加”後，生成的代碼如下：

public class ArticleController : Controller
    {
        // GET: Article
        public ActionResult Index()
        {
            return View();
        }

        // GET: Article/Details/5
        public ActionResult Details(int id)
        {
            return View();
        }

        // GET: Article/Create
        public ActionResult Create()
        {
            return View();
        }

        // POST: Article/Create
        [HttpPost]
        public ActionResult Create(FormCollection collection)
        {
            try
            {
                // TODO: Add insert logic here

                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }

        // GET: Article/Edit/5
        public ActionResult Edit(int id)
        {
            return View();
        }

        // POST: Article/Edit/5
        [HttpPost]
        public ActionResult Edit(int id, FormCollection collection)
        {
            try
            {
                // TODO: Add update logic here

                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }

        // GET: Article/Delete/5
        public ActionResult Delete(int id)
        {
            return View();
        }

        // POST: Article/Delete/5
        [HttpPost]
        public ActionResult Delete(int id, FormCollection collection)
        {
            try
            {
                // TODO: Add delete logic here

                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }
    }

其中的方法，後面將會逐一介紹，此處不做解釋

三、列表頁的實現

1.Index方法

Index方法主要用來實現文章的列表頁，在該方法下，將訪問數據庫並將得到的結果傳遞給視圖進行顯示。

1）引入命名空間

using MyStudy.Models;

2）在Articlecontroller類內部創建數據上下文，即EF容器對象

 public class ArticleController : Controller
    {
        //創建數據上下文
        private MyEFContainer db = new MyEFContainer();

3）創建視圖模型

在Models文件夾上右鍵單擊，選擇“添加”、“類”

其代碼如下

using System;

namespace MyStudy.Models
{
    public class ArticleListViewModel
    {
        public int id { get; set; }
        public string title { get; set; }
        public DateTime publishDate { get; set; }
    }
}

4）在Article控制器的Index方法中，輸入以下代碼

public ActionResult Index()
        {
            //1.執行數據庫查詢，取得所有文章信息
            List<tb_article> tArticles = db.tb_article
                .OrderByDescending(m => m.PublishDate)
                .ToList();
            //2.轉換爲視圖模型
            List<ArticleListViewModel> articles = new List<ArticleListViewModel>();
            foreach(var item in tArticles)
            {
                ArticleListViewModel article = new ArticleListViewModel();
                article.id = item.Id;
                article.title = item.Name;
                article.publishDate =(DateTime) item.PublishDate;
                articles.Add(article);
            }
            //通過模型綁定將數據傳遞給視圖
            return View(articles);
        }

5）創建視圖層

在Index方法內，右鍵單擊選擇”添加視圖“，設置如下

點擊”添加“後，系統將會根據你所選擇的模型類、與模板，自動創建視圖

6）運行，查看列表頁，

，在瀏覽器中顯示如下結果

該頁面中，文章的標題與發表日期上方的表頭顯示，title和publishDate，並不是中文的，現在我們通過修改視圖模型讓其顯示爲相應的中文

7）修改視圖模型

首先引入命名空間 using System.ComponentModel.DataAnnotations;

然後修改如下：

using System;
using System.ComponentModel.DataAnnotations;

namespace MyStudy.Models
{
    public class ArticleListViewModel
    {
        [Display(Name ="編號")]
        public int id { get; set; }
        [Display(Name ="文章標題")]
        public string title { get; set; }
        [Display(Name ="發表日期")]
        public DateTime publishDate { get; set; }
    }
}

再次運行，頁面顯示如下：

8）修改列表頁

將以下代碼刪除

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>

將其後的Edit、Details、Delete修改如下

@Html.ActionLink("編輯文章", "Edit", new { id=item.id }) |
            @Html.ActionLink("文章內容", "Details", new { id=item.id }) |
            @Html.ActionLink("刪除文章", "Delete", new { id=item.id })

四、內容頁的實現

1.Article控制器下的Details方法，爲文章內容頁，其代碼如下

public ActionResult Details(int? id)
        {
            if (id == null)
            {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }
            tb_article article = db.tb_article.Find(id);
            if (article == null)
            {
                return new HttpStatusCodeResult(HttpStatusCode.NotFound);
            }
            return View(article);
        }

首先判斷從上一個視圖傳遞過來的id值是否爲空，如果爲空，則返回一個錯誤的請求，否則，根據id查找數據庫中的記錄，再判斷查找到的結果是否爲null，如果爲空則表示沒有該記錄，返回一個404錯誤。否則通過模型綁定，將數據傳遞給視圖顯示。

2.利用模板創建視圖

在Details方法內右鍵單擊，選擇“添加視圖”,設置如下

3.運行、在列表頁中，點擊文章內容、瀏覽器中顯示如下結果

4.對內容頁進行簡單修改，如下

@model MyStudy.Models.tb_article

@{
    ViewBag.Title = "Details";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="row">
    <h3 class="text-center">@Model.Name</h3>
    <h5 class="text-center">@Model.Author</h5>
    <p>
        @Model.Content
    </p>
    <h5 class="text-right">@Model.PublishDate</h5>
</div>
<p>
    @Html.ActionLink("返回列表", "Index")
</p>