ASP.NET MVC引入JQUERY JQRTE控件

(编辑:jimmy 日期: 2026/1/15 浏览:2)

主要步骤如下:
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="/UploadFiles/2021-04-02/jqDnR.min.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.bgiframe.min.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.jqcp.min.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.jqpopup.min.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.jqrte.min.js"><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="/UploadFiles/2021-04-02/jqDnR.min.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.bgiframe.min.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.jqcp.min.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.jqpopup.min.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.jqrte.min.js"><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编辑器的强大功能了

一句话新闻

高通与谷歌联手!首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。