ASP.NET MVC 開發(fā)實(shí)例（一）
近幾年前端發(fā)展很快炫惩，大有不需要后端之趨勢(shì)僻弹。node.js+webpack我現(xiàn)在也有在觀望學(xué)習(xí)中，的確他嚷，很酷蹋绽。但是我并沒有進(jìn)行產(chǎn)品開發(fā)，因?yàn)檫@種東西一投入筋蓖，說不定馬上就有一個(gè)更酷的框架出來卸耘。學(xué)習(xí)框架和你做投資一樣，都需要成本粘咖。新框架帶來了一些新技術(shù)蚣抗，也帶來了新問題。但由于是開源的關(guān)系瓮下，所有的問題都很快得到解決翰铡。同時(shí)，需求不同也就造就今天框架盛行的局面讽坏。沒有完美的架構(gòu)锭魔，只有適合的架構(gòu)，如果你想要有一個(gè)完全匹配你需求的框架路呜，那么就自己寫一個(gè)迷捧。很多有實(shí)力的公司就是這么做的织咧。
其實(shí)，我更樂意做的事漠秋，就是 在原有的技術(shù)上笙蒙，兼容現(xiàn)在流行的MV*前端框架，以達(dá)到迅速開發(fā)的目的庆锦，如果產(chǎn)品頁(yè)需要SEO捅位，那么回到C#，用傳統(tǒng)的后端對(duì)頁(yè)面進(jìn)行渲染肥荔。要做到數(shù)據(jù)靈活綁定绿渣，游刃有余。
我希望這一系列的教材燕耿，是從ASP.NET MVC入門開始中符，再開發(fā)一套小型的商城網(wǎng)站，最后寫一套屬于自己的MVC架構(gòu)出來誉帅。這是一個(gè)上十萬字的大工程淀散，不過如果能在業(yè)余時(shí)間做出來，我會(huì)很佩服我自己的蚜锨。準(zhǔn)備了兩套入門方案档插，一套建立Empty模板，為注冊(cè)會(huì)員代碼亚再。一套為自動(dòng)生成代碼的留言板方案郭膛，然后修改。以此來增強(qiáng)入門體驗(yàn)氛悬。
從現(xiàn)在開始吧则剃，打開Visual Studio 2015，先來做個(gè)例子如捅。
下面是一個(gè)用戶管理的實(shí)例棍现，這個(gè)實(shí)例沒有關(guān)聯(lián)到任何數(shù)據(jù)庫(kù)，當(dāng)然也不會(huì)有Identity镜遣，下面這個(gè)實(shí)例只是讓你基本的了解一下MVC的基本操作概念己肮。（本例子參考了《精通ASP.NET MVC5》，書中第二章：第一個(gè)MVC應(yīng)用程序悲关。）
新建項(xiàng)目谎僻，在已安裝-模板里面選擇Web，創(chuàng)建一個(gè)ASP.NET Web 應(yīng)用程序寓辱，如下圖艘绍。本例命名為alexzeng，當(dāng)然你可以改為你喜歡的任何名字讶舰，不違背命名規(guī)則就可以。
在彈出來的新建ASP.NET 項(xiàng)目里面選擇一個(gè)Empty模板，為以下添加文件夾和核心引用點(diǎn)擊MVC跳昼。
然后在解決方案資源管理器的窗口里面般甲，找到Controllers，右擊新建一個(gè)新的控制器鹅颊，如下圖敷存，選擇MVC 5控制器-空。命名為HomeController.cs 堪伍。
默認(rèn)代碼如下：
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace alexzengnet.Controllers
{
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
}
}
現(xiàn)在我們還運(yùn)行不了這個(gè)網(wǎng)站锚烦，稍微改一下代碼：
public string Index()
{
return "<h1>歡迎光臨</h1>";
}
按一下F5，可以開始瀏覽到網(wǎng)站了帝雇，一個(gè)基于ASP.NET框架的網(wǎng)站基本成立了涮俄。
再把代碼恢復(fù)成默認(rèn)的樣子，對(duì)著Index右擊鼠標(biāo)尸闸，新建視圖彻亲，在彈出來的窗口，按默認(rèn)值即可吮廉。
將代碼修改成下面的樣子苞尝，運(yùn)行一下，是不是和剛才一樣
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
<h1>歡迎光臨宦芦！</h1>
</div>
</body>
</html>
回到HomeController.cs宙址，我們給代碼添加一點(diǎn)動(dòng)態(tài)，在這里我們使用的是ViewBag调卑。
將數(shù)據(jù)傳給視圖的一種方式是使用了ViewBag抡砂， ViewBag是一個(gè)動(dòng)態(tài)的對(duì)象，可以賦予它任何屬性令野。
下面的例子就是演示如何使用ViewBag舀患。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace alexzengnet.Controllers
{
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
int hour = DateTime.Now.Hour;
ViewBag.SayHi=hour<12?"早上好":"下午好";
return View();
}
}
}
再打開視圖文件：Index.cshtml，修改一下代碼：
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
<h1>歡迎光臨气破！</h1>
<p>@ViewBag.SayHi</p>
@Html.ActionLink("注冊(cè)會(huì)員","REG")
</div>
</body>
</html>
運(yùn)行一下試試聊浅，它會(huì)根據(jù)你當(dāng)前的時(shí)間顯示上午好還是下午好，這是一個(gè)最簡(jiǎn)單的MVC程序现使。下面我們將繼續(xù)完善它低匙，我們會(huì)結(jié)合流行的Bootstrap ，做一個(gè)簡(jiǎn)單的注冊(cè)會(huì)員程序碳锈。
現(xiàn)在顽冶，首先我們先來安裝Bootstrap
打開工具菜單，點(diǎn)擊NuGet程序包管理器里面的程序包管理器控制臺(tái)售碳。它是一個(gè)PowerShell的運(yùn)行環(huán)境强重，在控制臺(tái)里面輸入（注意绞呈，區(qū)分大小寫）：
Install-Package -version 3.0.0 bootstrap
完成了安裝程序后會(huì)有提示：已將“bootstrap 3.0.0”成功安裝到 alexzengnet。
我在制作網(wǎng)頁(yè)的時(shí)候间景，通常是先做PS文件佃声，然后通過PS做成html，最后將html分拆成我所需要的cshtml倘要。下面就是加載了bootstrap 的注冊(cè)頁(yè)面圾亏。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<link href="Content/bootstrap.min.css" rel="stylesheet">
<script src="Scripts/jquery-1.9.0.min.js"></script>
<script src="Scripts/jquery-1.9.0.min.js"></script>
<style>
body {
padding-top:50px;
color:#FFF; background:#444;
}
div {margin:5px auto;}
h1 {
color: #fff;
}
#content{
width:100%;
min-height:600px;
background:#444;
padding-top:20px;
color:#FFF;
}
.register{
padding: 20px;
font-weight:700;
border:#FFF solid 1px;
-moz-border-radius: 10px; /* Gecko browsers */
-webkit-border-radius: 10px; /* Webkit browsers */
border-radius:10px; /* W3C syntax */
}
.col-sm-3{
line-height:48px;
}
</style>
</head>
<body>
<div id="content">
<div class="container">
<form>
<div class="row">
<h1 class="col-md-6 col-md-offset-3 col-xs-10 col-xs-offset-1 page_title ">注冊(cè)</h1>
</div>
<div class="col-md-6 col-md-offset-3 col-xs-10 col-xs-offset-1 register">
<div class="form-group">
<label for="username" class="col-sm-3 control-label">用戶名：</label>
<div class="col-sm-8">
<div class="input-group">
<input type="text" class="form-control" name="username" placeholder="請(qǐng)輸入用戶名">
<div class="input-group-addon">
<span class="glyphicon glyphicon-user"></span>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-3 control-label">密碼：</label>
<div class="col-sm-8">
<div class="input-group">
<input type="password" class="form-control" name="password" placeholder="請(qǐng)輸入密碼（六位以上）">
<div class="input-group-addon">
<span class="glyphicon glyphicon-lock"></span>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="chkpwd" class="col-sm-3 control-label">確認(rèn)密碼：</label>
<div class="col-sm-8">
<div class="input-group">
<input type="password" class="form-control" name="chkpwd" placeholder="請(qǐng)確認(rèn)密碼">
<div class="input-group-addon">
<span class="glyphicon glyphicon-exclamation-sign"></span>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-3 control-label">郵箱：</label>
<div class="col-sm-8">
<div class="input-group">
<input type="text" class="form-control" name="email" placeholder="請(qǐng)輸入有效郵箱">
<div class="input-group-addon">
<span class="glyphicon glyphicon-envelope"></span>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3 col-xs-12">
<button type="reset" class="btn btn-default btn-block">
<b>清空</b>
<span class="glyphicon glyphicon-remove"></span>
</button>
</div>
<div class="col-md-3 col-xs-12">
<button type="submit" class="btn btn-info btn-block">
<b>提交</b>
<span class="glyphicon glyphicon-arrow-right"></span>
</button>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
運(yùn)行測(cè)試，基本成功封拧。
接著我們來設(shè)計(jì)一個(gè)數(shù)據(jù)模型類：命名為User.cs志鹃。在解決系統(tǒng)方案資源管理器窗口的Models右擊，新建項(xiàng)泽西，類曹铃，名稱User.cs。
下面是該類代碼：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace alexzengnet.Models
{
public class User
{
public int Id { get; set; }
public string Name{ get; set; }
public string PassWord { get; set; }
public string phone { get; set; }
public string email { get; set; }
}
}
然后Ctrl+Shift+B尝苇，生成解決方案铛只。也就是將這個(gè)類進(jìn)行編譯。
打開HomeController.cs糠溜，在Index下面加入以下代碼
public ActionResult REG()
{
return View();
}
右擊REG淳玩，添加視圖，這時(shí)候需要的強(qiáng)類型視圖非竿，所以跟上面添加index視圖略有不同蜕着。設(shè)置如下圖：
然后稍微寫一些代碼進(jìn)去，測(cè)試一下：
@model alexzengnet.Models.User
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>REG</title>
</head>
<body>
<div>
@using (Html.BeginForm())
{
<p>Name:@Html.TextBoxFor(x=>x.Name)</p>
<p>Password:@Html.PasswordFor(x => x.PassWord)</p>
<p>Phone:@Html.TextBoxFor(x => x.phone)</p>
<input type="submit" value="submit" />
}
</div>
</body>
</html>
運(yùn)行了以后红柱，基本能夠滿足我的要求承匣，現(xiàn)在我對(duì)它進(jìn)行樣式化，將我們剛剛做的加載了bootstrap的html頁(yè)面復(fù)制到這邊來锤悄，注意代碼的變化韧骗，如下所示：
@model alexzengnet.Models.User
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet">
<script src="~/Scripts/jquery-1.9.0.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<style>
body {
padding-top: 50px;
color: #FFF;
background: #444;
}
div {
margin: 5px auto;
}
h1 {
color: #fff;
}
#content {
width: 100%;
min-height: 600px;
background: #444;
padding-top: 20px;
color: #FFF;
}
.register {
padding: 20px;
font-weight: 700;
border: #FFF solid 1px;
-moz-border-radius: 10px; /* Gecko browsers */
-webkit-border-radius: 10px; /* Webkit browsers */
border-radius: 10px; /* W3C syntax */
}
.col-sm-3 {
line-height: 48px;
}
</style>
</head>
<body>
<div id="content">
<div class="container">
@using (Html.BeginForm())
{
<div class="row">
<h1 class="col-md-6 col-md-offset-3 col-xs-10 col-xs-offset-1 page_title ">注冊(cè)</h1>
</div>
<div class="col-md-6 col-md-offset-3 col-xs-10 col-xs-offset-1 register">
<div class="form-group">
<label for="username" class="col-sm-3 control-label">用戶名：</label>
<div class="col-sm-8">
<div class="input-group">
@Html.TextBoxFor(x => x.Name, new { @class= "form-control", @placeholder = "請(qǐng)輸入有效用戶名" })
<div class="input-group-addon">
<span class="glyphicon glyphicon-user"></span>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-3 control-label">密碼：</label>
<div class="col-sm-8">
<div class="input-group">
@Html.PasswordFor(x => x.PassWord, new { @class = "form-control", @placeholder = "請(qǐng)輸入有效密碼" })
<div class="input-group-addon">
<span class="glyphicon glyphicon-lock"></span>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="chkpwd" class="col-sm-3 control-label">電話：</label>
<div class="col-sm-8">
<div class="input-group">
@Html.TextBoxFor(x => x.phone, new { @class = "form-control" , @placeholder= "請(qǐng)輸入有效電話" })
<div class="input-group-addon">
<span class="glyphicon glyphicon-phone"></span>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-3 control-label">郵箱：</label>
<div class="col-sm-8">
<div class="input-group">
@Html.TextBoxFor(x => x.email, new { @class = "form-control", @placeholder = "請(qǐng)輸入有效郵箱" })
<div class="input-group-addon">
<span class="glyphicon glyphicon-envelope"></span>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3 col-xs-12">
<button type="reset" class="btn btn-default btn-block">
<b>清空</b>
<span class="glyphicon glyphicon-remove"></span>
</button>
</div>
<div class="col-md-3 col-xs-12">
<button type="submit" class="btn btn-info btn-block">
<b>注冊(cè)</b>
<span class="glyphicon glyphicon-arrow-right"></span>
</button>
</div>
</div>
}
</div>
</div>
</body>
</html>
運(yùn)行之后，感覺不錯(cuò)零聚，如下圖：
這時(shí)我們點(diǎn)擊注冊(cè)袍暴，將不會(huì)有任何反應(yīng)，下面我們就來研究一下如何寫注冊(cè)的代碼隶症。
第一步政模，先來設(shè)置啟動(dòng)URL，點(diǎn)擊項(xiàng)目菜單蚂会，選擇本項(xiàng)目的屬性淋样，如本例就是alexzengnet屬性。在面板中選擇Web胁住，特定頁(yè)趁猴，不用填寫任何值即可刊咳。如下圖。
第二步儡司，我們來修改一下HomeController.cs文件芦缰，讓它響應(yīng)http的GET,POST。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using alexzengnet.Models;
namespace alexzengnet.Controllers
{
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
int hour = DateTime.Now.Hour;
ViewBag.SayHi=hour<12?"早上好":"下午好";
return View();
}
[HttpGet]
public ActionResult REG()
{
return View();
}
[HttpPost]
public ActionResult REG(User user)
{
return View("Thank", user);
}
}
}
這里的意思就是如果MVC獲取到user數(shù)據(jù)枫慷，那么將使用post請(qǐng)求。使用post將查找并渲染“Thank”視圖浪规。
第三步或听，創(chuàng)建Thank視圖。右擊HomeController.cs文件笋婿，添加一個(gè)強(qiáng)類型菜單視圖誉裆。如下圖：
修改一下新建的Thank.cshtml，代碼如下：
@model alexzengnet.Models.User
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Thank</title>
</head>
<body>
<div>
<h1>多謝注冊(cè)本站缸濒，@Model.Name</h1>
</div>
</body>
</html>
測(cè)試一下成功足丢，但對(duì)于會(huì)員注冊(cè)，我們往往需要增加一些輸入驗(yàn)證庇配，以防止用戶一些無效的輸入：
第一步打開User.cs斩跌，增加驗(yàn)證規(guī)則聲明，在這個(gè)命名空間里面using System.ComponentModel.DataAnnotations; 做驗(yàn)證捞慌，下面是代碼：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel.DataAnnotations;
namespace alexzengnet.Models
{
public class User
{
public int Id { get; set; }
[Required(ErrorMessage ="請(qǐng)輸入用戶名。")]
public string Name{ get; set; }
[Required(ErrorMessage = "請(qǐng)輸入密碼。")]
public string PassWord { get; set; }
[Required(ErrorMessage = "請(qǐng)輸入電話火邓。")]
public string phone { get; set; }
[Required(ErrorMessage = "請(qǐng)輸入Email慰毅。")]
[RegularExpression(".+\\@.+\\..+", ErrorMessage ="請(qǐng)輸入正確的Email地址")]
public string email { get; set; }
}
}
第二步修改reg.cshtml文件，在需要提示錯(cuò)誤的地方加上@Html.ValidationSummary() 以下省略掉不必要的代碼嗅虏，示例如下：
@using (Html.BeginForm())
{
<div class="row">
<h1 class="col-md-6 col-md-offset-3 col-xs-10 col-xs-offset-1 page_title ">注冊(cè)</h1>
</div>
<div class="col-md-6 col-md-offset-3 col-xs-10 col-xs-offset-1 register">
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<strong>@Html.ValidationSummary()</strong>
</div>
......
}
第三步修改HomeController.cs文件洛姑，做一個(gè)判斷，如果發(fā)生錯(cuò)誤提示皮服，就不查找并渲染文件楞艾。
[HttpPost]
public ActionResult REG(User user)
{
if (ModelState.IsValid) {
return View("Thank", user);
}
else {
return View();
}
}
測(cè)試完成！
這一個(gè)例子并沒有寫入數(shù)據(jù)庫(kù)冰更，它通過一個(gè)全空的MVC产徊，一步一步的往里面填充代碼，熟悉一下視圖蜀细、控制器舟铜、MODEL之間的關(guān)聯(lián)，對(duì)MVC有了一個(gè)初步的了解奠衔。
下一個(gè)例子我們會(huì)用一個(gè)簡(jiǎn)單的留言板作為例子谆刨，你將看到用極簡(jiǎn)單的代碼將自動(dòng)生成留言板塘娶，并寫入數(shù)據(jù)庫(kù)，還有了修改痊夭、刪除等操作數(shù)據(jù)庫(kù)功能刁岸。然后我們?cè)賹?duì)其進(jìn)行修改，以滿足我們的設(shè)計(jì)需求她我。
