资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

ASP.NETMVC如何实现layui富文本编辑器

这篇“ASP.NET MVC如何实现layui富文本编辑器”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“ASP.NET MVC如何实现layui富文本编辑器”文章吧。

网站建设公司,为您提供网站建设,网站制作,网页设计及定制网站建设服务,专注于企业网站制作,高端网页制作,对雨棚定制等多个行业拥有丰富的网站建设经验的网站建设公司。专业网站设计,网站优化推广哪家好,专业seo优化排名优化,H5建站,响应式网站。

先看看视图层

在视图层,使用的是视图助手--HtmlHelper,代替我们网页中传统的表单标签元素,其中的m代表实体模型。通过视图助手，为我们生成id和name属性相同的textarea标签。

备注：

在ASP.NET MVC中，能提交表单数据的元素（各种类型的input标签，textarea等），其属性name的值于实体模型中的属性名相同时，传递到控制器中的实体模型或参数，会自动进行映射，方便前端到后台的数据传递。

 1   
 2       
 3            
 4                 @Html.LabelFor(m=>m.Introduce,new {@class="layui-form-label"})
 5                 
 6                  @Html.TextAreaFor(m=>m.Introduce)@*等同*@
 7                 
 8            
 9       
10  

js调用layui的富文本编辑器：

 1 
 2      layui.use('layedit',
 3             function () {
 4                 var layedit=layui.layedit;
 5                  //配置图片接口
 6                 //注意：layedit.set 一定要放在 build 前面，否则配置全局接口将无效。
 7                 layedit.set({
 8                     uploadImage: {
 9                         url: '/Course/UploadEditImg' //接口url
10                         , type: 'post' //默认post
11                     }
12                 });
13                 //建立富文本编辑器,更多设置,看layui文档,这里只是核心要点
14                 layedit.build('Introduce');//build方法参数为id所对应的值,注意,此处不能加#符号!
15             }    
16 
17 

以上是前端部分，要想实现在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 Dictionary data { 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://cdkjz.cn/article/pojihd.html
返回首页 了解更多建站资讯

相关资讯

多年建站经验

多一份参考，总有益处

联系快上网，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

大客户专线   成都：13518219792   座机：028-86922220

在线咨询 提交需求
友情链接 交换友情链接
成都外贸网站建设公司软文营销成都网站建设流程手机app东电技服成都办公窗帘h5响应式网站广安网站建设达州服务器托管成都雨棚定制

成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图