码迷,mamicode.com
首页 > Web开发 > 详细

asp.net mvc4+EF 下使用UEditor

时间:2015-05-11 19:33:43      阅读:169      评论:0      收藏:0      [点我收藏+]

标签:

一、从官方网站下载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>

完成

技术分享

 

asp.net mvc4+EF 下使用UEditor

标签:

原文地址:http://www.cnblogs.com/lunawzh/p/4495200.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!