asp.netmvc4+EF下使用UEditor

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› ASP.NET›ASP.NET编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

一、从官方网站下载UEditor,http://ueditor.baidu.com/website/download.html,　我下载的是1.53.net版本

二、使用VS2013创建MVC4 工程，添加UEditor到Content下

三、在VS中创建EF，主要model如下

 using System;
    using System.Collections.Generic;
    
    public partial class TestUeditor
    {
        public int id { get; set; }
        public string title { get; set; }
        public string ucontent { get; set; }
    }

四、Home控制器如下代码：

 public class HomeController : Controller
    {
        WzhEntities1 db = new WzhEntities1();
        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        [ValidateInput(false)]
        public ActionResult Index(TestUeditor news)
        {
            if (!ModelState.IsValid)
            {
                  return HttpNotFound();
            }
          
            db.TestUeditors.Add(news);

                db.SaveChanges();
                return Content("ok");
        }

        public ActionResult Edit(int id)
        {
            
            return View(db.TestUeditors.Find(id));
        }
        [HttpPost]
        [ValidateInput(false)]
        public ActionResult Edit(TestUeditor news)
        {
            if (!ModelState.IsValid)
            {
                return HttpNotFound();
            }
            db.Entry(news).State=EntityState.Modified;;
            db.SaveChanges();
            return Content("ok");
        }
        public ActionResult List()
        {
            return View(db.TestUeditors.ToList());
        }
    }

五、Index的view视图：

@{
    ViewBag.Title = "Index";
}
<script src="~/Content/ueditor/ueditor.config.js"></script>
<script src="~/Content/ueditor/ueditor.all.min.js"></script>
<link href="~/Content/ueditor/themes/iframe.css" rel="stylesheet" />
<h2>Index</h2>
@using (Html.BeginForm())
{
    @Html.TextBox("Title")

    <script id="ucontent" name="ucontent">
    </script>

    <input type="submit" value="提交"/>
}
<script type="text/javascript">
    var editorOption = {
        initialFrameWidth: 784,
        initialFrameHeight: 400
    };
    var editor = new baidu.editor.ui.Editor(editorOption);
    editor.render('ucontent');
</script>

Edit视图：

@using System.Net.Http
@model MvcApplication3.Models.TestUeditor

@{
    ViewBag.Title = "Edit";
}
<script src="~/Content/ueditor/ueditor.config.js"></script>
<script src="~/Content/ueditor/ueditor.all.min.js"></script>
<link href="~/Content/ueditor/themes/iframe.css" rel="stylesheet" />
<h2>Edit</h2>

@using (Html.BeginForm(HttpMethod.Post)) {
    @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.ucontent)
        </div>
        <div class="editor-field">
            @Html.TextAreaFor(m => m.ucontent)
            @Html.ValidationMessageFor(model => model.ucontent)
        </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 editorOption = {
        initialFrameWidth: 784,
        initialFrameHeight: 400
    };
    var editor = new baidu.editor.ui.Editor(editorOption);
    editor.render('ucontent');
</script>