ASP.NET MVC引入JQUERY JQRTE控件

原創

2020-07-07 09:10

經過將近兩週的努力，終於將JQUERY的JQRTE文本編輯器控件引入到了asp.net mvc框架中，主要步驟如下：

1,在asp.net mvc項目中引入jqrte類庫，聲明輔助類用於存儲服務器端上載文件的信息

public class ViewDataUploadFilesResult { public string message { get; set; } //public int Length { get; set; } public string imagepath { get; set; } public string error { get; set; } }

2，編寫處理文件上載服務器段代碼，並將上載的文件信息返回給客戶端，代碼如下：

[AcceptVerbs(HttpVerbs.Post)] public JsonResult UploadFiles(FormCollection collection) { var r = new ViewDataUploadFilesResult(); foreach (string file in Request.Files) { string url = Request.Url.Authority; url = "http://" + url; HttpPostedFileBase hpf = Request.Files[file] as HttpPostedFileBase; string date = DateTime.Now.Date.ToShortDateString(); string path = Path.Combine( AppDomain.CurrentDomain.BaseDirectory, "Content"); string datePath = Path.Combine(path,date); Directory.CreateDirectory(datePath); url += "/Content/"; url += date; url += "/"; url += Path.GetFileName(hpf.FileName); if (hpf.ContentLength == 0) continue; string savedFileName = Path.Combine( datePath, Path.GetFileName(hpf.FileName)); try { hpf.SaveAs(savedFileName); } catch (Exception e) { r.error = e.ToString(); } //r.Name = savedFileName; //r.Length = hpf.ContentLength; r.imagepath = url; r.message = "ok"; r.error = "ok"; //r.Add(new ViewDataUploadFilesResult() //{ // Name = savedFileName, // Length = hpf.ContentLength //}); } JsonResult jsonResult = Json(r); jsonResult.ContentType = "text/html"; return jsonResult; }

之所以搞了這麼長時間，問題也主要出在這兒，開始用的是return json(r),發現jquery的回調函數總是無法獲得服務器端的json，反而會跳出個下載文件對話框，反覆閱讀jquery的源代碼，折磨了一週多後，在asp.net mvc官方論壇上註冊了個用戶，經過一番討論，最後發現對於有file控件的ajax form，在action方法中應當制定json的contentType纔會正確處理json對象，源代碼如上，感謝熱心朋友的幫助，要不然不知道這個問題會折磨到我什麼時候（已經好幾天睡不好覺了：()。原貼鏈接如下：http://forums.asp.net/t/1439867.aspx

3.修改jqrte的fileupload源代碼，只要改一下action路徑就行，在jquery.jqrte.min.js中修改uploads函數：

增加和修改的代碼如下： var path = window.location.href.replace(/editor/, "UploadFiles"); // alert(path); $.jQRTE.ajaxFileUpload({ url: path, secureuri: false, fileElementId: "upload" + uid + "_fileToUpload", dataType: "json",

4，準備編輯器頁面，原代碼如下：

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
	editor
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <link rel="stylesheet" type="text/css" href="css/jqframework.css" mce_href="css/jqframework.css"/>
    
 
    <link rel="Stylesheet" type="text/css" href="../../Scripts/jqrte/css/jqrte.css" mce_href="Scripts/jqrte/css/jqrte.css" />
    <link type="text/css" href="../../Scripts/jqrte/css/jqpopup.css" mce_href="Scripts/jqrte/css/jqpopup.css" rel="Stylesheet"/>
    <link rel="stylesheet" href="../../Scripts/jqrte/css/jqcp.css" mce_href="Scripts/jqrte/css/jqcp.css" type="text/css"/>

<mce:script type="text/javascript" src="../../Scripts/jqrte/js/jqDnR.min.js" mce_src="Scripts/jqrte/js/jqDnR.min.js"></mce:script>
    <mce:script type="text/javascript" src="../../Scripts/jqrte/js/jquery.bgiframe.min.js" mce_src="Scripts/jqrte/js/jquery.bgiframe.min.js"></mce:script>
    <mce:script type="text/javascript" src="../../Scripts/jqrte/js/jquery.jqcp.min.js" mce_src="Scripts/jqrte/js/jquery.jqcp.min.js"></mce:script>
    <mce:script type="text/javascript" src="../../Scripts/jqrte/js/jquery.jqpopup.min.js" mce_src="Scripts/jqrte/js/jquery.jqpopup.min.js"></mce:script>
    <mce:script type="text/javascript" src="../../Scripts/jqrte/js/jquery.jqrte.min.js" mce_src="Scripts/jqrte/js/jquery.jqrte.min.js"></mce:script>
    <h2>editor</h2>
    <div id="demo">
      <textarea id="demo1" name="demo1" class="jqrte_popup" rows="5" cols="5" >rich text editor with <b>Content</b>