關(guān)于ASP.NET MVC框架，51CTO-.NET頻道向您推薦，本系列文章還包括

***篇《ASP.NET MVC 2.0之MVC框架簡(jiǎn)介》

第二篇《ASP.NET MVC 2.0之如何運(yùn)行WEB應(yīng)用》

[[12204]]

創(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ì)于比較簡(jiǎn)單的實(shí)體，我們可以手工添加，此處就是手動(dòng)敲上去的。                                                        

分析：此處定義了新聞實(shí)體對(duì)象的的一些屬性，在每個(gè)Property上都存在一些注解，比如字段Title上RequiredAttribute，表明Title欄位是必填字段，如果不填寫(xiě)會(huì)顯示錯(cuò)誤信息”請(qǐng)輸入標(biāo)題！”

DataTypeAttribute屬性表明此字段的數(shù)據(jù)類(lèi)型為文本類(lèi)型，它是個(gè)枚舉類(lèi)型集合，如下： 

這些類(lèi)型，可以分別試試，看看最終效果什么樣子的。DisplayNameAttribute屬性表明了此字段要文字說(shuō)明。

創(chuàng)建View視圖

MVC提供了生成View的向?qū)Чぞ?，很方便的，如下圖流程步驟：我們?cè)赩iew文件夾下，新建一個(gè)新文件夾，命名為News

右擊News文件夾，選擇Add->Add View功能菜單，出現(xiàn)如下界面：

在View name欄位，我可以給此視圖修改名稱，比如AddNews，

選中Create a strongly-typed view 欄位，選擇剛才定義的實(shí)體類(lèi)Model，并選擇View content欄位為Create操作。

其他欄位默認(rèn)值就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官方網(wǎng)站http://www.jqueryUI.com下載***的 UI類(lèi)庫(kù)

2、添加日歷控件的CSS文件和JS文件到項(xiàng)目中，如下圖

3、在母版頁(yè)面Site.Master中添加JS的引用，以及頁(yè)面初始化時(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ū)ontroller中的方法做一些修改，即可完成添加新聞頁(yè)面初始化的方法，以及添加新聞功能，代碼如下：

// GET: /News/Create  
//完成頁(yè)面初始化  
        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)?輸º?入¨?合?法¤¡§的Ì?信?息¡é！ê?");  
            }  
            return View(news);  
        } 

至此，MVC的各個(gè)層次都已經(jīng)創(chuàng)建完，讓我們看看最終的效果吧。

程序效果圖

原文標(biāo)題：Asp.net MVC2.0系列文章-添加操作

鏈接：http://www.cnblogs.com/ywqu/archive/2010/06/24/1764062.html

【編輯推薦】

1. 添加設(shè)置ASP.NET Web時(shí)出現(xiàn)問(wèn)題
2. 詳細(xì)說(shuō)明ASP.NET 2.0功能支持
3. 強(qiáng)化部署ASP.Net 2.0配置應(yīng)用程序
4. 微軟PDC2009直擊：改進(jìn)ASP.NET 4運(yùn)行時(shí)
5. 詳解ASP.NET MVC 2自定義驗(yàn)證