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

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

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

1、建立發表文章視圖模型

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; }
    }
}

2、建立發表文章視圖

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

而後點擊添加便可，將如下代碼刪除

<h2>Create</h2>

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

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

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}", /* 上傳保存路徑,能夠自定義保存路徑和文件名格式 */

4、數據驗證

在接收用戶數據以前，要對用戶輸入數據的合法性進行驗證，必須符合必定的要求才能夠進行提交。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; }
    }

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

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，將不容許提交。

6、測試文章的發表

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

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