ASP.NET入門教程（五）發表文章

ASP.NET入門教程（五）發表文章

本部分主要學習文章的發表、表單數據驗證、百度富文本編輯器的使用。

一、創建發表文章視圖模型

1. 在Models文件夾下，新建ArticleCreateViewModel類，內容如下：

using System.ComponentModel.DataAnnotations;

namespace MyStudy.Models
{
    public class ArticleCreateViewModel
    {
        [Display(Name ="文章標題")]
        public string title { get; set; }

        [Display(Name ="作者")]
        public string author { get; set; }

        [Display(Name ="文章內容")]
        public string content { get; set; }
    }
}

二、創建發表文章視圖

1.在Article控制器的第一個Create方法中，右鍵點擊，添加視圖

然後點擊添加即可，將以下代碼刪除

<h2>Create</h2>

 <h4>ArticleCreateViewModel</h4>
        <hr />

三、百度富文本編輯器的使用

1.從百度官網下載富文本編輯器

http://ueditor.baidu.com/website/

2.解壓文件，將其中的utf8-net文件夾複製到項目的根目錄下（注意一定要是根目錄下），複製後，將無法看到其中的文件，

然後點擊（顯示所有文件），顯示所有文件，選中utf8-net下所有的文件與文件夾，右鍵點擊，選擇包括在項目中，即可。

3.修改視圖頁，使用富文本編輯器

修改以下代碼

<div class="form-group">
            @Html.LabelFor(model => model.content, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.content, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.content, "", new { @class = "text-danger" })
            </div>
        </div>

修改後的結果如下所示：

<div class="form-group">
            @Html.LabelFor(model => model.content, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextAreaFor(model=>model.content)
                @Html.ValidationMessageFor(model => model.content, "", new { @class = "text-danger" })
            </div>
        </div>

添加如下JS代碼

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    <script src="~/utf8-net/ueditor.config.js"></script>
    <script src="~/utf8-net/ueditor.all.js"></script>
    <script>
        $(function () {
            var editor = new baidu.editor.ui.Editor({
                autoHeightEnabled:true
            });
            editor.render('content');
        });
    </script>
}

  完成後頁面效果如下所示

4.配置富文本編輯器，修改其圖像上傳等功能。

修改ueditor.config.js文件，修改內容如下

* 因此，UEditor提供了針對不同頁面的編輯器可單獨配置的根路徑，具體來說，在需要實例化編輯器的頁面最頂部寫上如下代碼即可。當然，需要令此處的URL等於對應的配置。
     * window.UEDITOR_HOME_URL = "/xxxx/xxxx/";
     */
    window.UEDITOR_HOME_URL = "/utf8-net/";
    var URL = window.UEDITOR_HOME_URL || getUEBasePath();

修改net下的 config.js文件

將其中的imageUrlPrefix”:修改爲/utf8-net/net即可
"imageUrlPrefix": "/utf8-net/net/", /* 圖片訪問路徑前綴 */
    "imagePathFormat": "upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳保存路徑,可以自定義保存路徑和文件名格式 */

四、數據驗證

在接收用戶數據之前，要對用戶輸入數據的合法性進行驗證，必須符合一定的要求纔可以進行提交。ASP.NET MVC框架提供了強大的驗證組件幫助我們完成這項工作。

1.數據驗證概述

ASP.NET MVC驗證註解特性定義在命名空間System.ComponentModel.DataAnnotations中，它們提供了服務器端驗證的功能，當在模型的屬性上使用時，框架也支持客戶端驗證。

如果採用Database-First方式生成的*.edmx，那麼所生成的類文件會在“*.tt“文件的層級之下，T4是一種用程序代碼生成程序代碼的技術。當"*.edmx"有所變動時（例如，執行“從數據庫更新模型”）並存儲時，會重新生成T4文件，一旦T4文件被變動便會立即執行T4程序代碼重新生成所有文件的內容。因此直接在T4模板生成的實體類文件上添加註解，是不可行的。可以使用部分類的方式。本實例中並未使用部分類，請參考其它相關教程。

2.常用註解

在使用之前，要引入"System.ComponentModel.DataAnnotations"命名空間

3.在ArticleCreateViewModel下配置如下：

 public class ArticleCreateViewModel
    {
        [Display(Name ="文章標題")]
        [Required(ErrorMessage ="文章標題不能爲空")]
        [MinLength(6,ErrorMessage ="文章標題不能少於6個字符")]
        [MaxLength(30,ErrorMessage ="文章標題不能超過30個字符")]
        public string title { get; set; }

        [Display(Name ="作者")]
        [Required(ErrorMessage = "作者不能爲空")]
        [MaxLength(30, ErrorMessage = "作者名不能超過20個字符")]
        public string author { get; set; }

        [Display(Name ="文章內容")]
        [Required(ErrorMessage ="文章內容不能爲空")]
        public string content { get; set; }
    }

五、接收表單的數據，並保存到數據庫中

1.修改[HttpPost]註解的Create方法

 [HttpPost]
        [ValidateAntiForgeryToken]
        [ValidateInput(false)]
        public ActionResult Create(ArticleCreateViewModel article)
        {
            if (ModelState.IsValid)
            {
                tb_article tArticle = new tb_article();
                tArticle.Name = article.title;
                tArticle.Author = article.author;
                tArticle.Content = article.content;
                tArticle.PublishDate = DateTime.Now;

                db.tb_article.Add(tArticle);
                db.SaveChanges();

                return RedirectToAction("Index");
            }
            return View(article);
        }

2.說明

[HttpPost]註解表示該方法僅處理HttpPost請求

[ValidateAntiForgeryToken]表示阻止僞造的表單請求，與頁面中的@Html.AntiForgeryToken()共同使用，通過該特性，可以防止跨站攻擊，即用戶僞造表單
[ValidateInput(false)]：表示驗證輸入的操作，設置爲false即爲不驗證輸入，因爲我們在前端使用了百度富文本編輯器，用戶輸入的文本內容，會被編碼成HTML代碼，如果不設置爲false，將不允許提交。

六、測試文章的發表

但是瀏覽時發現文章的內容頁是這樣的，顯示的是HTML編碼，現在來修改內容頁，使其可以呈現輸出HTML編碼。

將@Model.Content該內容修改爲@Html.Raw(Model.Content)，修改後再次訪問，結果如下：