.net mvc實踐教程(一)

.net mvc實踐教程(一)

過去幾年內,不管是Java還是.net都紛紛推出了自己MVC平臺。微軟MVC更新速度很快。截止到目前為止,已經更新到了MVC5,結合自己EF框架。基礎MVC可以很快搭建一個網站架構。最新的MVC嚮導還會自動整合bootstrap前端框架,節省了很多時間。

開篇第一講,不得不老生常談一下MVC是什麼?所謂MVC就是將網站模型精簡為三個部分。分別是model、view和controller。三個部分各司其職,與傳統三層架構不同。MVC邏輯更清晰,使得前後端分離,是目前主流的框架結構。一般而言,model負責承載資料,抽象你具體專案的模型(更復雜一點會存在ViewModel)。模型承載資料以後,需要展現的view介面。而controller負責他們之間的互動,包括實現一些邏輯。當然給予MVC可以實現更負責的結果。比如我曾經接觸過的DDD,既領域驅動模型。會存在更多的,如藏儲層,資料庫訪問持久等。下面就從最基本的MVC結構開始講。

開啟visual studio,新建專案。選擇MVC,然後VS會自動幫你建立MVC所需要的基本檔案,包含一些指令碼的樣式檔案。當然包含MVC所必須的預設路徑,網站配置檔案,授權等模組等。建立好後,一般結構如下所示:

這裡,關注一下controller資料夾下的HomeController.cs檔案,這個是系統預設controller,通過路由配置(此內容後續再補充)。這裡我們就在系統預設的基礎上新增實現一些我們想要的內容。假設我們想在首頁顯示一本書的資訊。我們需要新建一個model類,就叫做Book,然後在通過在controller類進行賦值(實際一般在資料庫中獲取),然後通過view介面展示出來。

一、新建的Book 類如下:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace MvcDemo.Models
{
public class Book
{
/// <summary>
/// Book name
/// </summary>
public string BookName { get; set; }
public string  Author { get; set; }
public decimal Price { get; set; }
public int ISBN { get; set; }
}
}

二、修改Home資料夾下的Index.cshtml資料夾,將此頁面的model制定為Book,程式碼如下:

@model MvcDemo.Models.Book
<div class="jumbotron">
<h1>@Model.BookName</h1>    
</div>
<div class="row">
<div class="col-md-4">
<h2>這是一本...</h2>
</div>
<div class="col-md-4">
<h2>作者:@Model.Author</h2>
</div>
<div class="col-md-4">
<h2>價格:¥ @Model.Price</h2>
</div>
</div>

 三、此時,需要修改controller檔案,講book的model賦值,然後傳遞到頁面去,其實實現這個很簡單,只需要一句話return View(aBook);這當然藉助於MVC強大的模型了。完整的原始碼如下:

using MvcDemo.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MvcDemo.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
Book aBook = new Book();
aBook.BookName = "日光流年";
aBook.Author = "閻連科";
aBook.Price = 0.99m;
return View(aBook);
}
public ActionResult About()
{
ViewBag.Message = "Your application description page.";
return View();
}
public ActionResult Contact()
{
ViewBag.Message = "Your contact page.";
return View();
}
}
}

到此,MVC三層我們都修改完了,現在到了看效果的時候。效果如下,這裡只做基本演示,下次我們要講到這裡面的原理了。