1

asposeを使用して単語ドキュメントを生成しています。ユーザーがドキュメントを保存する前に、ある種のプレビューを表示したいと思います。ユーザーが自分の情報を入力できるビューがあります。

@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();
        }

ユーザーがプレビューをクリックしたときに、単語ドキュメントを生成し（その部分はすでに完了しています）、ユーザーの画面にポップアップとして表示します。まさに必要なのは、プレビューコントローラに入ったら、画面に画像を表示する方法です。それはどういうわけか可能ですか？大変感謝しております。

4

3 に答える 3

1

jquery ui dialog を使用してモーダルを作成し、次のように使用できます。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 に答える