首页 网页制作网络编程脚本专栏数据库网站运营网络安全平面设计CMS教程

ASP.NET MVC引入JQUERY JQRTE控件

所属分类： 网络编程 / ASP.NET 阅读数： 1524
收藏 0 赞 0 分享
主要步骤如下：
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编辑器的强大功能了
更多精彩内容其他人还在看

解析WPF实现音频文件循环顺序播放的解决方法

本篇文章是对WPF实现音频文件循环顺序播放的方法进行了详细的分析介绍，需要的朋友参考下
收藏 0 赞 0 分享

解决.net framework 4.0环境下遇到版本不同编译不通过的方法详解

本篇文章是对.net framework 4.0环境下遇到版本不同编译不通过的解决方法进行了详细的分析介绍，需要的朋友参考下
收藏 0 赞 0 分享

将文件上传、下载(以二进制流保存到数据库)实现代码

将文件以二进制流的格式写入数据库：首先获得文件路径，然后将文件以二进制读出保存在一个二进制数组中具体请祥看本文，希望对你有所帮助
收藏 0 赞 0 分享

点击提交按钮后DropDownList的值变为默认值实现分析

在点击提交按钮后，页面上所有的绑定到数据库的控件值都恢复到默认值，下面与大家分享下DropDownList的值变为默认值
收藏 0 赞 0 分享

ASP.NET web.config中数据库连接字符串connectionStrings节的配置方法

ASP.NET web.config中数据库连接字符串connectionStrings节的配置方法，需要的朋友可以参考一下
收藏 0 赞 0 分享

Linkbutton控件在项目中的简单应用

Button控件可分为button控件、LinkButton控件、ImageButton控件三类，而LinkButton控件则在页面上显示为一个超级链接，下面与大家分享下其具体应用
收藏 0 赞 0 分享

Web.config 和 App.config 的区别分析

Web.config 和 App.config 的区别分析，需要的朋友可以参考一下
收藏 0 赞 0 分享

基于.Net中的数字与日期格式化规则助记词的使用详解

本篇文章是对.Net中的数字与日期格式化规则助记词的使用进行了详细的分析介绍，需要的朋友参考下
收藏 0 赞 0 分享

解决在Web.config或App.config中添加自定义配置的方法详解

本篇文章是对在Web.config或App.config中添加自定义配置的方法进行了详细的分析介绍，需要的朋友参考下
收藏 0 赞 0 分享

深入本机影像生成器（Ngen.exe）工具使用方法详解

本篇文章是对本机影像生成器（Ngen.exe）工具使用方法进行了详细的分析介绍，需要的朋友参考下
收藏 0 赞 0 分享
查看更多

网络赚钱

更多

站长故事

更多
建站极客
合作伙伴
在线工具
建站极客移动版
聚合全网技术文章，根据你的阅读喜好进行个性推荐
© 2012 - 2020 zhanzhang360.cn Some Rights Reserved.
沪ICP备13040166号-22