经过将近两周的努力，终于将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"/>
- < !--[if IE]>< link rel="stylesheet" type="text/css" href="css/ie-only.css" mce_href="css/ie-only.css" />< ![endif]-->
- < 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>
这样就可以在asp.net mvc框架中使用jqrte编辑器的强大功能了。
【编辑推荐】
