中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

ASP.NET MVC如何實現layui富文本編輯器

發布時間:2022-03-23 11:04:44 來源:億速云 閱讀:182 作者:iii 欄目:web開發

這篇“ASP.NET MVC如何實現layui富文本編輯器”文章的知識點大部分人都不太理解,所以小編給大家總結了以下內容,內容詳細,步驟清晰,具有一定的借鑒價值,希望大家閱讀完這篇文章能有所收獲,下面我們一起來看看這篇“ASP.NET MVC如何實現layui富文本編輯器”文章吧。

先看看視圖層

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

備注:

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

 1   <div class="layui-row">
 2       <div class="layui-col-xs12">
 3            <div class="layui-form-item layui-form-text">
 4                 @Html.LabelFor(m=>m.Introduce,new {@class="layui-form-label"})
 5                 <div class="layui-input-block">
 6                  @Html.TextAreaFor(m=>m.Introduce)@*<textarea id="Introduce" name="Introduce"></textarea>等同*@
 7                 </div>
 8            </div>
 9       </div>
10  </div>

js調用layui的富文本編輯器:

 1 <script type="text/javascript">
 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 </script>

以上是前端部分,要想實現在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<string,string> 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<string, string>()
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<string, string>()
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富文本編輯器”這篇文章的內容,相信大家都有了一定的了解,希望小編分享的內容對大家有幫助,若想了解更多相關的知識內容,請關注億速云行業資訊頻道。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

五指山市| 攀枝花市| 彭阳县| 潍坊市| 吉木萨尔县| 麦盖提县| 公安县| 伊春市| 特克斯县| 清流县| 北票市| 崇左市| 昭苏县| 南昌县| 富源县| 阜康市| 绥中县| 睢宁县| 安阳县| 云浮市| 武隆县| 贞丰县| 马关县| 札达县| 阿图什市| 寻甸| 南木林县| 个旧市| 会宁县| 永昌县| 凤庆县| 岑溪市| 靖宇县| 深水埗区| 亚东县| 崇义县| 崇文区| 白玉县| 灌南县| 慈利县| 通化县|