ASP.NET MVC引入JQUERY JQRTE控件

主要步驟如下：
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),發(fā)現jquery的回調函數總是無法獲得服務器端的json，反而會跳出個下載文件對話框，反復閱讀jquery的源代碼，折磨了一周多后，在asp.net mvc官方論壇上注冊了個用戶，經過一番討論，最后發(fā)現對于有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" href="css/jqframework.css"/> 
<!--[if IE]><link rel="stylesheet" type="text/css" href="css/ie-only.css" href="css/ie-only.css" /><![endif]--> 
<link rel="Stylesheet" type="text/css" href="../../Scripts/jqrte/css/jqrte.css" href="Scripts/jqrte/css/jqrte.css" /> 
<link type="text/css" href="../../Scripts/jqrte/css/jqpopup.css" href="Scripts/jqrte/css/jqpopup.css" rel="Stylesheet"/> 
<link rel="stylesheet" href="../../Scripts/jqrte/css/jqcp.css" href="Scripts/jqrte/css/jqcp.css" type="text/css"/> 
<script type="text/javascript" src="../../Scripts/jqrte/js/jqDnR.min.js" src="Scripts/jqrte/js/jqDnR.min.js"></script> 
<script type="text/javascript" src="../../Scripts/jqrte/js/jquery.bgiframe.min.js" src="Scripts/jqrte/js/jquery.bgiframe.min.js"></script> 
<script type="text/javascript" src="../../Scripts/jqrte/js/jquery.jqcp.min.js" src="Scripts/jqrte/js/jquery.jqcp.min.js"></script> 
<script type="text/javascript" src="../../Scripts/jqrte/js/jquery.jqpopup.min.js" src="Scripts/jqrte/js/jquery.jqpopup.min.js"></script> 
<script type="text/javascript" src="../../Scripts/jqrte/js/jquery.jqrte.min.js" src="Scripts/jqrte/js/jquery.jqrte.min.js"></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> 
<%@ 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" href="css/jqframework.css"/> 
<!--[if IE]><link rel="stylesheet" type="text/css" href="css/ie-only.css" href="css/ie-only.css" /><![endif]--> 
<link rel="Stylesheet" type="text/css" href="../../Scripts/jqrte/css/jqrte.css" href="Scripts/jqrte/css/jqrte.css" /> 
<link type="text/css" href="../../Scripts/jqrte/css/jqpopup.css" href="Scripts/jqrte/css/jqpopup.css" rel="Stylesheet"/> 
<link rel="stylesheet" href="../../Scripts/jqrte/css/jqcp.css" href="Scripts/jqrte/css/jqcp.css" type="text/css"/> 
<script type="text/javascript" src="../../Scripts/jqrte/js/jqDnR.min.js" src="Scripts/jqrte/js/jqDnR.min.js"></script> 
<script type="text/javascript" src="../../Scripts/jqrte/js/jquery.bgiframe.min.js" src="Scripts/jqrte/js/jquery.bgiframe.min.js"></script> 
<script type="text/javascript" src="../../Scripts/jqrte/js/jquery.jqcp.min.js" src="Scripts/jqrte/js/jquery.jqcp.min.js"></script> 
<script type="text/javascript" src="../../Scripts/jqrte/js/jquery.jqpopup.min.js" src="Scripts/jqrte/js/jquery.jqpopup.min.js"></script> 
<script type="text/javascript" src="../../Scripts/jqrte/js/jquery.jqrte.min.js" src="Scripts/jqrte/js/jquery.jqrte.min.js"></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> 
Select Format Paragraph Pre Heading 6 Heading 5 Heading 4 Heading 3 Heading 2 Heading 1 Select Font Arial Comic Sans Courier New Georgia Helvetica Impact Times Trebuchet Verdana Select Font Size 8 10 12 14 18 24 
H: S: L: 
R: G: B: 
Rows 
Columns 
Width % pixels 
Border 
Cellspacing 
Cellpadding 
Alignment default left right center 
Site Name 
URL 
Target _blank _parent _self _top 
Image URL 
Image Description 
Alignment left right 
Border 
Upload Image 
Image Description 
Alignment left right 
Border 
Upload File 
File Name 
 
這樣就可以在asp.net mvc中使用jqrte編輯器的強大功能了
 
 




聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com