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

This article mainly explains "ASP.NET MVC how to achieve layui rich text editor application", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "ASP.NET MVC how to achieve layui rich text editor application" bar!

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.

Remarks:

In ASP.NETMVC, 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.

one

two

three

4@Html.LabelFor (m = > m.IntroduceJ. New {@ class= "layui-form-label"})

five

6@Html.TextAreaFor (m = > m.Introduce) @ * is equivalent to * @

seven

eight

nine

ten

Js calls layui's rich text editor:

one

2layui.use ('layedit'

3function () {

4varlayedit=layui.layedit

5Universe / configure picture interface

6 layedit.set / Note: the layedit.set must be placed in front of the build, otherwise the configuration of the global interface will be invalid.

7layedit.set ({

8uploadImage: {

9url:'/Course/UploadEditImg'// interface url

10 post type.It is a default post.

11}

12})

13max / build a rich text editor, more settings, check out the layui documentation, this is just the core point

The parameter of 14layedit.build ('Introduce'); / / build method is the value corresponding to id. Note that you cannot add a # symbol here!

15}

sixteen

seventeen

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.

1usingSystem.Collections.Generic

two

3namespaceLayuiMvc.Common.Result

4 {

5publicclassEditorDataResult

6 {

7publicintcode {get;set;}

eight

9publicstringmsg {get;set;}

ten

11publicDictionarydata {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!

1Universe / Rich text Editor Picture upload

2publicActionResultUploadEditImg (HttpPostedFileBasefile)

3 {

4EditorDataResulteditorResult=newEditorDataResult ()

5if (fileholders filled with empty strings. IsNullOrEmpty (file.FileName))

6 {

7stringsaveAbsolutePath=Server.MapPath ("~ / CourseImages/EditorImages")

8stringsaveFileName=Guid.NewGuid () .ToString ("N") + "_" + file.FileName

9stringfileName=Path.Combine (saveAbsolutePath,saveFileName)

10file.SaveAs (fileName)

11editorResult.code=0

12editorResult.msg= "Picture uploaded successfully!"

13editorResult.data=newDictionary ()

14 {

15 {"src", "/ CourseImages/EditorImages/" + saveFileName}

16 {"title", "picture name"}

17}

18}

19else

20 {

21editorResult.code=1

22editorResult.msg= "Picture upload failed!"

23editorResult.data=newDictionary ()

24 {

25 {"src", ""}

26}

27}

28JavaScriptSerializerjss=newJavaScriptSerializer ()

29stringdata=jss.Serialize (editorResult); / / convert to Json format!

thirty

31returnJson (data)

32}

Thank you for reading, the above is the content of "ASP.NET MVC how to achieve layui rich text editor application". After the study of this article, I believe you have a deeper understanding of how ASP.NET MVC realizes the layui rich text editor application, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.