ASP.NET MVC引入JQUERY JQRTE控件
2009-06-27 00:00
489 查看
主要步骤如下:
1,在asp.net mvc项目中引入jqrte类库,声明辅助类用于存储服务器端上载文件的信息
2,编写处理文件上载服务器段代码,并将上载的文件信息返回给客户端,代码如下:
之所以搞了这么长时间,问题也主要出在这儿,开始用的是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函数: 增加和修改的代码如下:
4,准备编辑器页面,原代码如下:
这样就可以在asp.net mvc中使用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"> <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编辑器的强大功能了
相关文章推荐
- ASP.NET MVC引入JQUERY JQRTE控件
- ASP.NET MVC的Model元数据与Model模板:将”ListControl”引入ASP.NET MVC
- 转发:在ASP.NET MVC中引入 后台模板ACE Bootstrap
- NHibernate3.3.0GA+ExtJS4.1.1+ASP.NET MVC3.0权限管理系统(5)-ASP.NET MVC的引入
- ASP.NET MVC引入JQUERY JQRTE控件
- 【ASP.NET Core快速入门】(九) RoutingMiddleware介绍以及MVC引入
- ASP.NET MVC 引入JavaScript(.JS)文件
- ASP.NET MVC:Razor 引入命名空间
- ASP.NET MVC:Razor 引入命名空间
- ASP.NET MVC 引入JavaScript(.JS)文件
- ASP.NET MVC view引入命名空间
- ASP.NET MVC:Razor 引入命名空间
- 为已有的 WebForm 项目引入 Asp.Net MVC 框架
- ASP.NET MVC:Razor 引入命名空间
- ASP.NET MVC + ADO.NET EF 项目实战(三):引入jQuery
- ASP.NET MVC + ADO.NET EF 项目实战(三):引入jQuery
- ASP.NET MVC的Model元数据与Model模板:将”ListControl”引入ASP.NET MVC
- ASP.NET MVC:Razor 引入命名空间
- 菜鸟入门【ASP.NET Core】9:RoutingMiddleware介绍以及MVC引入
- asp.net mvc,asp.net4.0空间出售