提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  移动开发

当前栏目

ASP.NETMVC引入JQUERYJQRTE控件

ASP 控件 引入 NetMvc
2023-06-13 09:14:10 时间
主要步骤如下：
1,在asp.netmvc项目中引入jqrte类库，声明辅助类用于存储服务器端上载文件的信息
复制代码代码如下:

publicclassViewDataUploadFilesResult
{
publicstringmessage{get;set;}
//publicintLength{get;set;}
publicstringimagepath{get;set;}
publicstringerror{get;set;}
}

2，编写处理文件上载服务器段代码，并将上载的文件信息返回给客户端，代码如下：
复制代码代码如下:

[AcceptVerbs(HttpVerbs.Post)]
publicJsonResultUploadFiles(FormCollectioncollection)
{
varr=newViewDataUploadFilesResult();
foreach(stringfileinRequest.Files)
{
stringurl=Request.Url.Authority;
url="http://"+url;
HttpPostedFileBasehpf=Request.Files[file]asHttpPostedFileBase;
stringdate=DateTime.Now.Date.ToShortDateString();
stringpath=Path.Combine(
AppDomain.CurrentDomain.BaseDirectory,
"Content");
stringdatePath=Path.Combine(path,date);
Directory.CreateDirectory(datePath);
url+="/Content/";
url+=date;
url+="/";
url+=Path.GetFileName(hpf.FileName);
if(hpf.ContentLength==0)
continue;
stringsavedFileName=Path.Combine(
datePath,
Path.GetFileName(hpf.FileName));
try
{
hpf.SaveAs(savedFileName);
}
catch(Exceptione)
{
r.error=e.ToString();
}
//r.Name=savedFileName;
//r.Length=hpf.ContentLength;
r.imagepath=url;
r.message="ok";
r.error="ok";
//r.Add(newViewDataUploadFilesResult()
//{
//Name=savedFileName,
//Length=hpf.ContentLength
//});
}
JsonResultjsonResult=Json(r);
jsonResult.ContentType="text/html";
returnjsonResult;
}

之所以搞了这么长时间，问题也主要出在这儿，开始用的是returnjson(r),发现jquery的回调函数总是无法获得服务器端的json，反而会跳出个下载文件对话框，反复阅读jquery的源代码，折磨了一周多后，在asp.netmvc官方论坛上注册了个用户，经过一番讨论，最后发现对于有file控件的ajaxform，在action方法中应当制定json的contentType才会正确处理json对象，源代码如上，感谢热心朋友的帮助，要不然不知道这个问题会折磨到我什么时候（已经好几天睡不好觉了：()。原贴链接如下：http://forums.asp.net/t/1439867.aspx

3.修改jqrte的fileupload源代码，只要改一下action路径就行，在jquery.jqrte.min.js中修改uploads函数：增加和修改的代码如下：
复制代码代码如下:
varpath=window.location.href.replace(/editor/,"UploadFiles");
//alert(path);
$.jQRTE.ajaxFileUpload({url:path,secureuri:false,fileElementId:"upload"+uid+"_fileToUpload",dataType:"json",

4，准备编辑器页面，原代码如下：
复制代码代码如下:
<%@PageTitle=""Language="C#"MasterPageFile="~/Views/Shared/Site.Master"Inherits="System.Web.Mvc.ViewPage"%>
<asp:ContentID="Content1"ContentPlaceHolderID="TitleContent"runat="server">
editor
</asp:Content>
<asp:ContentID="Content2"ContentPlaceHolderID="MainContent"runat="server">
<linkrel="stylesheet"type="text/css"href="css/jqframework.css"href="css/jqframework.css"/>
<!--[ifIE]><linkrel="stylesheet"type="text/css"href="css/ie-only.css"href="css/ie-only.css"/><![endif]-->
<linkrel="Stylesheet"type="text/css"href="../../Scripts/jqrte/css/jqrte.css"href="Scripts/jqrte/css/jqrte.css"/>
<linktype="text/css"href="../../Scripts/jqrte/css/jqpopup.css"href="Scripts/jqrte/css/jqpopup.css"rel="Stylesheet"/>
<linkrel="stylesheet"href="../../Scripts/jqrte/css/jqcp.css"href="Scripts/jqrte/css/jqcp.css"type="text/css"/>
<scripttype="text/javascript"src="../../Scripts/jqrte/js/jqDnR.min.js"src="Scripts/jqrte/js/jqDnR.min.js"></script>
<scripttype="text/javascript"src="../../Scripts/jqrte/js/jquery.bgiframe.min.js"src="Scripts/jqrte/js/jquery.bgiframe.min.js"></script>
<scripttype="text/javascript"src="../../Scripts/jqrte/js/jquery.jqcp.min.js"src="Scripts/jqrte/js/jquery.jqcp.min.js"></script>
<scripttype="text/javascript"src="../../Scripts/jqrte/js/jquery.jqpopup.min.js"src="Scripts/jqrte/js/jquery.jqpopup.min.js"></script>
<scripttype="text/javascript"src="../../Scripts/jqrte/js/jquery.jqrte.min.js"src="Scripts/jqrte/js/jquery.jqrte.min.js"></script>
<h2>editor</h2>
<divid="demo">
<textareaid="demo1"name="demo1"class="jqrte_popup"rows="5"cols="5">richtexteditorwith<b>Content</b>
<%@PageTitle=""Language="C#"MasterPageFile="~/Views/Shared/Site.Master"Inherits="System.Web.Mvc.ViewPage"%>
<asp:ContentID="Content1"ContentPlaceHolderID="TitleContent"runat="server">
    editor
</asp:Content>
<asp:ContentID="Content2"ContentPlaceHolderID="MainContent"runat="server">
<linkrel="stylesheet"type="text/css"href="css/jqframework.css"href="css/jqframework.css"/>
<!--[ifIE]><linkrel="stylesheet"type="text/css"href="css/ie-only.css"href="css/ie-only.css"/><![endif]-->
<linkrel="Stylesheet"type="text/css"href="../../Scripts/jqrte/css/jqrte.css"href="Scripts/jqrte/css/jqrte.css"/>
<linktype="text/css"href="../../Scripts/jqrte/css/jqpopup.css"href="Scripts/jqrte/css/jqpopup.css"rel="Stylesheet"/>
<linkrel="stylesheet"href="../../Scripts/jqrte/css/jqcp.css"href="Scripts/jqrte/css/jqcp.css"type="text/css"/>
<scripttype="text/javascript"src="../../Scripts/jqrte/js/jqDnR.min.js"src="Scripts/jqrte/js/jqDnR.min.js"></script>
<scripttype="text/javascript"src="../../Scripts/jqrte/js/jquery.bgiframe.min.js"src="Scripts/jqrte/js/jquery.bgiframe.min.js"></script>
<scripttype="text/javascript"src="../../Scripts/jqrte/js/jquery.jqcp.min.js"src="Scripts/jqrte/js/jquery.jqcp.min.js"></script>
<scripttype="text/javascript"src="../../Scripts/jqrte/js/jquery.jqpopup.min.js"src="Scripts/jqrte/js/jquery.jqpopup.min.js"></script>
<scripttype="text/javascript"src="../../Scripts/jqrte/js/jquery.jqrte.min.js"src="Scripts/jqrte/js/jquery.jqrte.min.js"></script>
<h2>editor</h2>
<divid="demo">
<textareaid="demo1"name="demo1"class="jqrte_popup"rows="5"cols="5">richtexteditorwith<b>Content</b>
SelectFormatParagraphPreHeading6Heading5Heading4Heading3Heading2Heading1SelectFontArialComicSansCourierNewGeorgiaHelveticaImpactTimesTrebuchetVerdanaSelectFontSize81012141824
H:S:L:
R:G:B:
Rows
Columns
Width%pixels
Border
Cellspacing
Cellpadding
Alignmentdefaultleftrightcenter
SiteName
URL
Target_blank_parent_self_top
ImageURL
ImageDescription
Alignmentleftright
Border
UploadImage
ImageDescription
Alignmentleftright
Border
UploadFile
FileName

这样就可以在asp.netmvc中使用jqrte编辑器的强大功能了

相关文章