ASP.NET MVC 5 一 入門


本系類教程將要構建ASP.NET MVC 5 Web 應用程序,使用的工具是VS2013 。現在有預覽版可以下載了, 點擊下載VS2013 FOR WEB ISO文件 。VS2012 還沒用幾天呢,2013就要出來,據說數據庫有SQL2014的版本了。不帶這么玩的!!!

Go

安裝完VS2013 for Web 后,打開在起始頁(start page)選擇新建項目。

image

image

可以發現和VS2012最大的不同,WEB里面只有一個選擇,確定后接下來才開始選擇其他的:

image

VS2012 還有MVC3 MVC4選擇,在VS2013沒得選。好了,創建項目后,我們直接按下F5運行。

image

好了,一個網站OK了。擁有 首頁、關於、聯系方式等頁面。更NB的是注冊登錄也有了。

image

查看了下網頁源代碼,前端用的是大名鼎鼎的 bootstrap。有時間會專門寫這個系類的文章。

ASP.NET MVC 5 入門二 添加控制器

發表於 2013 年 8 月 13 日 由 顏晉南

什么是MVC?MVC就是 Models 模型,Views 視圖,Controllers 控制器。MVC雖然分為3個部分,但是和三層沒有關系,是一種用來開發應用程序的模式具有良好的架構,易於維護和測試。

  • Models:可以理解為是對應用程序的狀態、數據以及業務功能的封裝。
  • Views:用來顯示和用戶進行交互的HTML頁面。(界面的顯示和互動)
  • Controllers:處理傳入的請求,完成相應的UI邏輯調用Model里面的相應業務。

下面讓我們添加一個控制器類,在資源管理器 項目里面的Controllers 右擊。

image

image

接下來去個名字吧,第一個實例一般都喜歡用 helloworld 。

image

我們把代碼改成如下,直接返回string字符串在瀏覽器窗口。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
using System;
using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace MVC5DEMO.Controllers {  public class HelloWorldController : Controller  {   //   // GET: /HelloWorld/   public string Index()   {    return "這是HelloWorld默認的一個動作(action)";   }   //GET:/HelloWorld/Welcome/   public string Welcome()   {    return "這是Welcome的 action 方法";   }  } }

按下F5,在默認的網頁地址后面加上Helloworld,如下圖:

image

一回車,就會看到我們剛才寫的字符串顯示在頁面上。

ASP.NET MVC 會根據傳入的URL調用不同的控制器類(上面例子的HelloWorld)以及里面不同的方法(上面例子的Index、Welcome)。具體依據什么來判斷調用的是哪個控制器,哪個方法在App_Start/RouteConfig.cs 文件里面設定。

image

如果直接訪問域名,會默認調用 defaults里面的 Home控制器下面的Index方法,后面的ID是傳入的參數等數據后面會介紹。

image

所以剛才我們瀏覽的地址:MVC默認的映射來解析的話控制器是 HelloWorld ,調用的方法是:Welcome 沒有ID這個參數。接下來我們修改為以下代碼:

1
2
3
4
5
//GET:/HelloWorld/Welcome/
        public string Welcome(string name , int age = 18) { return HttpUtility.HtmlEncode( "歡迎"+name+",您的年齡是:"+age) ; }

給Welcome 方法傳入2個參數,年齡默認是18 。接下來我們看看運行結果。

image

以前要獲得GET方法傳入的參數,需要寫一句代碼(request),現在MVC自動的幫我們綁定了,多方便!接下來我們把上面的那個代碼中的age改成ID,瀏覽器地址后面添加 /3?name=yan

image

這次的Welcome后面加上了/3 剛好匹配到了ID,剩下的就匹配到了name這個參數。按照這個思路,是不是有辦法讓地址欄直接匹配到name,這樣url里面就沒有 ? 這個符號。

我們在App_start\RouteConfig.cs里面添加一個試試:

image

當然,默認的路由規則大多數情況下是很合適的,不需要去修改。接下來會介紹模型綁定,這樣就不需要修改路由規則了。

下一步學習: 添加視圖(View)

ASP.NET MVC5 入門三——添加視圖

發表於 2013 年 8 月 16 日 由 顏晉南

在上一篇《 ASP.NET MVC5 添加控制器 》里面我們都是直接返回string 字符串或者html 。這樣的話控制器不僅僅做了控制器的工作還做了VIEW(視圖)的工作。通常我們不希望控制器直接返回HTML,因為那樣子復雜的頁面就會非常繁瑣,所以我們通常會用一個單獨的視圖模板文件來輔助生產對應的html響應報文返回客戶端。

接下來我們就來看看如何添加視圖,先修改上篇博客的那個例子,我們來修改HelloWorldController類,這樣才能讓view的模板文件來封裝要返回的html響應報文。

image

首先,創建一個視圖文件夾 HelloWorld 。右鍵單擊(view)——》添加——》新建文件夾。

image

注意名字一定要是 HelloWorld 因為控制器名字是 HelloWorldController 控制器必須是Controller結尾,視圖文件夾的名字必須和控制器除了結尾的部分一樣。也就是“約定優於配置”的理念。

image

接下來添加一個支架,選擇 MVC5 視圖—空 不帶模型

image

點擊添加,彈出的對話框把視圖名字(View name)改為 Index 。其他保持默認然后確定。

image

可以看到多了一個 Index.cshtml的文件。在上面的</h2>后面添加如下的html代碼:

<p>這是一個View模板,來自於:HelloWorld下面的Index視圖!</p>

然后在index.cshtml文件上面右鍵,選擇在頁面檢查器中查看。當然也可以按下F5進行運行,在瀏覽器地址欄輸入地址進行查看。

image

但瀏覽器的地址發到服務器的時候,服務器解析給控制器,然后控制器里面只有一句 return View()語句,指定返回一個視圖模板文件給瀏覽器,我們沒有寫指定什么名字的視圖,默認就是Index。

更改視圖和布局頁面

首先,上一個頁面我們需要修改標題,顯示我們自己的信息。頁面頂部在一個網站之中的每一頁一般都是一樣的所以我們來修改布局的頁面也叫母版頁。在解決方案資源管理器里面,打開/views/shared 里面的_Layout.cshtml文件。

image

可以看到,有很多@開頭的內容,比如你能在body里面找到 @RenderBody() 這一行。這個什么意思呢?其實說白了就是一個占位符,到時候可以用具體的視圖來填補這個信息。好比剛才那個Index.cshtml就是用來填補這里的。下面我們來修改標題,通過這個了解占位符,以及母版頁(布局頁)的作用。

在_Layout.cshtml 的頭部,有個 <title>@ViewBag.Title – My ASP.NET Application</title> 我們修改為<title>@ViewBag.Title – 我的ASP.NET MVC5示例網站</title> 。body 里面的@Html.ActionLink(“Application name”, “Index”, “Home”, null, new { @class = “brand” }) 修改為 @Html.ActionLink(“MVC5示例網站”, “Index”, “Home”, null, new { @class = “brand” })

回到剛才的Index.cshtml ,修改成如下:

image然后按下F5運行看看。可以看到在瀏覽器頂端的標題是 首頁1-我的ASP.NET。。。。 說明<title>@ViewBag.Title – 我的ASP.NET MVC5示例網站</title> 這句代碼里面的 @ViewBag.Title 被Index.cshtml 里面對應的ViewBag.Title替換了。同時body里面被index.cshtml的內容填充了。

image

我們去About頁面也能看到標題都變化了。這就是母版頁的作用,我們能夠在布局頁面中修改一次,網站上的所有頁面都顯示新的標題。如果看不到效果的話可以CTRL+F5強制刷新看看。

上一篇的博文直接從M(模型)傳HTML回去,這次貌似直接用V(視圖),模型倒是沒怎么用。接下來我們就創建一個數據庫,通過M 模型 傳遞給 V 視圖 來顯示相應信息。

將數據從控制器傳遞到視圖

在我們建立數據庫和模型之前,簡單說下數據從控制器傳遞到視圖。當服務器接收到瀏覽器一個url的請求,某個控制器的某個方法會來響應這次請求。控制器類就是那個我們寫代碼來解析瀏覽器傳入的請求、分析業務、從數據檢索出數據經過處理后最終決定返回什么樣的數據給瀏覽器。然后視圖VIEW就可以獲得控制器傳入的數據,進行整理封裝成HTML返回給瀏覽器。控制器提供視圖返回給瀏覽器需要的數據或者對象。所以,最好讓視圖不執行業務邏輯不與數據打交道,需要的數據就從控制器拿。這樣才能保證“關注點分離”(SOC)。

回到我們昨天寫的另外一個方法 Welcome 它需要2個參數,一個是name一個是ID。代碼如下:

image

ViewBage 是個動態的對象,意味着我們可以隨時添加需要的屬性。再添加之前ViewBag 並沒有那個屬性。借助於上個博客說的ASP.NET MVC的自動綁定模型,可以直接賦值給剛才動態創建的屬性 Message 和 tiems。接下來我們按照之前的步驟在添加一個視圖:Welcome 。

image

代碼如下:

image

非常的簡單,循環輸出消息。F5運行在地址欄輸入

image

image

當我們輸入上面地址欄的那個地址時候,服務器傳遞給相應的控制器處理,控制器獲得參數,把數據打包成一個ViewBag對象,並將該對象傳遞給視圖,視圖獲得對象后取到需要的數據,組織好HTML語句然后返回給客戶的瀏覽器。

接下來的教程,將會介紹使用視圖模型來將數據從控制器傳遞到視圖。利用視圖模型的方法會比一般的方法好(強類型)。

下一步: 添加模型   額,M(model)的一種模型,不是數據庫的那種 。

ASP.NET MVC5 入門四——添加模型

發表於 2013 年 8 月 19 日 由 顏晉南

暫無評論

在本節中,我們將要添加一些類來管理數據庫中的信息。MVC入門系類的文章打算建立一個電影網站的示例。在前幾篇的博客《 Entity Framework學習——了解 》,我介紹了新的編程方式 Code First 。所以我們應該添加一些類來作為MVC中的“模型”部分。

添加模型類

在解決方案資源管理器中,右鍵單擊 Models 文件夾,選擇添加,然后選擇類:

image

輸入類名“Movie”。

向類“Movie”添加以下5個屬性:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
using System;
using System.Collections.Generic; using System.Linq; using System.Web; namespace MVC5DEMO.Models {  public class Movie  {   public int ID { get; set; }   public string Title { get; set; }   public DateTime ReleaseDate { get; set; }   public string Genre { get; set; }   public decimal Price { get; set; }  } }

從上面的代碼可以看出,這個就是用類(class)來表示數據庫中的電影(電影數據信息)。類的每個實例對應着數據庫中的每行,類的屬性對應着數據庫中的每列。

在Movie中繼續添加代碼,我們添加一個 MovieDBContext 類:

image

可以看出,MovieDBContext 繼承至 DbContext 。我們需要應用Entity,可以手動加入以下的using System.Data.Entity;語句或者像上圖那樣,在紅色錯誤處右鍵選擇解析,然后自動添加引用。我們也會發現,有些應用我們不需要,按照下圖方式清除未使用的using語句:

image

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
using System;
using System.Data.Entity; namespace MVC5DEMO.Models {  public class Movie  {   public int ID { get; set; }   public string Title { get; set; }   public DateTime ReleaseDate { get; set; }   public string Genre { get; set; }   public decimal Price { get; set; }  }  public class MovieDBContext:DbContext  {   public DbSet Movies { get; set; }  } }

上面就是最終的代碼,清爽許多。這也是我喜歡.NET 勝過JAVA的原因,有個強大的IDE。非常方便,使用起來容易上手。對於中小企業,快速的開發出合格產品才是王道!

下一節: 添加數據庫連接字符串和LocalDB 。

ASP.NET MVC5 入門五——使用LocalDB

發表於 2013 年 8 月 20 日 由 顏晉南

暫無評論

在上一篇博文《 ASP.NET MVC5 入門四——添加模型 》中,我們創建了M模型對應的模型類。最終我們還是要在數據庫中創建真實的數據庫和表,字段等。對於開發人員,數據庫在開發過程中只是需要一些簡單的功能,為了開發而安裝一個企業版的SQL SERVER太浪費了。還好微軟在SQL2012中提供了LocalDB這個新特性,LocalDB也是VS2013默認就安裝的。

什么是LocalDB

簡單說就是 SQL免費版的SQL Server Express 的輕量級版本。專門為開發人員創立的,易於安裝,無需管理,編程語言和T-SQL語言都和正常的數據庫一樣。同時不耗費系統支援,沒有服務,需要時自動啟動停止。其他更高級的功能就不說了,夠用,免費,好用才是王道。同時LocalDB數據庫也能方便的移植到SQL Server。

添加連接字符串

默認情況下,實體框架會查找和對象同名的上下文里面的連接字符串。在項目的根目錄下面打開Web.config文件:

image

默認的連接字符串:

image

我們在<connectionStrings>里面添加一個新的連接字符串:

<add name=”MovieDBContext” connectionString=”Data Source=(LocalDB)\v11.0;AttachDbFilename=|DataDirectory|Movies.mdf;Integrated Security=True” providerName=”System.Data.SqlClient” />

可以看出2個連接字符串都很相似。第一個名字是 DefaultConnection 用來控制可以訪問該應用程序的成員資格數據庫。我們添加自己的Movie.mdf數據庫,不使用成員資格數據庫。連接字符串的名字必須和DbContext類的名稱相匹配。

添加好了之后,就是 下一步:從控制器訪問模型中的數據 。

ASP.NET MVC5 入門六——通過控制器訪問數據

發表於 2013 年 8 月 22 日 由 顏晉南

首先,我們要添加一個新的控制器,在解決方案資源管理器的Controllers文件夾右鍵單擊,添加,支架。

image

在對話框中,我們選擇下圖這個: MVC5 控制器帶有 讀/寫 和 視圖。

image

名字就叫做:MoviesController 。model class 選擇 MVC5DEMO.Models里面的 Movie。

image

image

數據上下文選擇 我們的MovieDBContext。然后點擊ADD。

image

恩,悲劇了。我們重新修改Models\Movie.cs文件,把Movies 改成Movie。

image

然后ASP.NET MVC5將會自動創建增刪查改(CRUD)的方法(action)和視圖(views)。是的,一個完整功能的網站就OK了。我們F5運行看看。

image

當然,沒有數據,因為我們沒有添加任何數據。接下來我們點擊 Create New 添加新的電影條目。

添加電影:

image

image

我們來看看代碼

我們剛才添加一個新的controller的那個操作,系統自動添加了哪些文件?

  • 一個 MoviesController.cs 文件在Controllers 文件夾里面
  • 在視圖(views)文件夾下面多了一個 Movies  文件夾
  • 在 Movies 文件夾里面,多了Create.cshtml,Delete.cshtml,Details.cshtml Edit.cshtml,和Index.cshtml

顯然,視圖(movies)里面的那些個 cshtml 文件對應着增刪改查和首頁等的頁面。我們先來看看 MoviesController.cs里面有什么?

image

上面的14行,定義了一個私有的電影數據上下文,可以用它來進行查詢,編輯,刪除等。

第18行的Index()方法返回的是 數據上下文中 所有的電影列表。

強類型和@model關鍵字

前幾篇的博文,我們要返回一些到前台是用 ViewBag 來封裝一些數據。當時說了 ViewBag 是動態對象,你可以隨意添加。我們這次演示的是強類型,除了性能上的優點還有如下優點:在編寫代碼時候有智能提示;編譯時候也能檢查代碼是否有問題。

在上面代碼25行的 Details 方法,它有個ID的參數。ID在我們前面也說過:類似於這里面的那個1就是ID。用來表示電影的序號。當然也可以用  ?id=1  這樣來表示。如果找到了對應id的“電影”(27行的代碼)就返回 視圖(view)同時把movie傳進去也就是返回一個強類型的實例。我們看看對應的view(Details.cshtml)里面的代碼:

image

第一行就是一句 @model 指令。這個指令的作用是告訴視圖模板,這次傳過來的對象是什么類型的,上圖例子就是傳過來一個 models 里面的movie 對象。這樣在details.cshtml里面我們就能通過model.titile拿到movie的標題。

image

我們再來看看index視圖的代碼:

image

這次的 model 是一個實現了IEnumerable 接口的對象。所以我們可以用foreach遍歷它:

image

這又是強類型的一個好處,可以用循環遍歷!

我們在web.config里面添加了一串連接字符串,指定Movies的數據庫是LocalDB數據庫里面的Movies.mdf。我們可以在資源管理器里面查看如下圖:如果看不見請單擊 顯示所有文件 按鈕:

image

雙擊 Movies.mdf 文件,會打開 服務器資源管理器,然后我們展開 表 看看:

image

能看到就像以前安裝 SQL SERVER一樣操作數據庫。

image

image

簡單的介紹就到這里,明顯可以看出,開發工具的進步是越來越振奮人心了!

下一步: 優化系統生成的代碼 。

ASP.NET MVC5 入門七——完善視圖

發表於 2013 年 8 月 23 日 由 顏晉南

7條評論

本節中,我們來修改上一篇博文里面系統自動生成的一些代碼,下圖是運行后的截圖:

image

可以看到有很多不足比如:英文太多,日期格式太長等。

我們回到 Models\Movie.cs 添加幾句代碼:

image

紅色框起來的就是增加的部分,using 語句里面的那個 DataAnnotations 我們下載在說。Display 屬性指定要顯示的字段的名稱。原來沒有寫的話,就是數據庫字段的名稱,現在我們寫上中文了。DataType 指定字段顯示的格式,改為日期這樣的話時間就不會顯示出來,更美觀了。

image

在上圖左下角,能看到編輯的鏈接。這個鏈接是由 index.cshtml 里面的 Html.ActionLink 方法生成的:

image

Html是個Help 類,調用 ActionLink方法來動態生成HTML超鏈接。ActionLink方法第一個參數指定顯示的字符串,第二個參數是 要調用的Action的名稱,第三個參數是一個匿名對象。

按照前幾篇講的 /Movies/Edit/3 和 /Movies/Edit?id=3 是等價的。這2個url都是傳遞給Movies的Edit方法來去執行,同時給出ID。我們去看看這個方法:

image

第一個方法是接受GET請求,第二個是接受HttpPost 。可以看到第二個有個屬性【HttpPost】而第一個沒有,因為默認就是GET請求。我們注意到第二個Edit方法前面還有一個【ValidateAntiForgeryToken】這個主要是用來防止跨站請求偽造(CSRF)。這個需要和視圖里面@Html.AntiForgerToken() 配合使用,會生成一個隱藏的防偽標記。下次寫個文章介紹一下。

在上面的GET的Edit 方法,調用實體框架的FIND方法查找時候存在對應id的電影,如果存在就返回給視圖,不存在就返回404。下面是視圖里面的代碼:

image

image

第一行代碼,綁定了一個強類型對象。然后接下來利用這個對象,生成 <label> <input>等代碼。Html.LabelFor 這個幫助類的方法顯示對應的標題,Html.EditorFor 用來生成<input>標簽,Html.ValidationMessageFor 就是用來進行驗證的。

image

image

生成這么優美的控件,居然一句代碼都不用寫,真好!

image

這是表單的源文件,可以看到有個隱藏域,存放着上文的那個 RequestVerificationToken 等信息。從這句話可以看出<form action=”/Movies/Edit/2″ method=”post”>當我們點擊save后,表單的所有數據都將用post請求發送到 /movies/edit/2 這個url。

回過頭來看POST請求的EDIT方法:

image

第一步,判斷表單中的模型所有屬性時候都可以修改或者更新。如果是有效的,就把實體框架狀態改為修改,然后更新到數據庫。保存之后,重定向到Index 這個方法,我們就會看到修改后的效果。

ASP.NET MVC5 入門八——添加搜索

發表於 2013 年 9 月 10 日 由 顏晉南

添加一個搜索的方法和搜索的視圖

接下來我們添加搜索功能,可以根據電影的標題搜索。

第一步:更新index窗體

在最開始MVC入門說過,MVC一個好處就是關注點分離。當我們需要修改和數據有關的東西,只要去修改Controller 就可以。現在我們去修改MoviesController的Index方法:

image

第一行的LINQ查詢用來選擇Movies。僅僅是定義了movies代表數據庫中的哪些,還沒有開始查詢。接下來判斷查詢的字符串是否為空,如果不為空就開始查詢標題一樣的電影。

s => s.Title 這是一個Lambda 表達式。一般用在基於方法的LINQ查詢中,比如上面的Where。

我們現在F5運行一下看看,在地址欄后面加上?searchString=中國

image

image

當然,我們不能讓用戶一直在地址欄加上那么一串來搜索,普遍做法是,在頁面頂部加一個搜索框。看到這個就知道需要改動View部分。我們打開Views\Movies\Index.cshtml 文件,在Create New后面加上如下代碼:

image

image

可以發現,我們並沒有添加控制器中Index的POST請求,也能正常查詢。我們現在添加HttpPost方法

image

image

我們會發現,GET和POST請求的url都是一樣的,都是 localhost:xxx/Movies/Index 。假如我們想要把鏈接發給朋友,讓他知道我想看哪些電影,但是這些查詢信息卻沒有在url里面體現,這樣不肯能發送給朋友。

解決方法是利用 BeginForm 的重載,有個指定POST請求添加搜索信息到url中。

@using (Html.BeginForm(“Index”,”Movies”,FormMethod.Get))

改成如上的代碼,就可以指定用GET方法提交,哪怕你已經有了HttpPost 的方法。

image

接下來:添加更多搜索

把剛才測試的Index HttpPost 方法刪除,我們接下來添加一個功能,讓用戶可以按照類型來搜索電影。同樣是修改Index的方法。代碼如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
public ActionResult Index(string movieGenre,string searchString)   {    var GenreLst = new List();    var GenreQry = from d in db.Movie       orderby d.Genre       select d.Genre;    GenreLst.AddRange(GenreQry.Distinct());    ViewBag.movieGenre = new SelectList(GenreLst);    var movies = from m in db.Movie         select m;    if (!String.IsNullOrEmpty(searchString))    {     movies = movies.Where(s =>; s.Title.Contains(searchString));    }    if (!string .IsNullOrEmpty(movieGenre))    {     movies = movies.Where(x =>; x.Genre == movieGenre);    }    return View(movies);   }

第三行的代碼,我們添加了一個List對象來保存從數據庫取出的電影類型數據。第四行代碼是一個LINQ查詢。第五行代碼我們把獲得查詢結果存到LIST里面,用了 Distinct 方法,過濾重復對象。

控制器的代碼搞定后,就是修改View,在添加一個搜索框。

image

添加的 @Html.DropDownList(“movieGenre”,”All”)  其中的參數 moiveGenre 會去 ViewBag 里面查詢時候存在 IEnumerable<SelectListItem>的參數。在控制器的代碼中,我們給ViewBag添加了SelectList參數。

image

我們運行看看:

image

image

image

可以看出,利用MVC開發網站是非常的方便,快捷。

下一節,添加新的屬性(字段)到Model(數據庫模型)中。

ASP.NET MVC5 入門九——添加新字段、數據庫遷移

發表於 2013 年 9 月 17 日 由 顏晉南

在Code First開發中,不可能一開始創建的數據庫類就一直不變可能隨着需求或者其他原因要做調整。假設我們在原有的Movies里面添加一個評級屬性。

image

然后我們運行下看看。

image

異常了!注釋掉剛才添加的代碼,在運行看看:

image

發現可以訪問,這是因為當EF CodeFirst的數據模型發生異動時,默認會引發一個 InvalidOperationException異常。有個解決方法是,在Global.asax 里面的Application_Start方法加上 一個 SetInitializer方法,這個方法會讓數據庫刪除在重新創建。就是因為如此,有了大量的測試數據顯然不能用這個方法!

使用Code First數據庫遷移

首先,我們刪除系統自動創建的Movies.mdf文件。如下圖,如果在App_Data 里面沒有看見,請單擊顯示所有文件圖標。

image

然后進入(PM)軟件包管理控制台 (視圖——》其他窗口——》程序包管理控制台)輸入以下指令:Enable-Migrations

image

出現錯誤那是因為項目中有多個數據類別,所以需要選擇一個。重新輸入命令:Enable-Migrations –ContextTypeName MVC5DEMO.Models.MovieDBContext 來指定需要遷移的數據庫上下文。image

好了,我們會發現項目中多了一個文件夾(Migrations)和Configuration.cs文件。

image

然后我們根據注釋的提示,修改下Seed方法的內容為如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
protected override void Seed(MVC5DEMO.Models.MovieDBContext context)   {    context.Movie.AddOrUpdate(i =>; i.Title,     new Movie {     Title = "虎膽龍威",     ReleaseDate=DateTime.Parse("2013-03-16"),     Genre="動作",     Price=120},     new Movie {Title = "致青春",     ReleaseDate=DateTime.Parse("2013-04-26"),     Genre="愛情",     Price=60} ,new Movie {Title = "中國合伙人",     ReleaseDate=DateTime.Parse("2013-05-18"),     Genre="劇情",     Price=90} ,new Movie {Title = "小時代",     ReleaseDate=DateTime.Parse("2013-06-27"),     Genre="腦殘",     Price=30}     );   }

添加完成后請按下 CTRL-SHIFT-B 生成解決方案

image

然后我們創建一個數據庫遷移的版本,就是初始版本。在管理控制台輸入 add-migration Initial 其中Initial可以隨便取名。

image

image文件夾下面多了一個日期+Initial.cs 的文件。

接着我們在PM(程序包管理控制台)輸入 Update-Database 指令。

image

這個指令會檢測剛才那個cs文件,里面包含數據庫的結構的說明,然后運行 Seed里面的方法填充數據。然后我們F5運行看看。

image

一切正常!

把新屬性添加到Model

接下來我們給電影模型添加一個分級功能,類似《小時代》少兒不宜!把我們剛剛注釋掉的再反注釋,然后重新生成下。生成完后還需要修改幾個地方,如果你有自己設定Bind屬性,還要把新的字段添加進去,同時要去視圖修改下。我們去Index.cshtml修改下:

image

紅色框框就是新增加的2處。同樣的,Create.cshtml也需要添加。

image

好了之后我們運行看看。

image

出現錯誤了!那是因為現在的模型已經多了一個字段,而數據庫還沒有變化。可以用上文提到的讓系統自動把數據庫砍掉在重新生成,或者自己手動修改數據庫。不過這些都不是最優的,最好的是使用Code First 的數據庫遷移。第一步,更改Seed文件,在默認的那些測試數據中添加分級信息。

image

然后再PM里面輸入  add-migration addRating (名字: addRating 可以隨意,最好有意義)

image

會發現多了一個up和down方法,記錄着數據庫的變動。接着我們生產解決方案,然后再PM輸入:Update-database 命令。然后運行看看:

image

image

評級出現了,我們點擊 Create New 看看:

image

image

一切正常,都能添加。但是這樣還不夠智能,接下來我們設置自動數據庫遷移。

自動數據庫遷移

在Global.asax里面的 Application_Start方法加上以下代碼:

image

這樣以后一旦數據庫模型變化,就能自動進行升級。

下一步: 添加驗證 。

ASP.NET MVC5 入門十——添加驗證

發表於 2013 年 11 月 24 日 由 顏晉南

暫無評論

在本教程:將要在Movie 模型添加驗證邏輯確保用戶添加或者編輯時數據無誤。

DRY(不要重復你自己)

ASP.NET MVC 的核心設計原則之一就是DRY(Don’t Repeat Yourself)。ASP.NET MVC 鼓勵你為一個功能或者行為編碼一次,在以后需要用到的地方一直復用就可以。這樣可以減少編寫代碼的數量,同時易於維護。

在ASP.NET MVC 和 EF code first 中提供的驗證支持就是DRY的好例子。可以只聲明一次,然后在任何需要的地方中執行規則。

向Movie模型中添加驗證規則

打開 Movies.cs 文件,然后我們來更新Movie類。利用內置的 Required、StringLength、RegularExpression 和 Range Validation 特性添加以下內容:

image

弄完后,我們看看數據庫的設計:

image

顯然和規格不符,我們來修改它。先生成解決方案,接下來就是利用數據庫遷移功能自動生成。命令如下:在軟件包管理器控制台輸入

  • add-migration DataAnnotations
  • update-database

命令完成時,VS會自動打開一個類文件,我們可以看到其中的Up方法。

1
2
3
4
5
6
public override void Up()
        {
            AlterColumn("dbo.Movies", "Title", c =>; c.String(maxLength: 60)); AlterColumn("dbo.Movies", "Genre", c =>; c.String(nullable: false, maxLength: 30)); AlterColumn("dbo.Movies", "Rating", c =>; c.String(maxLength: 5)); }

Genre 字段不再是可空的,標題和分級都添加了驗證條件。我們重新看看數據庫的設計:

image

已經改過來了。相關限制條件在源碼里面很清楚了,不在細說。

接下來我們看看效果: 進入 localhost:****/Movies/Create

image

很明顯了,如果沒有通過本地客戶端的驗證,點擊Create是不會向服務器提交表單的。

接來下我們看看實現的過程看看在創建視圖和創建Action方法時發生了什么

先看看 MoviesController 類中的Create方法:

image

會發現和以前完全一樣,沒有任何代碼上的變化。第一個Create (GET方法)是用來顯示初始創建的窗體。第二個(POST版本的)方法先驗證是否有錯誤(ModelStateIsValid)如果存在錯誤,則重新顯示窗體,否則就在數據庫中保存新的電影信息。客戶端實現校驗是通過 javascript 假如我們禁用它看看會發生什么。禁用方法不同瀏覽器有不同的選項,搜索一下就可以。

禁用 chrome 后,刷新重新輸入:

image

沒錯誤提示,我們點擊Create

image

很明顯,還是有驗證,接下來我們輸入正確的看看。

image

成功添加進去了,感興趣的話,在movie.cs 的 POST Create請求添加斷點,會發現輸入錯誤的信息,IsValid 是false ,輸入正確是True。

如果你添加了斷點測試 啟用/禁用 JavaScript 2種情況下Create方法的調用會發現,在啟用JS的情況下,如果客戶端檢測到錯誤是不會調用Action里面POST的Create方法。如果禁用了JS功能,到表單提交到服務器,會通過 ModelState.IsValid 來驗證是否數據存在錯誤。

下一部分:這次改進了 Create 方法的數據驗證,下一次就是 Details 和 Delete 方法了。

感謝作者,祝作者早日創業成功!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM