我正在使用aspose生成word文档,我想在用户决定保存文档之前向用户显示某种预览。 我有一个用户可以输入信息的视图:
@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")
}
现在我有了预览控制器:
public ActionResult Preview()
{
return View();
}
当用户点击预览时,我想生成word文档(该部分已经完成)并在屏幕上将其显示为用户的弹出窗口。 一旦我进入预览控制器,我需要的是如何在屏幕上显示图像。 这有可能吗? 非常感谢。
答案 0 :(得分:1)
你可以使用jquery ui对话框来创建一个模态并使用它。不要使用Access http://ui.jquery.com的弹出窗口来下载应用程序中的库和参考。
在您的视图中,您可以添加此代码以创建对话框模式并从服务器加载它:
<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>
创建Div和链接预览,添加id以创建/打开jquery ui对话框
<div id="previewDocumentDialog" title="Preview" style="overflow: hidden;">
<div>
@Html.ActionLink("Preview", "Preview", null, new { id = "previewLink" })
</div>
在您的控制器上,您需要执行操作才能返回此PartialView
public ActionResult PreviewWordDocument(/*add parameters if necessary*/) {
var model = "path of your word image";
return PartialView("_PreviewWordDocument", model);
}
您可以使用字符串
上的图像路径键入partialView@model string
<img src="@model" style="width:400;height:500px;" />
答案 1 :(得分:0)
您可以使用JQuery Lightbox之类的内容,使用您创建的an action which returned the preview image作为图像来源的href来显示图像。
答案 2 :(得分:0)
如果您使用模态而不是弹出窗口,可以使用javascript或jquery触发它(如果您愿意)。 JQuery Modal是个不错的选择。
然后,您可以使用JQuery克隆要显示的内容的html,并为模态div使用不同的CSS样式。