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)，修改后再次访问，结果以下：