這篇文章主要講解了“ASP.NET MVC怎么實現(xiàn)layui富文本編輯器應(yīng)用”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“ASP.NET MVC怎么實現(xiàn)layui富文本編輯器應(yīng)用”吧！

專注于為中小企業(yè)提供成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)鹽湖免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了上1000+企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

先看看視圖層

在視圖層,使用的是視圖助手--HtmlHelper,代替我們網(wǎng)頁中傳統(tǒng)的表單標(biāo)簽元素,其中的m代表實體模型。通過視圖助手，為我們生成id和name屬性相同的textarea標(biāo)簽。

備注：

在ASP.NETMVC中，能提交表單數(shù)據(jù)的元素（各種類型的input標(biāo)簽，textarea等），其屬性name的值于實體模型中的屬性名相同時，傳遞到控制器中的實體模型或參數(shù)，會自動進(jìn)行映射，方便前端到后臺的數(shù)據(jù)傳遞。

1<divclass="layui-row">

2<divclass="layui-col-xs12">

3<divclass="layui-form-itemlayui-form-text">

4@Html.LabelFor(m=>m.Introduce,new{@class="layui-form-label"})

5<divclass="layui-input-block">

6@Html.TextAreaFor(m=>m.Introduce)@*<textareaid="Introduce"name="Introduce"></textarea>等同*@

7</div>

8</div>

9</div>

10</div>

js調(diào)用layui的富文本編輯器：

1<scripttype="text/javascript">

2layui.use('layedit',

3function(){

4varlayedit=layui.layedit;

5//配置圖片接口

6//注意：layedit.set一定要放在build前面，否則配置全局接口將無效。

7layedit.set({

8uploadImage:{

9url:'/Course/UploadEditImg'//接口url

10,type:'post'//默認(rèn)post

11}

12});

13//建立富文本編輯器,更多設(shè)置,看layui文檔,這里只是核心要點

14layedit.build('Introduce');//build方法參數(shù)為id所對應(yīng)的值,注意,此處不能加#符號!

15}

16

17</script>

以上是前端部分，要想實現(xiàn)在layui富文本編輯器中顯示圖片，看如下后臺代碼：

實體結(jié)果類.layui的接受的值不支持大寫，所以屬性全小寫，這是根據(jù)layui,edit圖片上傳返回結(jié)果來編寫的此結(jié)果類。

1usingSystem.Collections.Generic;

2

3namespaceLayuiMvc.Common.Result

4{

5publicclassEditorDataResult

6{

7publicintcode{get;set;}

8

9publicstringmsg{get;set;}

10

11publicDictionary<string,string>data{get;set;}

12}

13}

控制器如下：

要引用的命名空間沒展示，只抽取了有關(guān)富文本的內(nèi)容！

1//富文本編輯器圖片上傳

2publicActionResultUploadEditImg(HttpPostedFileBasefile)

3{

4EditorDataResulteditorResult=newEditorDataResult();

5if(file!=null&&!string.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="圖片上傳成功!";

13editorResult.data=newDictionary<string,string>()

14{

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

16{"title","圖片名稱"}

17};

18}

19else

20{

21editorResult.code=1;

22editorResult.msg="圖片上傳失敗!";

23editorResult.data=newDictionary<string,string>()

24{

25{"src",""}

26};

27}

28JavaScriptSerializerjss=newJavaScriptSerializer();

29stringdata=jss.Serialize(editorResult);//轉(zhuǎn)換為Json格式!

30

31returnJson(data);

32}

感謝各位的閱讀，以上就是“ASP.NET MVC怎么實現(xiàn)layui富文本編輯器應(yīng)用”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對ASP.NET MVC怎么實現(xiàn)layui富文本編輯器應(yīng)用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！

當(dāng)前題目：ASP.NETMVC怎么實現(xiàn)layui富文本編輯器應(yīng)用
分享URL：http://www.yijiale78.com/article32/gsojpc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、定制開發(fā)、虛擬主機(jī)、移動網(wǎng)站建設(shè)、網(wǎng)站排名、云服務(wù)器

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)