Shulou(Shulou.com)06/01 Report--

This "ASP.NET MVC how to achieve layui rich text editor" article knowledge points most people do not understand, so the editor summarized the following content, detailed, clear steps, with a certain reference value, I hope you can read this article can have a harvest, let's take a look at this "ASP.NET MVC how to achieve layui rich text editor" article it.

Take a look at the view layer first

In the view layer, the view helper, HtmlHelper, is used to replace the traditional form tag elements in our web pages, where m represents the entity model. Through the view assistant, generate textarea tags for us with the same id and name attributes.

Note:

In ASP.NET MVC, elements that can submit form data (various types of input tags, textarea, etc.) whose attribute name value is the same as the attribute name in the entity model, and the entity model or parameters passed to the controller will be automatically mapped to facilitate the data transmission from the front end to the background.

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

Js calls layui's rich text editor:

1 2 layui.use ('layedit', 3 function () {4 var layedit=layui.layedit; 5 / / configure picture interface 6 / / Note: layedit.set must be placed in front of build, otherwise the configuration of the global interface will be invalid. 7 layedit.set ({8 uploadImage: {9 url:'/ Course/UploadEditImg' / / interface url10, type: 'post' / / default post11} 12}) 13 / / set up a rich text editor, more settings, see the layui document, here is only the core point 14 layedit.build ('Introduce'); / / the build method parameter is the value corresponding to id, note that the # symbol cannot be added here! 15} 16 17

The above is the front-end part. To display the image in the layui rich text editor, look at the following background code:

The accepted value of the entity result class .layui does not support uppercase, so the attribute is all lowercase, which is written based on the results returned by uploading layui,edit images.

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}

The controller is as follows:

The namespace to be referenced is not shown, only the content about the rich text is extracted!

1 / / Rich text editor Picture upload 2 public ActionResult UploadEditImg (HttpPostedFileBase file) 3 {4 EditorDataResult editorResult=new EditorDataResult (); 5 if (fileholders loaded nullable images containing strings. 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 fileName 12 editorResult.msg = "picture uploaded successfully!" 13 editorResult.data=new Dictionary () 14 {15 {"src", "/ CourseImages/EditorImages/" + saveFileName}, 16 {"title", "picture name"} 17}; 18} 19 else20 {21 editorResult.code = 1 22 editorResult.msg = "Picture upload failed!"; 23 editorResult.data=new Dictionary () 24 {25 {"src", ""} 26}; 27} 28 JavaScriptSerializer jss=new JavaScriptSerializer (); 29 string data= jss.Serialize (editorResult) / / convert to Json format! 30 31 return Json (data); 32} the above is about "how ASP.NET MVC implements layui Rich text Editor". I believe you all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about it, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.