# TextControl.Web: Creating an MVC Application with Razor

> TextControl.Web is a Web Forms component with a code-behind API. This step-by-step tutorial integrates it into an ASP.NET MVC 4 application with Razor views by rendering the Web Form page via Server.Execute and returning the generated HTML output as a content action result.

> **Note:** This article is outdated and may no longer be accurate.

- **Author:** Bjoern Meyer
- **Published:** 2015-05-12
- **Modified:** 2026-07-17
- **Description:** TextControl.Web is a Web Forms component with a code-behind API. This step-by-step tutorial integrates it into an ASP.NET MVC 4 application with Razor views by rendering the Web Form page via Server.Execute and returning the generated HTML output as a content action result.
- **5 min read** (948 words)
- **Tags:**
  - ASP.NET
  - GitHub
  - HTML5
  - Tutorial
- **Web URL:** https://www.textcontrol.com/blog/2015/05/12/textcontrolweb-creating-an-mvc-application-with-razor/
- **LLMs URL:** https://www.textcontrol.com/blog/2015/05/12/textcontrolweb-creating-an-mvc-application-with-razor/llms.txt
- **LLMs-Full URL:** https://www.textcontrol.com/blog/2015/05/12/textcontrolweb-creating-an-mvc-application-with-razor/llms-full.txt
- **GitHub Repository:** https://github.com/TextControl/Web.TextControl.MVC.Tutorial

---

This tutorial shows how to integrate [TextControl.Web](https://docs.textcontrol.com/textcontrol/asp-dotnet/ref.txtextcontrol.web.textcontrol.class.htm) into an MVC application with Razor.

Because of the architecture and complexity of the design, the ASP.NET component [TextControl.Web](https://docs.textcontrol.com/textcontrol/asp-dotnet/ref.txtextcontrol.web.textcontrol.class.htm) 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](https://s1-www.textcontrol.com/assets/dist/blog/2015/05/12/a/assets/mvc_step1.webp "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](https://s1-www.textcontrol.com/assets/dist/blog/2015/05/12/a/assets/mvc_step2.webp "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](https://s1-www.textcontrol.com/assets/dist/blog/2015/05/12/a/assets/mvc_step3.webp "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](https://s1-www.textcontrol.com/assets/dist/blog/2015/05/12/a/assets/mvc_step4.webp "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](https://s1-www.textcontrol.com/assets/dist/blog/2015/05/12/a/assets/mvc_step5.webp "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](https://s1-www.textcontrol.com/assets/dist/blog/2015/05/12/a/assets/mvc_step6.webp "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;
    }
    
    
    
    <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.

---

## About Bjoern Meyer

As CEO, Bjoern is the visionary behind our strategic direction and business development, bridging the gap between our customers and engineering teams. His deep passion for coding and web technologies drives the creation of innovative products. If you're at a tech conference, be sure to stop by our booth - you'll most likely meet Bjoern in person. With an advanced graduate degree (Dipl. Inf.) in Computer Science, specializing in AI, from the University of Bremen, Bjoern brings significant expertise to his role. In his spare time, Bjoern enjoys running, paragliding, mountain biking, and playing the piano.

- [LinkedIn](https://www.linkedin.com/in/bjoernmeyer/)
- [X](https://x.com/txbjoern)
- [GitHub](https://github.com/bjoerntx)

---

## Related Posts

- [Creating an ASP.NET MVC DocumentViewer Application With Razor](https://www.textcontrol.com/blog/2020/01/01/creating-an-aspnet-mvc-documentviewer-application-with-razor/llms.txt)
- [Creating an ASP.NET MVC Application With Razor](https://www.textcontrol.com/blog/2020/01/01/creating-an-aspnet-mvc-application-with-razor/llms.txt)
- [Creating Your First ASP.NET Reporting Application](https://www.textcontrol.com/blog/2020/01/01/creating-your-first-aspnet-reporting-application/llms.txt)
- [Creating an ASP.NET Web Forms AJAX Application](https://www.textcontrol.com/blog/2020/01/01/creating-an-aspnet-web-forms-ajax-application/llms.txt)
- [ASP.NET MVC: Implementing a Simplistic, Custom Button Bar](https://www.textcontrol.com/blog/2017/03/13/aspnet-mvc-implementing-a-simplistic-custom-button-bar/llms.txt)
- [ASP.NET MVC: Adding Protected Sections to Documents](https://www.textcontrol.com/blog/2017/03/01/aspnet-mvc-adding-protected-sections-to-documents/llms.txt)
- [ASP.NET: Adding Electronic Signatures to Documents](https://www.textcontrol.com/blog/2016/10/12/aspnet-adding-electronic-signatures-to-documents/llms.txt)
- [MVC: Loading Files from the Backstage Menu](https://www.textcontrol.com/blog/2016/01/06/mvc-loading-files-from-the-backstage-menu/llms.txt)
- [MVC: Replace the File Menu with a Backstage View Menu](https://www.textcontrol.com/blog/2015/12/30/mvc-replace-the-file-menu-with-a-backstage-view-menu/llms.txt)
- [MVC: Replace the Ribbon Table Menu with a Quick Insert Table Drop-down](https://www.textcontrol.com/blog/2015/12/23/mvc-replace-the-ribbon-table-menu-with-a-quick-insert-table-drop-down/llms.txt)
- [MVC: Arrange a Docked Web.TextControl with a Custom Bar at the Top](https://www.textcontrol.com/blog/2015/12/18/mvc-arrange-a-docked-webtextcontrol-with-a-custom-bar-at-the-top/llms.txt)
- [MVC: Autosave and Restore Documents to and from the Local Browser Storage](https://www.textcontrol.com/blog/2015/12/14/mvc-autosave-and-restore-documents-to-and-from-the-local-browser-storage/llms.txt)
- [MVC: Loading and Saving Documents Through Controller HttpPost Methods](https://www.textcontrol.com/blog/2015/12/08/mvc-loading-and-saving-documents-through-controller-httppost-methods/llms.txt)
- [HTML5: Adding a Download Button to the Ribbon File Menu](https://www.textcontrol.com/blog/2015/10/22/html5-adding-a-download-button-to-the-ribbon-file-menu/llms.txt)
- [HTML5: Make Merge Field Lists Scrollable in the Ribbon Bar](https://www.textcontrol.com/blog/2015/10/16/html5-make-merge-field-lists-scrollable-in-the-ribbon-bar/llms.txt)
- [HTML5: Store Documents Using the Local Browser Storage](https://www.textcontrol.com/blog/2015/10/09/html5-store-documents-using-the-local-browser-storage/llms.txt)
- [HTML5: Saving Documents in an MVC Controller Method](https://www.textcontrol.com/blog/2015/10/01/html5-saving-documents-in-an-mvc-controller-method/llms.txt)
- [HTML5: Display and Handle FormCheckBox Fields](https://www.textcontrol.com/blog/2015/09/22/html5-display-and-handle-formcheckbox-fields/llms.txt)
- [Merging Documents with RESTful Web API's](https://www.textcontrol.com/blog/2015/07/31/merging-documents-with-restful-web-apis/llms.txt)
- [Building a Touch-enabled Button Bar with Javascript](https://www.textcontrol.com/blog/2015/05/27/building-a-touch-enabled-button-bar-with-javascript/llms.txt)
- [TextControl.Web: Adding a Block Navigation Panel](https://www.textcontrol.com/blog/2015/05/08/textcontrolweb-adding-a-block-navigation-panel/llms.txt)
- [Web.TextControl: JQueryUI Alert Boxes and Javascript Events](https://www.textcontrol.com/blog/2015/04/20/webtextcontrol-jqueryui-alert-boxes-and-javascript-events/llms.txt)
- [Building a TX Text Control Project with GitHub Actions and the Text Control NuGet Feed](https://www.textcontrol.com/blog/2026/02/09/building-a-tx-text-control-project-with-github-actions-and-the-text-control-nuget-feed/llms.txt)
- [Creating an ASP.NET Core Web App with Docker Support and GitHub Packages](https://www.textcontrol.com/blog/2024/01/05/creating-an-asp-net-core-web-app-with-docker-support-and-github-packages/llms.txt)
- [How to Mail Merge MS Word DOCX Documents in ASP.NET Core C#](https://www.textcontrol.com/blog/2023/10/16/how-to-mail-merge-ms-word-docx-documents-in-aspnet-core-csharp/llms.txt)