标签：
网页编程中在线编辑器的使用还是很重要的，最近研究了一下百度出的UEditor编辑器，把它结合到刚学的asp.netMVC+EF中，同时实现上传资料（包括图片，视频等）功能，下面就以一个最简单的新闻管理为例介绍一下UEditor在MVC4中的使用。
一、下载最新的UEditor版本，下载地址：http://ueditor.baidu.com/website/download.html，如图
二、创建数据库，我使用sqlserver2012，数据库：TestDemo，表：News如下：
USE [TestDemo] GO /****** Object: Table [dbo].[News] Script Date: 2015/5/11 22:06:57 ******/ SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO CREATE TABLE [dbo].[News]( [id] [int] IDENTITY(1,1) NOT NULL, [title] [nvarchar](50) NULL, [content] [nvarchar](max) NULL, CONSTRAINT [PK_News] PRIMARY KEY CLUSTERED ( [id] ASC )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY] ) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY] GO
三、VS2013中创建MVC4网站
四、把下载好的UEditor进行解压，重命名为ueditor，并复制到VS工程下的Content文件夹下
五、创建ＥＦ：
六、如果运行网站中出现如下错误，可删除UEditor文件夹下的Bin中的所有文件即可
七、创建控件器，这里我简单实现一下操作的News的数据表增删改查,如下代码，
public class HomeController : Controller { private TestDemoEntities db = new TestDemoEntities(); // // GET: /Home/ public ActionResult Index() { return View(db.News.ToList()); } // // GET: /Home/Details/5 public ActionResult Details(int id = 0) { News news = db.News.Find(id); if (news == null) { return HttpNotFound(); } return View(news); } // // GET: /Home/Create public ActionResult Create() { return View(); } // // POST: /Home/Create [HttpPost] [ValidateAntiForgeryToken] [ValidateInput(false)] public ActionResult Create(News news) { if (ModelState.IsValid) { db.News.Add(news); db.SaveChanges(); return RedirectToAction("Index"); } return View(news); } // // GET: /Home/Edit/5 public ActionResult Edit(int id = 0) { News news = db.News.Find(id); if (news == null) { return HttpNotFound(); } return View(news); } // // POST: /Home/Edit/5 [HttpPost] [ValidateAntiForgeryToken] [ValidateInput(false)] public ActionResult Edit(News news) { if (ModelState.IsValid) { db.Entry(news).State = EntityState.Modified; db.SaveChanges(); return RedirectToAction("Index"); } return View(news); } // // GET: /Home/Delete/5 public ActionResult Delete(int id = 0) { News news = db.News.Find(id); if (news == null) { return HttpNotFound(); } return View(news); } // // POST: /Home/Delete/5 [HttpPost, ActionName("Delete")] [ValidateAntiForgeryToken] public ActionResult DeleteConfirmed(int id) { News news = db.News.Find(id); db.News.Remove(news); db.SaveChanges(); return RedirectToAction("Index"); } protected override void Dispose(bool disposing) { db.Dispose(); base.Dispose(disposing); }
这里注意保存到数据库的actionresult中加标签 [ValidateInput(false)]，否则浏览网页会报错
八、各种View如下：
１.Index:
@model IEnumerable<NetMVCUEditorDemo.Models.News> @{ ViewBag.Title = "Index"; } <h2>Index</h2> <p> @Html.ActionLink("Create New", "Create") </p> <table> <tr> <th> @Html.DisplayNameFor(model => model.title) </th> <th> @Html.DisplayNameFor(model => model.content) </th> <th></th> </tr> @foreach (var item in Model) { <tr> <td> @Html.DisplayFor(modelItem => item.title) </td> <td> @Html.GetStringByLen(@item.content) </td> <td> @Html.ActionLink("Edit", "Edit", new { id=item.id }) | @Html.ActionLink("Details", "Details", new { id=item.id }) | @Html.ActionLink("Delete", "Delete", new { id=item.id }) </td> </tr> } </table>
Create view:
@model NetMVCUEditorDemo.Models.News @{ ViewBag.Title = "Create"; } <h2>Create</h2> @using (Html.BeginForm()) { @Html.AntiForgeryToken() @Html.ValidationSummary(true) <fieldset> <legend>News</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.content) </div> <div class="editor-field"> @Html.TextAreaFor(model => model.content) @Html.ValidationMessageFor(model => model.content) </div> <p> <input type="submit" value="Create" /> </p> </fieldset> } <div> @Html.ActionLink("Back to List", "Index") </div> @section Scripts { @Scripts.Render("~/bundles/jqueryval") } <script type="text/javascript"> var ue = UE.getEditor(‘content‘); </script>
3.Edit View
@model NetMVCUEditorDemo.Models.News @{ ViewBag.Title = "Edit"; } <h2>Edit</h2> @using (Html.BeginForm()) { @Html.AntiForgeryToken() @Html.ValidationSummary(true) <fieldset> <legend>News</legend> @Html.HiddenFor(model => model.id) <div class="editor-label"> @Html.LabelFor(model => model.title) </div> <div class="editor-field"> @Html.EditorFor(model => model.title) @Html.ValidationMessageFor(model => model.title) </div> <div class="editor-label"> @Html.LabelFor(model => model.content) </div> <div class="editor-field"> @Html.TextAreaFor((model) => model.content) @Html.ValidationMessageFor(model => model.content) </div> <p> <input type="submit" value="Save" /> </p> </fieldset> } <div> @Html.ActionLink("Back to List", "Index") </div> @section Scripts { @Scripts.Render("~/bundles/jqueryval") } <script type="text/javascript"> var ue = UE.getEditor(‘content‘); </script>
4.Details
@model NetMVCUEditorDemo.Models.News @{ ViewBag.Title = "Details"; } <h2>Details</h2> <fieldset> <legend>News</legend> <div class="display-label"> @Html.DisplayNameFor(model => model.title) </div> <div class="display-field"> @Html.DisplayFor(model => model.title) </div> <div class="display-label"> @Html.DisplayNameFor(model => model.content) </div> <div class="display-field"> @Html.Raw(@Model.content) </div> </fieldset> <p> @Html.ActionLink("Edit", "Edit", new { id=Model.id }) | @Html.ActionLink("Back to List", "Index") </p>
5.Delete View
@model NetMVCUEditorDemo.Models.News @{ ViewBag.Title = "Delete"; } <h2>Delete</h2> <h3>Are you sure you want to delete this?</h3> <fieldset> <legend>News</legend> <div class="display-label"> @Html.DisplayNameFor(model => model.title) </div> <div class="display-field"> @Html.DisplayFor(model => model.title) </div> <div class="display-label"> @Html.DisplayNameFor(model => model.content) </div> <div class="display-field"> @Html.Raw(@Model.content) </div> </fieldset> @using (Html.BeginForm()) { @Html.AntiForgeryToken() <p> <input type="submit" value="Delete" /> | @Html.ActionLink("Back to List", "Index") </p> }
在使用UEditor编辑器的网页中添加js引用 ：
<script src="~/Content/ueditor/ueditor.config.js"></script>
<script src="~/Content/ueditor/ueditor.all.min.js"></script>
我使用模板，所以上面两句添加到了_Layout.cshtml模板中了：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
<script src="~/Content/ueditor/ueditor.config.js"></script>
<script src="~/Content/ueditor/ueditor.all.min.js"></script>
</head>
<body>
@RenderBody()
@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)
</body>
</html>
九、最后一项，修改 UEditor编辑器上传图片或文件等资源的路径
修改此文件中所有UrlPrefix的路径，添加/Content/，这是资源访问的路径，由于我们把ueditor编辑器放在了Content文件下，所以要改。
现在已完成所有修改。
源码下载：
UEditor在asp.netMVC4中的使用，包括上传功能
标签：
原文地址：http://www.cnblogs.com/lunawzh/p/4496757.html
