Introduce jquery jqrte control in ASP. net mvc Framework

After nearly two weeks of efforts, I finally introduced JQUERY's JQRTE text editor control to the asp.net mvc framework. The main steps are as follows:

1. Introduce the jqrte class library in the asp.net mvc project and declare that the auxiliary class is used to store the information of files uploaded on the server.

 
 

  
  
public class ViewDataUploadFilesResult  
  
  
{  
  
  
    public string message { get; set; }  
  
  
    //public int Length { get; set; }  
  
  
    public string imagepath { get; set; }  
  
  
    public string error { get; set; }  
  
  
}  
 
 

2. Write the server segment code for processing file uploads and return the uploaded file information to the client. The Code is as follows:

 
 

  
  
[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;  
  
  
        }    
 
 

After such a long time, the problem mainly exists here. At first, return json (r) is used. It is found that jquery's callback function is always unable to obtain the server-side json, instead, a File Download Dialog Box will pop up and read jquery's source code repeatedly. After a week or so, I registered a user on the official asp.net mvc Forum. After some discussion, finally, we found that for ajax forms with file controls, the json contentType should be set in the action Method to correctly process the json object. The source code is as above. Thanks for your help, otherwise, I don't know when the problem will affect me. Original post link is as follows: http://forums.asp.net/t/1439867.aspx

3. Modify the fileupload source code of jqrte. Just change the action path and modify the uploads function in jquery. jqrte. min. js:

The code added and modified is as follows:

 
 

  
  
var path = window.location.href.replace(/editor/, "UploadFiles");     
  
  
    //    alert(path);     
  
  
    $.jQRTE.ajaxFileUpload({ url: path, secureuri: false, fileElementId: "upload" + uid + "_fileToUpload", dataType: "json",    
 
 

4. Prepare the editor page. The original code is as follows:

 
 

  
  
< %@ 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" mce_href="css/jqframework.css"/>     
  
  
    < !--[if IE]>< link rel="stylesheet" type="text/css" href="css/ie-only.css" mce_href="css/ie-only.css" />< ![endif]-->     
  
  
      
  
  
    < link rel="Stylesheet" type="text/css" href="../../Scripts/jqrte/css/jqrte.css" mce_href="Scripts/jqrte/css/jqrte.css" />     
  
  
    < link type="text/css" href="../../Scripts/jqrte/css/jqpopup.css" mce_href="Scripts/jqrte/css/jqpopup.css" rel="Stylesheet"/>     
  
  
    < link rel="stylesheet" href="../../Scripts/jqrte/css/jqcp.css" mce_href="Scripts/jqrte/css/jqcp.css" type="text/css"/>     
  
  
    
  
  
    < mce:script type="text/javascript" src="../../Scripts/jqrte/js/jqDnR.min.js" mce_src="Scripts/jqrte/js/jqDnR.min.js">< /mce:script>     
  
  
    < mce:script type="text/javascript" src="../../Scripts/jqrte/js/jquery.bgiframe.min.js" mce_src="Scripts/jqrte/js/jquery.bgiframe.min.js">< /mce:script>     
  
  
    < mce:script type="text/javascript" src="../../Scripts/jqrte/js/jquery.jqcp.min.js" mce_src="Scripts/jqrte/js/jquery.jqcp.min.js">< /mce:script>     
  
  
    < mce:script type="text/javascript" src="../../Scripts/jqrte/js/jquery.jqpopup.min.js" mce_src="Scripts/jqrte/js/jquery.jqpopup.min.js">< /mce:script>     
  
  
    < mce:script type="text/javascript" src="../../Scripts/jqrte/js/jquery.jqrte.min.js" mce_src="Scripts/jqrte/js/jquery.jqrte.min.js">< /mce: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>    
  
  
  
 
 

In this way, the powerful functions of the jqrte editor can be used in the asp.net mvc framework.

1. ASP. NET shutdown code (Windows is the local machine)
2. ASP. NET QueryString garbled Solution
3. ASP. NET screen jump implementation and value passing Solution
4. ASP. NET Web application user operation Information Description class
5. The father of ASP. NET is strongly recommended: ASP. NET AJAX