ASP.NET MVC引入JQUERY JQRTE控件_asp.net教程-查字典教程网

摘要：主要步骤如下：1,在asp.netmvc项目中引入jqrte类库，声明辅助类用于存储服务器端上载文件的信息复制代码代码如下:publiccl...

主要步骤如下：

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">

<h2>editor</h2>

<textarea id="demo1" name="demo1" 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">

<h2>editor</h2>

<textarea id="demo1" name="demo1" 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编辑器的强大功能了