1

我正在使用 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 文档（该部分已经完成）并将其显示为用户屏幕上的弹出窗口。一旦我进入预览控制器，我需要的是如何在屏幕上显示图像。这有可能吗？非常感激。

4

3 回答 3

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;" />

并记住不要使用浏览器的弹出窗口。

于 2012-12-06T14:17:59.983 回答
0

您可以使用JQuery Lightbox之类的东西来显示图像，该操作使用返回您创建的预览图像作为图像源的 href 的操作。

于 2012-12-06T14:16:17.930 回答
0

如果您使用模式而不是弹出窗口，则可以使用 javascript 或 jquery 触发它（如果您愿意）。JQuery Modal是一个不错的选择。

然后，您可以使用JQuery克隆您想要显示的内容的 html，并为您的模态 div 使用不同的 CSS 样式。

于 2012-12-06T14:31:56.970 回答