当前位置： 移动技术网 > IT编程>开发语言>.net > ASP.NET MVC引入JQUERY JQRTE控件

ASP.NET MVC引入JQUERY JQRTE控件

2017年12月12日  | 移动技术网IT编程  | 我要评论

男子外出打工受伤失忆,小说360,欢迎进行曲下载

主要步骤如下：
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编辑器的强大功能了

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网