I am generating a Word document with aspose and I would like to show some kind of preview to the user before they decide to save the document. I have a view where users can enter their info:
@model WordAutomation.Models.Document
@{
ViewBag.Title = "Document";
}
<h2>Document</h2>
@using (Html.BeginForm()) {
@Html.ValidationSummary(true)
<fieldset>
<legend>Document</legend>
<div class="editor-label">
@Html.LabelFor(model => model.ClientTitle)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.ClientTitle)
@Html.ValidationMessageFor(model => model.ClientTitle)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.ClientFullName)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.ClientFullName)
@Html.ValidationMessageFor(model => model.ClientFullName)
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
<div>
@Html.ActionLink("Preview", "Preview")
</div>
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}
Now I have the controller for preview:
public ActionResult Preview()
{
return View();
}
When the user clicks on preview I want to generate the Word document (that part is already done) and display it as a popup on the screen for the user.
Exactly what I need is how to display image on the screen, once I'll enter the preview controller. Is that possible somehow?
You could use jquery ui dialog to create a modal and use it something like this. Do not use popup of Access http://ui.jquery.com to download the library and reference on your application.
At your view, you can add this code to create a dialog modal and load it from the server:
<script type="text/javascript">
$(function () {
$('#previewDocumentDialog').dialog({
autoOpen: false,
resizable: false,
title: 'Preview',
modal: true,
width: 400,
height: 500,
open: function(event, ui) {
//Load the PreviewWordDocument action which will return a partial view called _PreviewWordDocument
$(this).load("@Url.Action("PreviewWordDocument")"); //add parameters if necessary
},
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
// an event click for you preview link to open the dialog
$('#previewLink').click(function () {
$('#previewDocumentDialog').dialog('open');
});
});
</script>
Create a Div and your link preview, add an id to create/open an dialog of jquery ui
<div id="previewDocumentDialog" title="Preview" style="overflow: hidden;">
<div>
@Html.ActionLink("Preview", "Preview", null, new { id = "previewLink" })
</div>
On your controller, you need to have a action to return this PartialView
public ActionResult PreviewWordDocument(/*add parameters if necessary*/) {
var model = "path of your word image";
return PartialView("_PreviewWordDocument", model);
}
You can type your partialView with the image path on a string
@model string
<img src="@model" style="width:400;height:500px;" />
And remember to do not use popup window of browser.