Web Forms Application

  • 3 minutes to read

This topic describes how to add the client-side RichEdit control to a Web Forms application.

View Example: RichEdit for ASP.NET Core - How to integrate a control into an ASP.NET Web Forms application

Prerequisites

Requirements

  • To use the RichEdit control in a Web Forms application, you need to have a Universal, DXperience, or ASP.NET subscription.
  • Versions of the devexpress npm packages should be identical (their major and minor versions should be the same).

Add RichEdit to a Web Forms Application

Install a RichEdit Package

The devexpress-richedit npm package references devextreme as peerDependencies. The peerDependencies packages should be installed manually. This allows developers to control a version of the peerDependencies packages and guarantees that the package is installed once.

Install a RichEdit package with required peerDependencies:

  1. If the package.json file does not exist, create an npm configuration file as follows: npm init -y
  2. Install a RichEdit package with required peerDependencies:

    npm i devextreme devexpress-richedit --save
    

You can find all the libraries in the node_modules folder after the installation is completed.

Create a RichEdit Bundle

Create a RichEdit Bundle.

cd node_modules/devexpress-richedit
npm i --save-dev
npm run build-custom
cd ../..

Copy RichEdit Scripts

  1. Copy the bundled script node_modules/devexpress-richedit/dist/custom/dx.richedit.min.js to the Scripts folder.
  2. Copy the bundled css resources node_modules/devexpress-richedit/dist/custom/dx.richedit.css and icons from the node_modules/devexpress-richedit/dist/custom/icons folder to the Content folder.

Register the Scripts on a Page

Add scripts into the <head> tag of the Default.aspx page.

<link href="Content/dx.richedit.css" rel="stylesheet" />
<script src="Scripts/dx.richedit.min.js"></script>

Create a JavaScript Function that Initializes a RichEdit

Create the Scripts/richedit-creator.js file with the following content.

function createRichEdit(exportUrl, documentAsBase64) {
    const options = DevExpress.RichEdit.createOptions();
    options.confirmOnLosingChanges.enabled = false;
    options.exportUrl = exportUrl;
    options.width = '1400px';
    options.height = '900px';
    var richElement = document.getElementById("rich-container");
    const richEdit = DevExpress.RichEdit.create(richElement, options);
    if (documentAsBase64)
        richEdit.openDocument(documentAsBase64, "DocumentName", DevExpress.RichEdit.DocumentFormat.Rtf);
}

Add scripts into the <head> tag of the Default.aspx page.

<script src="./richedit-creator.js"></script>

How to set RichEdit options | Client-side API code samples

Create a RichEdit Object

  • Add a container for RichEdit to the Default.aspx page.

    <div id='rich-container' style="width: 100%; height: 900px"></div>
    
  • Create a RichEdit Object.

    <script>
        $(document).ready(function () {
            createRichEdit('<%=InitialDocument %>');
        });
    </script>
    

How to set RichEdit options | Client-side API code samples

Save a Document

RichEdit uses post requests to save a document. We recommend that you use the Web API to handle these requests.

  • Add the following code to the AppStart/RouteConfig.cs file to add a routing for the Web API.

    using System.Web.Http;
    ...
    public static void RegisterRoutes(RouteCollection routes) {
                ...
                routes.MapHttpRoute(name: "WebApiRoute",
                    routeTemplate: "api/{controller}/{id}",
                    defaults: new { id = RouteParameter.Optional });
            }
    
  • Create the Controllers/RichEditController.cs controller ad populate it with the followig code.

    using System;
    using System.Web.Http;
    
    namespace ClientWebFormsRichEdit {
        public class DocumentInfo {
            public string Base64 { get; set; }
            public string FileName { get; set; }
            public int Format { get; set; }
            public string Reason { get; set; }
        }
    
        public class RichEditController : ApiController {
            private const string documentFolderPath = "~/App_Data/";
    
            [HttpPost]
            public void SaveDocument([FromBody]DocumentInfo docInfo) {
                byte[] fileContent = Convert.FromBase64String(docInfo.Base64);
                string path = System.Web.Hosting.HostingEnvironment.MapPath($"{documentFolderPath}{docInfo.FileName}.{GetExtension(docInfo.Format)}");
                System.IO.File.WriteAllBytes(path, fileContent);
            }
    
            private static string GetExtension(int format) {
                switch (format) {
                    case 4: return "docx";
                    case 2: return "rtf";
                    case 1: return "txt";
                }
                return "docx";
            }
        }
    }
    

Open a Document

To open a document on RichEdit’s first load, save a document path to a public global variable and pass it to RichEdit’s page.

public string InitialDocument;
...
protected void Page_Load(object sender, EventArgs e)
{
    //InitialDocument = Convert.ToBase64String(System.IO.File.ReadAllBytes(
        //  Server.MapPath($"{documentFolderPath}template.rtf")));
    InitialDocument = "e1xydGYxXGRlZmYwe1xmb250dGJse1xmMCBDYWxpYnJpO319e1xjb2xvcnRibCA7XHJlZDB"
        + "cZ3JlZW4wXGJsdWUyNTUgO1xyZWQyNTVcZ3JlZW4yNTVcYmx1ZTI1NSA7fXtcKlxkZWZjaHAgXGZzMjJ9e1xzdHl"
        + "sZXNoZWV0IHtccWxcZnMyMiBOb3JtYWw7fXtcKlxjczFcZnMyMiBEZWZhdWx0IFBhcmFncmFwaCBGb250O317XCp"
        + "cY3MyXGZzMjJcY2YxIEh5cGVybGluazt9e1wqXHRzM1x0c3Jvd2RcZnMyMlxxbFx0c3ZlcnRhbHRcdHNjZWxsY2J"
        + "wYXQyXHRzY2VsbHBjdDBcY2x0eGxydGIgTm9ybWFsIFRhYmxlO319e1wqXGxpc3RvdmVycmlkZXRhYmxlfXtcaW5"
        + "mb31cbm91aWNvbXBhdFxzcGx5dHduaW5lXGh0bWF1dHNwXGV4cHNocnRuXHNwbHRwZ3BhclxkZWZ0YWI3MjBcc2V"
        + "jdGRcbWFyZ2xzeG4xNDQwXG1hcmdyc3huMTQ0MFxtYXJndHN4bjE0NDBcbWFyZ2JzeG4xNDQwXGhlYWRlcnk3MjB"
        + "cZm9vdGVyeTcyMFxwZ3dzeG4xMjI0MFxwZ2hzeG4xNTg0MFxjb2xzMVxjb2xzeDcyMFxwYXJkXHBsYWluXHFse1x"
        + "mczIyXGNmMFxjczEgRG9jdW1lbnQgdGV4dH1cZnMyMlxjZjBccGFyfQ==";
}