Display image in a popup in mvc

Question

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?

Do you already have a method for generating an image of the Word document you've created? — Steve Wilkes, Dec 06 '12 at 13:28
Can you use a modal instead of a popup? Its easier to manipulate the html and css, once its on the same page. — Gabriel, Dec 06 '12 at 14:06
@Gabriel Whatever it works, I just need something where I can show the image, modal would be excellent. Can you give me some kind of example how can I trigger the modal from the controller please. Thanks — Laziale, Dec 06 '12 at 14:10

score 1 · Accepted Answer · answered Dec 06 '12 at 14:17

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.

score 0 · Answer 2 · edited May 23 '17 at 11:51

0

You could use something like JQuery Lightbox to display the image using an action which returned the preview image you've created as the href for the image source.

edited May 23 '17 at 11:51

Community

1
1

answered Dec 06 '12 at 14:16

Steve Wilkes

7,085
3
29
32

score 0 · Answer 3 · answered Dec 06 '12 at 14:31

If you use a modal instead of a popup, you can trigger it with javascript, or jquery if you like. JQuery Modal is a good option.

Then you can clone the html of the content that you want display using JQuery and use a different CSS style for your modal div.

Display image in a popup in mvc

3 Answers3