ASP.NET MVC框架中引入JQUERY JQRTE控件
创始人
2024-04-22 02:10:53
0

经过将近两周的努力,终于将JQUERY的JQRTE文本编辑器控件引入到了asp.net mvc框架中,主要步骤如下:

1.在asp.net mvc项目中引入jqrte类库,声明辅助类用于存储服务器端上载文件的信息

  1. public class ViewDataUploadFilesResult  
  2. {  
  3.     public string message { get; set; }  
  4.     //public int Length { get; set; }  
  5.     public string imagepath { get; set; }  
  6.     public string error { get; set; }  
  7. }  

2.编写处理文件上载服务器段代码,并将上载的文件信息返回给客户端,代码如下:

  1. [AcceptVerbs(HttpVerbs.Post)]  
  2.         public JsonResult UploadFiles(FormCollection collection)  
  3.         {  
  4.             var r = new ViewDataUploadFilesResult();  
  5.             foreach (string file in Request.Files)  
  6.             {  
  7.                 string url = Request.Url.Authority;  
  8.                 url = "http://" + url;  
  9.                 HttpPostedFileBase hpf = Request.Files[file] as HttpPostedFileBase;  
  10.                 string date = DateTime.Now.Date.ToShortDateString();  
  11.                 string path = Path.Combine(  
  12.                     AppDomain.CurrentDomain.BaseDirectory,  
  13.                     "Content");  
  14.                 string datePath = Path.Combine(path,date);  
  15.                 Directory.CreateDirectory(datePath);  
  16.                 url += "/Content/";  
  17.                 url += date;  
  18.                 url += "/";  
  19.                 url += Path.GetFileName(hpf.FileName);  
  20.                 if (hpf.ContentLength == 0)  
  21.                     continue;  
  22.                 string savedFileName = Path.Combine(  
  23.                     datePath,  
  24.                     Path.GetFileName(hpf.FileName));  
  25.                 try 
  26.                 {  
  27.                     hpf.SaveAs(savedFileName);  
  28.                 }  
  29.                 catch (Exception e)  
  30.                 {  
  31.                     r.error = e.ToString();  
  32.                 }  
  33.                 //r.Name = savedFileName;  
  34.                 //r.Length = hpf.ContentLength;  
  35.                 r.imagepath = url;  
  36.                 r.message = "ok";  
  37.                 r.error = "ok";  
  38.                 //r.Add(new ViewDataUploadFilesResult()  
  39.                 //{  
  40.                 //    Name = savedFileName,  
  41.                 //    Length = hpf.ContentLength  
  42.                 //});  
  43.             }  
  44.             JsonResult jsonResult = Json(r);  
  45.             jsonResult.ContentType = "text/html";  
  46.             return jsonResult;  
  47.         }    

之所以搞了这么长时间,问题也主要出在这儿,开始用的是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函数:

增加和修改的代码如下:   

  1. var path = window.location.href.replace(/editor/, "UploadFiles");     
  2.     //    alert(path);     
  3.     $.jQRTE.ajaxFileUpload({ url: path, secureuri: false, fileElementId: "upload" + uid + "_fileToUpload", dataType: "json",    

4.准备编辑器页面,原代码如下:

  1. < %@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>     
  2.     
  3. < asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">     
  4.     editor     
  5. < /asp:Content>     
  6.     
  7. < asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">     
  8.     < link rel="stylesheet" type="text/css" href="css/jqframework.css" mce_href="css/jqframework.css"/>     
  9.     < !--[if IE]>< link rel="stylesheet" type="text/css" href="css/ie-only.css" mce_href="css/ie-only.css" />< ![endif]-->     
  10.       
  11.     < link rel="Stylesheet" type="text/css" href="../../Scripts/jqrte/css/jqrte.css" mce_href="Scripts/jqrte/css/jqrte.css" />     
  12.     < link type="text/css" href="../../Scripts/jqrte/css/jqpopup.css" mce_href="Scripts/jqrte/css/jqpopup.css" rel="Stylesheet"/>     
  13.     < link rel="stylesheet" href="../../Scripts/jqrte/css/jqcp.css" mce_href="Scripts/jqrte/css/jqcp.css" type="text/css"/>     
  14.     
  15.     < mce:script type="text/javascript" src="../../Scripts/jqrte/js/jqDnR.min.js" mce_src="Scripts/jqrte/js/jqDnR.min.js">< /mce:script>     
  16.     < mce:script type="text/javascript" src="../../Scripts/jqrte/js/jquery.bgiframe.min.js" mce_src="Scripts/jqrte/js/jquery.bgiframe.min.js">< /mce:script>     
  17.     < mce:script type="text/javascript" src="../../Scripts/jqrte/js/jquery.jqcp.min.js" mce_src="Scripts/jqrte/js/jquery.jqcp.min.js">< /mce:script>     
  18.     < mce:script type="text/javascript" src="../../Scripts/jqrte/js/jquery.jqpopup.min.js" mce_src="Scripts/jqrte/js/jquery.jqpopup.min.js">< /mce:script>     
  19.     < mce:script type="text/javascript" src="../../Scripts/jqrte/js/jquery.jqrte.min.js" mce_src="Scripts/jqrte/js/jquery.jqrte.min.js">< /mce:script>     
  20.     < h2>editor< /h2>     
  21.     < div id="demo">     
  22.       < textarea id="demo1" name="demo1" class="jqrte_popup" rows="5" cols="5" >rich text editor with < b>Content< /b>    
  23.   

这样就可以在asp.net mvc框架中使用jqrte编辑器的强大功能了。

【编辑推荐】

  1. ASP.NET关机代码(Windows为本机)
  2. ASP.NET QueryString乱码解决问题
  3. ASP.NET画面跳转实现及其传值问题解决方案
  4. ASP.NET Web应用程序用户操作信息描述类
  5. ASP.NET之父强烈推荐:ASP.NET AJAX著作

相关内容

热门资讯

如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下,MySQL服务器仅侦听来自localhos...
如何利用交换机和端口设置来管理... 在网络管理中,总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
施耐德电气数据中心整体解决方案... 近日,全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”,作为该活动的...
20个非常棒的扁平设计免费资源 Apple设备的平面图标PSD免费平板UI 平板UI套件24平图标Freen平板UI套件PSD径向平...
德国电信门户网站可实时显示全球... 德国电信周三推出一个门户网站,直观地实时提供其安装在全球各地的传感器网络检测到的网络攻击状况。该网站...
为啥国人偏爱 Mybatis,... 关于 SQL 和 ORM 的争论,永远都不会终止,我也一直在思考这个问题。昨天又跟群里的小伙伴进行...
《非诚勿扰》红人闫凤娇被曝厕所... 【51CTO.com 综合消息360安全专家提醒说,“闫凤娇”、“非诚勿扰”已经被黑客盯上成为了“木...
2012年第四季度互联网状况报... [[71653]]  北京时间4月25日消息,据国外媒体报道,全球知名的云平台公司Akamai Te...