The reporting engine MailMerge is used to merge templates with data. In combination with the HTML5 based MVC editor Web.TextControl, the created template can be merged in the MVC controller and loaded back into the view.

The following HttpPost method Merge accepts the model DocumentViewModel which contains the template encoded as a Base64 string. The data source is loaded into a new DataSet object. Finally, the template is loaded into a new instance of the MailMerge class and merged with the loaded DataSet. The created document is returned to the view.

[HttpPost]
public string Merge(DocumentViewModel model)
{
    // convert the template to a byte array
    byte[] document = 
        Convert.FromBase64String(model.BinaryDocument);

    // load the the data source
    DataSet ds = new DataSet();
    ds.ReadXml(Server.MapPath("/App_Data/data/sample_db.xml"),
        XmlReadMode.Auto);

    byte[] sDocument;

    // create a new ServerTextControl and MailMerge component
    using (TXTextControl.ServerTextControl tx =
        new TXTextControl.ServerTextControl())
    {
        MailMerge mm = new MailMerge();
        mm.TextComponent = tx;

        // load the template and merge
        mm.LoadTemplateFromMemory(document, 
            FileFormat.InternalUnicodeFormat);
        mm.Merge(ds.Tables[0], true);

        // save the document
        mm.SaveDocumentToMemory(out sDocument, 
            TXTextControl.BinaryStreamType.InternalUnicodeFormat, null);
    }

    // encode and return the merged document
    return Convert.ToBase64String(sDocument);
}

The contoller method is called from the Javascript function Merge. The current document is saved into a Base64 encoded string and is being sent using AJAX to the controller method Merge.

When the controller method returns successfully, the merged document is loaded into the editor.

function Merge() {
    // save the document
    TXTextControl.saveDocument(
        TXTextControl.streamType.InternalUnicodeFormat,
        function (e) {

            var serviceURL = "/Home/Merge";

            // call the controller
            $.ajax({
                type: "POST",
                url: serviceURL,
                contentType: 'application/json',
                data: JSON.stringify({
                    BinaryDocument: e.data
                }),
                success: successFunc,
                error: errorFunc
            });

            // the controller sends back the merged document
            // that is loaded into the editor
            function successFunc(data, status) {
                TXTextControl.loadDocument(
                    TXTextControl.streamType.InternalUnicodeFormat, data);
                alert("Document has been merged successfully.");
            }

            function errorFunc() {
                alert('Error');
            }
        });
}

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