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