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.