Products Technologies Demo Docs Blog Support Company

This blog post contains outdated information.

The cited code snippets may be workarounds, and be part of the official API in the meantime.

HTML5: Saving Documents in an MVC Controller Method

Web.TextControl is a Web Forms ASP.NET component that can be also integrated into MVC without breaking the MVC rules. This tutorial shows how to implement the HTML5 editor within ASP.NET MVC. Basically, the ActionResult TemplateEditor executes an ASPX page with the Web.TextControl in memory in order to render the content as a string. In this concept, we can still use code-behind to load and save documents without losing the Controller routes and logic. But when saving a document inside the…

HTML5: Saving Documents in an MVC Controller Method

Web.TextControl is a Web Forms ASP.NET component that can be also integrated into MVC without breaking the MVC rules. This tutorial shows how to implement the HTML5 editor within ASP.NET MVC.

Basically, the ActionResult TemplateEditor executes an ASPX page with the Web.TextControl in memory in order to render the content as a string.

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(); 
    } 
}

In this concept, we can still use code-behind to load and save documents without losing the Controller routes and logic. But when saving a document inside the ASPX page, we might want to know that in the MVC Controller in order to store the data in a database.

Therefore, the Controller gets a new HttpPost method SaveDocument:

[HttpPost]
public bool SaveTemplate(string documentName, string document)
{
    // these are the values coming from the HTTP Post action
    // of the ASPX page
    string docName = documentName;
    string doc = document;

    // the document can now be saved in your Controller action
    // ...

    // return true, if successful
    return true;
}

This method accepts two strings the document name and the document itself in the RTF format. In the ASPX page, the document is saved on a button click within an AJAX UpdatePanel:

protected void Button1_Click(object sender, EventArgs e)
{
    // save the document to a string variable
    var RTFDocument = String.Empty;
    TextControl1.SaveText(out RTFDocument,
        TXTextControl.Web.StringStreamType.RichTextFormat);

    // create a new WebRequest
    WebRequest request = WebRequest.Create(
        "http://" + Request.Url.Authority + "/Home/SaveTemplate");

    // set the POST data
    var postData = "documentName=" + TextBox1.Text;
        postData += "&document=" + RTFDocument;
    
    // encode the data as an byte[] array
    var data = Encoding.ASCII.GetBytes(postData);

    // set the method, content type and length
    request.Method = "POST";
    request.ContentType = "application/x-www-form-urlencoded";
    request.ContentLength = data.Length;

    // write the data to the request stream
    using (var stream = request.GetRequestStream())
    {
        stream.Write(data, 0, data.Length);
    }

    // get response from HttpPost method
    WebResponse response = (HttpWebResponse)request.GetResponse();

    // read the data and check for return value "True"
    var dataStream = response.GetResponseStream();
    StreamReader reader = new StreamReader(dataStream);

    string sReturnValue = reader.ReadToEnd();

    if (sReturnValue == "True")
        lblInfo.Visible = true;
}

In code-behind, the document is saved as RTF in a string variable and a new WebRequest object is used to call the new Controller method SaveDocument. The document name and the document itself are encoded as a byte[] array and posted to the Controller.

This way, you can synchronize your Controller logic and save documents inside your Controller code.

We didn't release the official roadmap for version X13 yet, but this we can already announce: We will release an MVC version of Web.TextControl soon including a Nuget package and a pure MVC model.

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

Stay in the loop!

Subscribe to the newsletter to receive the latest updates.

GitHub

Download and Fork This Sample on GitHub

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

Please fork and contribute.

Download ZIP

Open on GitHub

Open in Visual Studio

Requirements for this sample

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

Related Posts

ASP.NETGitHubHTML5

MVC: Loading Files from the Backstage Menu

Happy New Year, everybody! In the last blog entry, we showed how to replace the file menu with an MS Word-style backstage menu. This project shows how to load documents from a partial view in the…


ASP.NETGitHubHTML5

MVC: Replace the File Menu with a Backstage View Menu

Microsoft Word provides a very smart way to manage documents and related data such as metadata and personal information in a separate view: The backstage view. The ribbon bar contains commands for…


ASP.NETGitHubHTML5

MVC: Replace the Ribbon Table Menu with a Quick Insert Table Drop-down

MS Word provides a quick insert table drop-down to insert tables into the document. This sample shows how to replace the insert table button with such a table insert drop-down. The replacement and…


ASP.NETGitHubHTML5

MVC: Arrange a Docked Web.TextControl with a Custom Bar at the Top

Consider the following task: The Web.TextControl should be arranged under a custom bar that is located at the top of the page like in the following screenshot: Objects such as DIV elements doesn't…


ASP.NETGitHubHTML5

MVC: Autosave and Restore Documents to and from the Local Browser Storage

Modern HTML5-based web browsers support persistent data storage with an enhanced capacity up to 50MB local storage. It is possible to store data persistently or session based. This sample shows…