摘要
????? 本文將完成我們“MVC公告發布系統”的公告發布功能,以此展示在ASP.NET MVC中如何傳遞處理表單的數據。
前言
????? 通過前幾篇文章,我們已經能比較自如的使用ASP.NET MVC來呈現頁面和數據了。但是,有一個大問題沒有解決:如何處理表單數據。例如,我們將要實現的公告發布功能,用戶肯定是在某個表單頁面輸入標題、正文等內容,而后提交,然后表單數據要被傳遞到相應的地方交由業務邏輯組件處理。
????? 在傳統的ASP.NET下,使用的是Model1模式,每個aspx頁面有一個同名的aspx.cs文件,當提交表單時,默認數據被提交到這個同名 aspx.cs文件中某個方法下處理。但是,在ASP.NET MVC中,這種方法不能用了,因為我們換用了Model2模式,不能再用同名代碼文件來處理aspx的提交請求(但是這不表明同名代碼文件就沒有用了,實際上,它依然會被執行,但是我們不提倡在里面處理任何邏輯,但是,有時會利用它進行一些初始化操作。),那么應該怎么做呢?不多講,我們以例子說明問題。
????? 下面我們一步一步完成“MVC公告發布系統”的公告發布功能,等做完這個功能,上面的問題就明了了。
先修改一個錯誤...
????? 這里,首先要像大家道歉,因為在第一篇里,我犯了一個錯誤。就是在公告的實體類AnnounceInfo中少了一個屬性。現在,我們在AnnounceInfo中添加一個叫Cateogry的屬性,類型為int,它用來指明這個公告屬于哪個分類。
????? 對于這個錯誤,我十分抱歉。
建立輸入信息頁面
????? 下面,正式開始我們的工作。首先,我要建立一個頁面,用來讓用戶輸入公告信息。而我們知道,在ASP.NET MVC中不能直接請求aspx文件,任何請求都要通過Controller,所以,我們首先在Controllers目錄下建立一個新的 Controller類,名叫AnnounceController。刪除其中自動生成的Index方法,新建一個名叫Release的Action方法,具體代碼如下。
AnnounceController.cs:
- using ?System; ??
- using ?System.Collections.Generic; ??
- using ?System.Linq; ??
- using ?System.Web; ??
- using ?System.Web.Mvc; ??
- using ?System.Web.Mvc.Ajax; ??
- using ?MVCDemo.Models; ??
- using ?MVCDemo.Models.Interfaces; ??
- using ?MVCDemo.Models.Entities; ??
- ??
- namespace ?MVCDemo.Controllers ??
- { ??
- ???? public ? class ?AnnounceController?:?Controller ??
- ????{ ??
- ???????? public ?ActionResult?Release() ??
- ????????{ ??
- ????????????ICategoryService?cServ?=?ServiceBuilder.BuildCategoryService(); ??
- ????????????List<CategoryInfo>?categories?=?cServ.GetAll(); ??
- ????????????ViewData[ "Categories" ]?=? new ?SelectList(categories,? "ID" ,? "Name" ); ??
- ???????????? return ?View( "Release" ); ??
- ????????} ??
- ????} ??
- }??
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using System.Web.Mvc.Ajax; using MVCDemo.Models; using MVCDemo.Models.Interfaces; using MVCDemo.Models.Entities; namespace MVCDemo.Controllers { public class AnnounceController : Controller { public ActionResult Release() { ICategoryService cServ = ServiceBuilder.BuildCategoryService(); List<CategoryInfo> categories = cServ.GetAll(); ViewData["Categories"] = new SelectList(categories, "ID", "Name"); return View("Release"); } } }?
????? 這個就是要呈現表單頁的Action方法,看看它做了什么:它首先取出所有的分類,然后將它們轉成SelectList類型存入ViewData,最后呈現Release視圖。
????? 為什么要取出所有分類呢?因為我們在發布公告時希望有個下拉列表框列出所有公告名稱,讓用戶可以選擇要發布的公告屬于哪個分類。而SelectList是 ASP.NET MVC中用于綁定到下拉列表的類型。它有很多重載的構造方法,其中我使用的是三個參數的,它們分別表示:生成數據的枚舉,綁定到value的字段名,綁定到列表名稱的字段名。這里,將把所有分類實體集合綁定到下拉列表,而ID屬性作為值,Name屬性作為顯示在列表框中的名字。
????? 如果我們不需要下拉列表框來顯示所有分類,那么Release方法只需一行return View("Release");就可以了。
????? Action方法做完了,我們還需要視圖。在Views目錄下建立Announce目錄,再在這個Announce目錄下建立Release.aspx視圖。代碼如下。
Release.aspx:
- <%@?Page?Language= "C#" ?AutoEventWireup= "true" ?CodeBehind= "Release.aspx.cs" ?Inherits= "MVCDemo.Views.Announce.Release" ?%> ??
- <%@?Import?Namespace= "MVCDemo.Models.Entities" ?%> ??
- ??
- <!DOCTYPE?html?PUBLIC? "-//W3C//DTD?XHTML?1.0?Transitional//EN" ? "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > ??
- ??
- <html?xmlns= "http://www.w3.org/1999/xhtml" ?> ??
- <head?runat= "server" > ??
- ????<title></title> ??
- </head> ??
- <body> ??
- ????<%?SelectList?categories?=?ViewData[ "Categories" ]? as ?SelectList;?%> ??
- ????<div> ??
- ????????<h1>MVC公告發布系統——發布公告</h1> ??
- ????????<%?Html.BeginForm( "DoRelease" , "Announce" ,FormMethod.Post);?%> ??
- ????????<dl> ??
- ????????????<dt>標題:</dt> ??
- ????????????<dd><%=?Html.TextBox( "Title" )?%></dd> ??
- ????????????<dt>分類:</dt> ??
- ????????????<dd><%=?Html.DropDownList( "Category" ,categories)?%></dd> ??
- ????????????<dt>內容:</dt> ??
- ????????????<dd><%=?Html.TextArea( "Content" )?%></dd> ??
- ????????</dl> ??
- ????????<input?type= "submit" ?value= "發布" ?/> ??
- ????????<%?Html.EndForm();?%> ??
- ????</div> ??
- </body> ??
- </html>??
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Release.aspx.cs" Inherits="MVCDemo.Views.Announce.Release" %> <%@ Import Namespace="MVCDemo.Models.Entities" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title></title> </head> <body> <% SelectList categories = ViewData["Categories"] as SelectList; %> <div> <h1>MVC公告發布系統——發布公告</h1> <% Html.BeginForm("DoRelease","Announce",FormMethod.Post); %> <dl> <dt>標題:</dt> <dd><%= Html.TextBox("Title") %></dd> <dt>分類:</dt> <dd><%= Html.DropDownList("Category",categories) %></dd> <dt>內容:</dt> <dd><%= Html.TextArea("Content") %></dd> </dl> <input type="submit" value="發布" /> <% Html.EndForm(); %> </div> </body> </html>?
????? 代碼不復雜,但是要注意幾個地方。categories不多說了,這是剛才我們傳遞過來的所有分類組成的列表項。我覺得大家迷惑的可能是那些 Html.***的東西,其實,Html是ViewPage的中的一個對象(ViewPage是所有視圖的基類),它主要的左右就是產生各種表單項(先這么認為吧,其實它還有其他功能),例如Html.BeginForm就是說這里開始一個form標簽,而Html.EndForm當然是form標簽結束。其他幾個,看名字相信大家也猜出來了。
????? 至于為什么這么做,也不直接使用原始的HTML標簽,我先不多說,以后大家做多了自然就理解了,目前大家只要知道,這樣做可以避免一個url問題以及讓url更靈活就行了。^_^
????? 回到這個頁面,BeginForm有三個參數,分別是提交請求的Action名,提交請求的Controller名和請求方式。所以,這個頁面的意思就是使用post方法請求
http://localhost/Announce/DoRelease
這個Action來處理我們的請求。
????? 頁面中有三個輸入表單和一個提交按鈕。三個輸入表單分別是:名叫Title的文本框,名叫Content的文本域和名叫Category的下拉列表框。注意下拉列表是怎么綁定的,只要將含有數據的SelectList作為第二個參數就行了。完成后,頁面是這樣子的:
????? 現在我們可以輸入信息了,但是如果你輸入后點提交,你會發現產生了經典的404錯誤。剛才我們說了,表單提交到的Action是Announce下的DoRelease,但是現在沒有這個Action,當然會404了。下面,我們來建立這個處理程序。
????? 回到AnnounceController,新建Action方法DoRelease,具體代碼如下。
AnnounceController.cs:
- using ?System; ??
- using ?System.Collections.Generic; ??
- using ?System.Linq; ??
- using ?System.Web; ??
- using ?System.Web.Mvc; ??
- using ?System.Web.Mvc.Ajax; ??
- using ?MVCDemo.Models; ??
- using ?MVCDemo.Models.Interfaces; ??
- using ?MVCDemo.Models.Entities; ??
- ??
- namespace ?MVCDemo.Controllers ??
- { ??
- ???? public ? class ?AnnounceController?:?Controller ??
- ????{ ??
- ???????? public ?ActionResult?Release() ??
- ????????{ ??
- ????????????ICategoryService?cServ?=?ServiceBuilder.BuildCategoryService(); ??
- ????????????List<CategoryInfo>?categories?=?cServ.GetAll(); ??
- ????????????ViewData[ "Categories" ]?=? new ?SelectList(categories,? "ID" ,? "Name" ); ??
- ???????????? return ?View( "Release" ); ??
- ????????} ??
- ???????? //??http://www.my400800.cn ??
- ???????? public ?ActionResult?DoRelease() ??
- ????????{ ??
- ????????????AnnounceInfo?announce?=? new ?AnnounceInfo() ??
- ????????????{ ??
- ????????????????ID?=?1, ??
- ????????????????Title?=?Request.Form[ "Title" ], ??
- ????????????????Category?=?Int32.Parse(Request.Form[ "Category" ]), ??
- ????????????????Content?=?Request.Form[ "Content" ], ??
- ????????????}; ??
- ??
- ????????????IAnnounceService?aServ?=?ServiceBuilder.BuildAnnounceService(); ??
- ????????????aServ.Release(announce); ??
- ??
- ????????????ViewData[ "Announce" ]?=?announce; ??
- ???????????? return ?View( "ReleaseSucceed" ); ??
- ????????} ??
- ????} ??
- }??
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using System.Web.Mvc.Ajax; using MVCDemo.Models; using MVCDemo.Models.Interfaces; using MVCDemo.Models.Entities; namespace MVCDemo.Controllers { public class AnnounceController : Controller { public ActionResult Release() { ICategoryService cServ = ServiceBuilder.BuildCategoryService(); List<CategoryInfo> categories = cServ.GetAll(); ViewData["Categories"] = new SelectList(categories, "ID", "Name"); return View("Release"); } // http://www.my400800.cn public ActionResult DoRelease() { AnnounceInfo announce = new AnnounceInfo() { ID = 1, Title = Request.Form["Title"], Category = Int32.Parse(Request.Form["Category"]), Content = Request.Form["Content"], }; IAnnounceService aServ = ServiceBuilder.BuildAnnounceService(); aServ.Release(announce); ViewData["Announce"] = announce; return View("ReleaseSucceed"); } } }?
????? 我們看,它首先新建一個AnnounceInfo類型的實體類,用來存貯這個新的公告的信息。注意它是怎么得到表單信息的,對了,用了 Request.Form["表單名"],這就是獲得表單信息的一種方法,當然還有其他方法,但是我推薦這一種。注意,這里的表單名就是我們使用 Html.***方法生成表單時的名字。
????? OK,下面就是調用業務邏輯組件,完成 400電話 發布公告功能。
????? 但是這里有個問題,我們的業務邏輯組件是Mock的,也就是說其實什么都沒做啊。如果是真的業務邏輯組件,我們可以去數據庫看看有沒有添加公告信息成功,可是這里沒有,我們要怎么證明表單數據傳遞過來了呢?于是我想了一個辦法,有新加了一個ReleaseSucceed視圖,用來顯示新發布公告的信息,以此證明我們確實把表單信息傳過來了。ReleaseSucceed視圖如下:
ReleaseSucceed.aspx:
- <%@?Page?Language= "C#" ?AutoEventWireup= "true" ?CodeBehind= "ReleaseSucceed.aspx.cs" ?Inherits= "MVCDemo.Views.Announce.ReleaseSucceed" ?%> ??
- <%@?Import?Namespace= "MVCDemo.Models.Entities" ?%> ??
- ??
- <!DOCTYPE?html?PUBLIC? "-//W3C//DTD?XHTML?1.0?Transitional//EN" ? "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > ??
- ??
- <html?xmlns= "http://www.w3.org/1999/xhtml" ?> ??
- <head?runat= "server" > ??
- ????<title></title> ??
- </head> ??
- <body> ??
- ????<%?AnnounceInfo?announce?=?ViewData[ "Announce" ]? as ?AnnounceInfo;?%> ??
- ????<div> ??
- ????????<h1>MVC公告發布系統——發布公告成功</h1> ??
- ????????<dl> ??
- ????????????<dt>ID:</dt> ??
- ????????????<dd><%=?announce.ID?%></dd> ??
- ????????????<dt>標題:</dt> ??
- ????????????<dd><%=?announce.Title?%></dd> ??
- ????????????<dt>類別ID:</dt> ??
- ????????????<dd><%=?announce.Category?%></dd> ??
- ????????????<dt>內容:</dt> ??
- ????????????<dd><%=?announce.Content?%></dd> ??
- ????????</dl> ??
- ????</div> ??
- </body> ??
- </html>??
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ReleaseSucceed.aspx.cs" Inherits="MVCDemo.Views.Announce.ReleaseSucceed" %> <%@ Import Namespace="MVCDemo.Models.Entities" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title></title> </head> <body> <% AnnounceInfo announce = ViewData["Announce"] as AnnounceInfo; %> <div> <h1>MVC公告發布系統——發布公告成功</h1> <dl> <dt>ID:</dt> <dd><%= announce.ID %></dd> <dt>標題:</dt> <dd><%= announce.Title %></dd> <dt>類別ID:</dt> <dd><%= announce.Category %></dd> <dt>內容:</dt> <dd><%= announce.Content %></dd> </dl> </div> </body> </html>?
????? 這些代碼就不用我過多解釋了。下面,我們輸入一些信息,提交看看:
小結
????? 通過這四篇文章,我們已經了解了ASP.NET MVC的基本原理,并且已經會呈現數據頁面及傳遞表單數據處理了。會了這些,其實已經可以應付絕大多數主要開發了。從下篇開始,我們接觸一些高級點的內容。下篇將說一下ASP.NET MVC如何與ASP.NET AJAX及JQuery結合,再后面,會講到攔截器及與Silverlight結合的內容。
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
