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 backstage menu.

The partial backstage view Open.cshtml uses a very simple model to describe a document:

public class Document
{
    public Document() { }

    public Document(string FilePath)
    {
        this.FilePath = FilePath;
        this.Name = Path.GetFileName(this.FilePath);
    }

    public string Name { get; }
    public string FilePath { get; set; }
}

In the partial view, a list item is created for each file of the given model:

<ul>
 @foreach (var item in Model) {
  <li>
   <a onclick="LoadFromController('@item.Name')" class="right" href="#">
    <img src="~/img/doc.png" /><strong>@item.Name</strong>
    <p>...

     @{
      if (Path.GetDirectoryName(item.FilePath).Length > 50)
      {
       @Path.GetDirectoryName(item.FilePath).Substring(
        Path.GetDirectoryName(item.FilePath).Length - 50);
      }
      else
      {
       @Path.GetDirectoryName(item.FilePath);
      }
     }

    </p>
   </a>
  </li>
 }
</ul>

The controller ActionResult GetView iterates through all files of a given directory in order to create the view model that is used in the above partial view:

public ActionResult GetView(string viewName)
{
    switch (viewName)
    {
        case "Open":
            var documents = new List<Document>();

            foreach (string file in Directory.GetFiles(
              Server.MapPath("/App_Data/documents")))
            {
                Document doc = new Document(file);
                documents.Add(doc);
            }

            return PartialView("Stageviews/Open", documents);
    }

    return PartialView("Stageviews/" + viewName);
}

If a file is clicked in the view, the following Javascript loads a document from the controller HttpPost method LoadTemplate:

function LoadFromController(DocumentName) {
    var serviceURL = "/Home/LoadTemplate";

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

    function successFunc(data, status) {
        TXTextControl.loadDocument(
          TXTextControl.streamType.InternalUnicodeFormat, data);
        animateBackstage(1);
    }

    function errorFunc() {
        alert('File could not be loaded');
    }
}

The controller method LoadTemplate loads the selected file into a temporary ServerTextControl and returns the document in the internal TX Text Control format which is loaded client-side using Javascript into TX Text Control.

[HttpPost]
public string LoadTemplate(LoadDocumentViewModel model)
{
    byte[] data;

    using (TXTextControl.ServerTextControl tx =
      new TXTextControl.ServerTextControl())
    {
        tx.Create();

        TXTextControl.StreamType streamType =
          TXTextControl.StreamType.WordprocessingML;

        switch(Path.GetExtension(model.DocumentName))
        {
            case ".doc":
                streamType = TXTextControl.StreamType.MSWord;
                break;
            case ".rtf":
                streamType = TXTextControl.StreamType.RichTextFormat;
                break;
            case ".tx":
                streamType = TXTextControl.StreamType.InternalUnicodeFormat;
                break;
            case ".pdf":
                streamType = TXTextControl.StreamType.AdobePDF;
                break;
        }

        tx.Load(Server.MapPath("/App_Data/documents/" +
          model.DocumentName), streamType);

        tx.Save(out data,
          TXTextControl.BinaryStreamType.InternalUnicodeFormat);
    }

    return Convert.ToBase64String(data);
}

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