ASP.NETMVC如何实现layui富文本编辑器
这篇“ASP.NET MVC如何实现layui富文本编辑器”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“ASP.NET MVC如何实现layui富文本编辑器”文章吧。
网站建设公司,为您提供网站建设,网站制作,网页设计及定制网站建设服务,专注于企业网站制作,高端网页制作,对雨棚定制等多个行业拥有丰富的网站建设经验的网站建设公司。专业网站设计,网站优化推广哪家好,专业seo优化排名优化,H5建站,响应式网站。
先看看视图层
在视图层,使用的是视图助手--HtmlHelper,代替我们网页中传统的表单标签元素,其中的m代表实体模型。通过视图助手,为我们生成id和name属性相同的textarea标签。
备注:
在ASP.NET MVC中,能提交表单数据的元素(各种类型的input标签,textarea等),其属性name的值于实体模型中的属性名相同时,传递到控制器中的实体模型或参数,会自动进行映射,方便前端到后台的数据传递。
123104 @Html.LabelFor(m=>m.Introduce,new {@class="layui-form-label"}) 596 @Html.TextAreaFor(m=>m.Introduce)@*等同*@ 78
js调用layui的富文本编辑器:
1
以上是前端部分,要想实现在layui富文本编辑器中显示图片,看如下后台代码:
实体结果类.layui的接受的值不支持大写,所以属性全小写,这是根据layui,edit图片上传返回结果来编写的此结果类。
1 using System.Collections.Generic; 2 3 namespace LayuiMvc.Common.Result 4 { 5 public class EditorDataResult 6 { 7 public int code { get; set; } 8 9 public string msg { get; set; } 10 11 public Dictionarydata { get; set; } 12 } 13 }
控制器如下:
要引用的命名空间没展示,只抽取了有关富文本的内容!
1 //富文本编辑器图片上传 2 public ActionResult UploadEditImg(HttpPostedFileBase file) 3 { 4 EditorDataResult editorResult=new EditorDataResult(); 5 if (file!=null&&!string.IsNullOrEmpty(file.FileName)) 6 { 7 string saveAbsolutePath = Server.MapPath("~/CourseImages/EditorImages"); 8 string saveFileName = Guid.NewGuid().ToString("N") + "_" + file.FileName; 9 string fileName = Path.Combine(saveAbsolutePath, saveFileName); 10 file.SaveAs(fileName); 11 editorResult.code = 0; 12 editorResult.msg = "图片上传成功!"; 13 editorResult.data=new Dictionary() 14 { 15 {"src","/CourseImages/EditorImages/"+saveFileName }, 16 {"title","图片名称" } 17 }; 18 } 19 else 20 { 21 editorResult.code = 1; 22 editorResult.msg = "图片上传失败!"; 23 editorResult.data=new Dictionary () 24 { 25 {"src","" } 26 }; 27 } 28 JavaScriptSerializer jss=new JavaScriptSerializer(); 29 string data = jss.Serialize(editorResult);//转换为Json格式! 30 31 return Json(data); 32 }
以上就是关于“ASP.NET MVC如何实现layui富文本编辑器”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注创新互联行业资讯频道。
网页题目:ASP.NETMVC如何实现layui富文本编辑器
文章链接:http://scyanting.com/article/pojihd.html