Web.TextControl in MVC with MVC View Pages

This tutorial shows how to use the HTML5 based TextControl to create a Web based word processor and template designer. Using the built-in File menu, you can load and save documents from and to a specified folder.

Create Your Application

1. Open Visual Studio and create a new ASP.NET MVC 4 Web Application.

   

2. In the next dialog New ASP.NET MVC 4 Project, select Empty as your project template and confirm with OK. The View Engine can be Razor or ASPX.

   

3. In the Solution Explorer, select the project and choose Add New Item... from the Project main menu. In the opened dialog Add New Item, select MVC 4 View Page (System.Web.Mvc.ViewPage), name it Editor and confirm with Add.

   

4. In the Solution Explorer, select the newly created View Page and choose View Designer from the View main menu.

   Find the TextControl component in the Toolbox and drag and drop an instance onto the Designer form.

   

5. Select TextControl1 on the form and browse for the Dock property in the Properties window and set this to Window.

6. In the Solution Explorer, select the project and choose New Folder from the Project main menu. Type in a name for the folder (e.g. "documents").

7. Select the newly created folder and choose Add Existing Item... from the Project main menu. In the opened dialog box, navigate to the following folder:

   %USERPROFILE%\Documents\TX Text Control 21.0.NET Server for ASP.NET\Samples\ASP.NET\CSharp\Documentation Tutorials\HTML5 Web Editor\Tutorial\documents

   Select all files and and confirm with Add.

8. Repeat the above 2 steps with another folder for the images (e.g. "images"). Sample images can be found in the following directory:

   %USERPROFILE%\Documents\TX Text Control 21.0.NET Server for ASP.NET\Samples\ASP.NET\CSharp\Documentation Tutorials\HTML5 Web Editor\Tutorial\images

9. Select the View Page and switch to code view using the Code menu item from the View main menu. Add the following event handler code to a server-side script tag:

   <script runat="server">
   
       protected void Page_Load(object sender, EventArgs e)
       {
           TextControl1.SetFileDirectoryAsync(Server.MapPath("documents"),
               TXTextControl.Web.FileType.Document);
   
           TextControl1.SetFileDirectoryAsync(Server.MapPath("images"),
               TXTextControl.Web.FileType.Image); 
       }
       
   </script>

   <script runat="server">
                   
       Protected Sub Page_Load(ByVal sender As Object, _
           ByVal e As System.EventArgs) Handles Me.Load
               TextControl1.SetFileDirectoryAsync _
                   (Server.MapPath("documents"), _
                   TXTextControl.Web.FileType.Document)
                   
               TextControl1.SetFileDirectoryAsync(Server.MapPath("images"),
                   TXTextControl.Web.FileType.Image)
       End Sub
       
   </script>

10. In the Solution Explorer, select the Controllers folder and choose Add New Item... from the Project main menu. In the opened dialog Add New Item, select MVC 4 Controller Class and confirm with Add.

    

11. Open the newly created HomeController.cs file and add the following code to the ActionResult Index:

    [C#]
    public ActionResult Index()
    {
        return View(new WebFormView(this.ControllerContext,
            "~/Editor.aspx"));
    }

    [Visual Basic]
    Public Function Index() As ActionResult
        Return View(New WebFormView(Me.ControllerContext, _
            "~/Editor.aspx"))
    End Function

12. In the Solution Explorer, expand the App_Start folder and open the RouteConfig.cs file. Add the following code to the RegisterRoutes method:

    [C#]
    routes.IgnoreRoute("{resource}.ashx/{*pathInfo}");
    routes.IgnoreRoute("Dialogs/{*pathInfo}");

    [Visual Basic]
    routes.IgnoreRoute("{resource}.ashx/{*pathInfo}")
    routes.IgnoreRoute("Dialogs/{*pathInfo}")

    The complete method should look like this:

    [C#]
    public static void RegisterRoutes(RouteCollection routes)
    {
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
        routes.IgnoreRoute("{resource}.ashx/{*pathInfo}");
        routes.IgnoreRoute("Dialogs/{*pathInfo}");
    
        routes.MapRoute(
            name: "Default",
            url: "{controller}/{action}/{id}",
            defaults: new { controller = "Home", action = "Index",
                id = UrlParameter.Optional }
        );
    }

    [Visual Basic]
    Public Shared Sub RegisterRoutes(routes As RouteCollection)
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}")
        routes.IgnoreRoute("{resource}.ashx/{*pathInfo}")
        routes.IgnoreRoute("Dialogs/{*pathInfo}")
    
        routes.MapRoute(name := "Default", _
            url := "{controller}/{action}/{id}", defaults := New With { _
            Key .controller = "Home", _
            Key .action = "Index", _
            Key .id = UrlParameter.[Optional] _
        })
    End Sub

13. Compile and start the application.

Using the integrated File ribbon menu, you can load and save documents from and to your specified documents folder.