ASP.NET MVC框架中引入JQUERY JQRTE控件

经过将近两周的努力，终于将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.准备编辑器页面，原代码如下：