This tutorial shows how to integrate TextControl.Web into an MVC application with Razor.

Because of the architecture and complexity of the design, the ASP.NET component TextControl.Web is a Web Forms component with a code-behind API.

This tutorial shows how to integrate the HTML5 based editor into an MVC application with Razor support without breaking the MVC rules by following the recommended path from Microsoft to combine MVC and Web Forms.

Create Your Application

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

    Create your 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 should be Razor.

    Create your application
  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 Web Form, name it Editor and confirm with Add.

    Create your application
  4. In the Solution Explorer, select the newly created Web Form 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.

    Create your application
  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 22.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 22.0.NET Server for ASP.NET\Samples\ASP.NET\CSharp\Documentation Tutorials\HTML5 Web Editor\Tutorial\images

  9. Select the Web Form and switch to code view using the View Code menu item from the View main menu. Add the following event handler code to the existing Page_Load event handler:

    [C#]
    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);
    }
    [VB.NET]
    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
  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, set the name to HomeController and confirm with Add.

    Create your application
  11. Open the newly created HomeController.cs file and add the following code, so that your controller code looks like this:

    [C#]
    public class HomeController : Controller
    {
            public ActionResult Index()
            {
                    return View();
            }
    
            public ActionResult TemplateEditor()
            {
                    var myString = RenderViewToString("Editor.aspx");
                    return Content(myString);
            }
    
            protected string RenderViewToString(string viewPath)
            {
                    System.IO.StringWriter htmlStringWriter =
                            new System.IO.StringWriter();
                    Server.Execute(viewPath, htmlStringWriter);
                    return htmlStringWriter.GetStringBuilder().ToString();
            }
    }
    [VB.NET]
    Public Class HomeController
            Inherits Controller
            Public Function Index() As ActionResult
                    Return View()
            End Function
    
            Public Function TemplateEditor() As ActionResult
                    Dim myString = RenderViewToString("Editor.aspx")
                    Return Content(myString)
            End Function
    
            Protected Function RenderViewToString(viewPath As String) As String
                    Dim htmlStringWriter As New System.IO.StringWriter()
                    Server.Execute(viewPath, htmlStringWriter)
                    Return htmlStringWriter.GetStringBuilder().ToString()
            End Function
    End Class
  12. In the Solution Explorer, select Views and choose New Folder from the Project main menu. Name the new folder Home.

  13. In the Solution Explorer, select the newly created folder Home and choose Add New Item... from the Project main menu. Select MVC 4 View Page (Razor), name it Index and confirm with Add.

    Create your application
  14. Open the newly created View and add the following code, so that your complete view page looks like this:

    @{
        Layout = null;
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title></title>
    </head>
    <body>
        <div>
            @Html.Action("TemplateEditor")
        </div>
    </body>
    </html>
  15. 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
  16. Compile and start the application.

Download the sample from GitHub and test it on your own.

GitHub

Download and Fork This Sample on GitHub

We proudly host our sample code on GitHub.com/TextControl.

Please fork and contribute.

Requirements for This Sample

  • Visual Studio 2012 or better
  • TX Text Control .NET Server for ASP.NET (trial sufficient)