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.

MVC: Loading files from 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; }
}
view raw Document.cs hosted with ❤ by GitHub

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>
view raw Open.cshtml hosted with ❤ by GitHub

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);
}
view raw HomeController.cs hosted with ❤ by GitHub

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');
}
}
view raw tx.js hosted with ❤ by GitHub

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);
}
view raw HomeController.cs hosted with ❤ by GitHub

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