ASP.NET MVC引入JQUERY JQRTE控件- ASP.NET - 软晨网（RuanChen.com）

当前位置: 首页 > 图文教程 > 网络编程 > ASP.NET > ASP.NET MVC引入JQUERY JQRTE控件

ASP.NET: 使用C# 开发掩码输入文本框; 点击DataGrid的列标头在DataGrid最后一行显示该列的和; ASP.NET之Web打印－终极解决篇; SQL Server 2000 Reporting Services: 怎样根据用户的语言偏好显示本地化的信息; 利用底层键盘钩子拦载任意按键（回调版）; 如何禁止调整自定义控件的尺寸？; 用VB6.0编写磁盘格式化程序; Aspx中导Excel; ASP.NET组件设计Step by Step(3); 下面真正开始讲事件的内容; 如何有效的使用C#读取文件; 如何在C#中加载自己编写的动态链接库（DLL）; Managed DirectX 相关（DirectX.Capture Class Library && DirectShow.NET）; XQuery Reference-from w3schools.com; [译]Visual Basic 2005在语言上的增强（十三）显式的数组范围及小结; lucene的首次应用; [VBA]在后台删除工作表后出现的怪问题; VB.NET 数据库查询 [SQL字符串的生成]; JavaScript调用服务器事件; 在Window2003上执行System.Diagnostics.Process.GetProcessesByName等方法失败的原因

No. « ‹ 138 139 140 141 › »

技术文章搜索

关键字

ASP.NET MVC引入JQUERY JQRTE控件

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-13 浏览: 164 ::

收藏到网摘: n/a

ASP.NET(C#)应用程序配置文件app.config/web.config的增、删、改操作 C# Base64编码

经过将近两周的努力，终于将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" 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(C#)应用程序配置文件app.config/web.config的增、删、改操作 C# Base64编码

ASP.NET MVC引入JQUERY JQRTE控件

评论 (0) All