ASP.NET MVC Framework體驗（3）：表單提交

概述

在前面的兩篇文章總，我們分別做了一個簡單的ASP.NET MVC的例子和進行資料的綁定，在本文中，將通過ASP.NET MVC Framework實現表單的提交，你可以看到，在這裡有多種方法來擷取表單資料，可以自動對應、通過Request對象擷取等。

實現新增資料

1.這裡我們還採用上一篇做過的Blog樣本（在後面的文章中，我將一直使用該樣本），在這之前，先修改一下上次樣本中的BlogRepository，為其增加一個Add方法：

public void Add(Post post){    BlogDataContext db = new BlogDataContext();    db.Posts.InsertOnSubmit(post);    db.SubmitChanges();}

2.在Index視圖中添加一個可以轉向建立Post頁面的連結，使用ActionLink()方法：

<h2>ASP.NET MVC Framework Sample</h2><hr /><%=Html.ActionLink("Home", new { action="Index"})%> |<%=Html.ActionLink("New Post", new { action="New"})%>

<div>    <%foreach (Post post in ViewData)      { %>    <div class="postitem">        <strong>Title</strong>：<%=Html.Encode(post.Title) %></br>        <strong>Author</strong>：<%=Html.Encode(post.Author) %></br>        <strong>PubDate</strong>：<%=Html.Encode(post.PubDate.ToShortDateString()) %></br>        <strong>Content</strong>：<%=Html.Encode(post.Description) %></br>    </div><br />    <% } %></div>

在上面的代碼中，第四行我們添加了New Post超連結，並指定該連結的action為New，這裡我們也可以通過action名稱來指定：

<h2>ASP.NET MVC Framework Sample</h2><hr /><%=Html.ActionLink("Home", "Index")%> |<%=Html.ActionLink("New Post", "New")%><div>    <%foreach (Post post in ViewData)      { %>    <div class="postitem">        <strong>Title</strong>：<%=Html.Encode(post.Title) %></br>        <strong>Author</strong>：<%=Html.Encode(post.Author) %></br>        <strong>PubDate</strong>：<%=Html.Encode(post.PubDate.ToShortDateString()) %></br>        <strong>Content</strong>：<%=Html.Encode(post.Description) %></br>    </div><br />    <% } %></div>

3.編寫控制器中的New action代碼，這裡代碼非常簡單，因為我們只需要轉向建立Post視圖就可以了，並不需要其他的操作：

[ControllerAction]public void New(){     //轉向新頁面    RenderView("New");}

4.編寫New視圖，在這裡我們將提供一些表單，供使用者輸入資料，編寫HTML代碼如下：

<h2>New Post</h2><hr /><div class="postitem">    Title：<input id="title" name="title" type="text" /><br /><br />    Author：<input id="author" name="author" type="text" /><br /><br />    Content：<textarea id="description" name="description" cols="40" rows="5"></textarea><br /><br />    <input type="submit" value="Save" /></div>

接下來添加一個HTML的form元素，並指定它的action為我們要增加新的Post的action，這裡假定為Add，並且指定method為Post，最終我們完成的代碼應該看起來如下所示：

<h2>New Post</h2><hr /><div class="postitem">    <form action="Add" method="post">        Title：<input id="title" name="title" type="text" /><br /><br />        Author：<input id="author" name="author" type="text" /><br /><br />        Content：<textarea id="description" name="description" cols="40" rows="5"></textarea><br /><br />        <input type="submit" value="Save" />    </form></div>

擷取表單資料

完成了上面的步驟之後，就可以編寫控制器中Add action的代碼，在這裡需要擷取表單的資料，並將其寫入到資料庫，ASP.NET MVC Framework中提供了多種方法擷取表單資料。

1.自動對應

使用這種方法，我們只需要把方法的參數定義表單的名稱，ASP.NET MVC Framework將會自動協助我們進行映射，直接把表單的資料賦值給form的Action所對應的方法參數上，如下代碼所示：

[ControllerAction]public void Add(string title, string author, string description){    Post post = new Post();    post.Title = title;    post.Author = author;    post.Description = description;    post.PubDate = DateTime.Now;    BlogRepository repository = new BlogRepository();    repository.Add(post);    RedirectToAction("Index");}

2.第一種方法在使用時，如果介面上表單過多，會使方法的參數變大，這樣好像就變成了重構中所說的“髒代碼”，為瞭解決這個問題，我們還可以使用表單變數來擷取表單的值，使其代碼看起來如下所示：

[ControllerAction]public void Add(){    Post post = new Post();    post.Title = Request.Form["title"];    post.Author = Request.Form["author"];    post.Description = Request.Form["description"];    post.PubDate = DateTime.Now;    BlogRepository repository = new BlogRepository();    repository.Add(post);    RedirectToAction("Index");}

上面這兩種方法都是擷取表單的值，並將其儲存到資料庫中，轉向Index action進行處理。

3. 在MVCToolkit中還提供了一些擴充的方法，可以用來擷取表單的值，後面的文章再說。

配置直接選取

這一步什麼時候都不能忘，這次我們修改一下，變為controller/action的形式，代碼如下：

void Application_Start(object sender, EventArgs e) {    // Code that runs on application startup    RouteTable.Routes.Add(                new Route                {                    Url = "[controller]/[action]",                    Defaults = new { action = "Index" },                    RouteHandler = typeof(MvcRouteHandler)                });}

完成資料增加

上面的樣本運行後如下所示，首先是Index視圖中有一個New Post連結：

 

點擊New Post後：

 

提交之後，增加一條新的Post，並轉向Index視圖：

 

結束語

關於在ASP.NET MVC Framework中實現表單的提交簡單樣本到這裡就結束，相信通過前面三篇簡單的文章，大家對ASP.NET MVC Framework已經有了一個大概的認識，後面我會寫一些深入一點的文章以及MVCToolkti提供的一些HTML Helper方法:)

範例程式碼下載：/Files/Terrylee/MVCDemo03.rar