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),发现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">

　　<h2>editor</h2>

　　<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">

　　<h2>editor</h2>

　　<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编辑器的强大功能了

教程首页更多教程