ASP.NET MVC 2.0之添加操作
關于ASP.NET MVC框架,51CTO-.NET頻道向您推薦,本系列文章還包括
***篇《ASP.NET MVC 2.0之MVC框架簡介》
第二篇《ASP.NET MVC 2.0之如何運行WEB應用》
創(chuàng)建數(shù)據(jù)模型Model
數(shù)據(jù)模型主要包括數(shù)據(jù)信息、驗證規(guī)則以及業(yè)務邏輯。
創(chuàng)建Model的方式有多種,可以使用微軟的ADO.NET Entity Data Model,也可以使用第三方工具生成實體對象,對于比較簡單的實體,我們可以手工添加,此處就是手動敲上去的。

分析:此處定義了新聞實體對象的的一些屬性,在每個Property上都存在一些注解,比如字段Title上RequiredAttribute,表明Title欄位是必填字段,如果不填寫會顯示錯誤信息”請輸入標題!”
DataTypeAttribute屬性表明此字段的數(shù)據(jù)類型為文本類型,它是個枚舉類型集合,如下:
| 
             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的向導工具,很方便的,如下圖流程步驟:我們在View文件夾下,新建一個新文件夾,命名為News
右擊News文件夾,選擇Add->Add View功能菜單,出現(xiàn)如下界面:

在View name欄位,我可以給此視圖修改名稱,比如AddNews,
選中Create a strongly-typed view 欄位,選擇剛才定義的實體類Model,并選擇View content欄位為Create操作。
其他欄位默認值就OK
最終效果如下圖所示:

單擊【Add】按鈕,即可添加AddNews.aspx視圖成功。此文件的核心代碼如下所示:
- <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
 - <h2>
 - 添¬¨ª加¨®新?聞?</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="添¬¨ª加¨®" />
 - </p>
 - </fieldset>
 - <% } %>
 - <div>
 - <%: Html.ActionLink("Back to List", "Index","Home") %>
 - </div>
 - </asp:Content>
 
分析:
在日期文本框中,新增加屬性new { @class = "date" }),此Class屬性是為了稍后的日歷控件的顯示。要使日期文本框顯示日期控件,可以使用Jquery UI,方法是:
1、Jquery UI官方網站http://www.jqueryUI.com下載***的 UI類庫
2、添加日歷控件的CSS文件和JS文件到項目中,如下圖

3、在母版頁面Site.Master中添加JS的引用,以及頁面初始化時綁定日歷控件到文本框,代碼如下:
- <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,同時選擇下方的復選框,最終效果如下圖:

單擊【Add】按鈕,自動產生Controller中的一些方法,這時候對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("", "請?輸º?入¨?合?法¤¡§的Ì?信?息¡é!ê?");
 - }
 - return View(news);
 - }
 
至此,MVC的各個層次都已經創(chuàng)建完,讓我們看看最終的效果吧。
程序效果圖


原文標題:Asp.net MVC2.0系列文章-添加操作
鏈接:http://www.cnblogs.com/ywqu/archive/2010/06/24/1764062.html
【編輯推薦】















 
 
 

 
 
 
 