此篇文章，我們將實(shí)現(xiàn)MVC2.0的添加操作，主要包括Model的創(chuàng)建、View的Edit操作和Control的Create操作。
創(chuàng)建數(shù)據(jù)模型Model
數(shù)據(jù)模型主要包括數(shù)據(jù)信息、驗(yàn)證規(guī)則以及業(yè)務(wù)邏輯。
創(chuàng)建Model的方式有多種,可以使用微軟的ADO.NET Entity Data Model，也可以使用第三方工具生成實(shí)體對(duì)象，對(duì)于比較簡單的實(shí)體，我們可以手工添加，此處就是手動(dòng)敲上去的。
分析：此處定義了新聞實(shí)體對(duì)象的的一些屬性，在每個(gè)Property上都存在一些注解，比如字段Title上RequiredAttribute，表明Title欄位是必填字段，如果不填寫會(huì)顯示錯(cuò)誤信息”請(qǐng)輸入標(biāo)題！”
DataTypeAttribute屬性表明此字段的數(shù)據(jù)類型為文本類型，它是個(gè)枚舉類型集合，如下：
Member name | Description |
Custom | Represents a custom data type. |
DateTime | Represents an instant in time, expressed as a date and time of day. |
Date | Represents a date value. |
Time | Represents a time value. |
Duration | Represents a continuous time during which an object exists. |
PhoneNumber | Represents a phone number value. |
Currency | Represents a currency value. |
Text | Represents text that is displayed. |
Html | Represents an HTML file. |
MultilineText | Represents multi-line text. |
EmailAddress | Represents an e-mail address. |
Password | Represent a password value. |
Url | Represents a URL value. |
ImageUrl | Represents a URL to an image. |
這些類型，可以分別試試，看看最終效果什么樣子的。
DisplayNameAttribute屬性表明了此字段要文字說明。
創(chuàng)建View視圖
MVC提供了生成View的向?qū)Чぞ?，很方便的，如下圖流程步驟：
我們?cè)?/span>View文件夾下，新建一個(gè)新文件夾，命名為News
右擊News文件夾，選擇Add->Add View功能菜單，出現(xiàn)如下界面：
在View name欄位，我可以給此視圖修改名稱，比如AddNews，
選中Create a strongly-typed view 欄位，選擇剛才定義的實(shí)體類Model，并選擇View content欄位為Create操作。
其他欄位默認(rèn)值就OK
最終效果如下圖所示：
單擊【Add】按鈕，即可添加AddNews.aspx視圖成功。此文件的核心代碼如下所示：
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <h2> 添?¨a加¨?新?聞?</h2> <% using (Html.BeginForm()) {%> <%: Html.ValidationSummary(true) %> <fieldset> <legend>新?聞?</legend> <div class="editor-label"> <%: Html.LabelFor(model => model.Title) %> </div> <div class="editor-field"> <%: Html.TextBoxFor(model => model.Title) %> <%: Html.ValidationMessageFor(model => model.Title) %> </div> <div class="editor-label"> <%: Html.LabelFor(model => model.CreateTime) %> </div> <div class="editor-field"> <%: Html.TextBoxFor(model => model.CreateTime, new { @class = "date"})%> <%: Html.ValidationMessageFor(model => model.CreateTime) %> </div> <div class="editor-label"> <%: Html.LabelFor(model => model.Content) %> </div> <div class="editor-field"> <%: Html.EditorFor(model => model.Content) %> <%: Html.ValidationMessageFor(model => model.Content) %> </div> <p> <input type="submit" value="添?¨a加¨?" /> </p> </fieldset> <% } %> <div> <%: Html.ActionLink("Back to List", "Index","Home") %> </div> </asp:Content> |
分析：
在日期文本框中，新增加屬性new { @class = "date" })，此Class屬性是為了稍后的日歷控件的顯示。要使日期文本框顯示日期控件，可以使用Jquery UI，方法是：
1/、Jquery UI官方網(wǎng)站http://www.jqueryUI.com下載最新的 UI類庫
2、添加日歷控件的CSS文件和JS文件到項(xiàng)目中，如下圖
3、在母版頁面Site.Master中添加JS的引用，以及頁面初始化時(shí)綁定日歷控件到文本框，代碼如下：
<link href="http://www.cnblogs.com/Content/jquery.ui.all.css" rel="stylesheet"type="text/css" /> <script src="http://www.cnblogs.com/Scripts/jquery-1.4.1.min.js"type="text/javascript"></script> <script src="http://www.cnblogs.com/Scripts/jquery-ui-1.8.2.custom.min.js"type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { $("input:text.date").datepicker( { dateFormat: "yy-mm-dd" }); }); </script> |
到此，日歷欄位的文本框就可以顯示日歷控件了，稍后看效果圖。
創(chuàng)建Controller文件
在Controllers文件夾下，新增News文件夾；
單擊右鍵，選擇Add->Controller，顯示如下界面
重命名Controller Name欄位為NewsController，同時(shí)選擇下方的復(fù)選框，最終效果如下圖：
單擊【Add】按鈕，自動(dòng)產(chǎn)生Controller中的一些方法，這時(shí)候?qū)?/span>Controller中的方法做一些修改，即可完成添加新聞頁面初始化的方法，以及添加新聞功能，代碼如下：
// GET: /News/Create //完成頁面初始化 public ActionResult AddNews() { return View(); } // // POST: /News/Create //完成添加按鈕事件 [HttpPost] public ActionResult AddNews(THelperMVC.Models.News.AddNewsModel news) { if (ModelState.IsValid) { newsService.AddNews(); return RedirectToAction("index", "Home"); } else { ModelState.AddModelError("", "請(qǐng)?輸o?入¨?合?法¤?§的ì?信?息?é！ê?"); } return View(news); } |
至此，MVC的各個(gè)層次都已經(jīng)創(chuàng)建完，讓我們看看最終的效果吧。
程序效果圖
