asp.net-mvcasp.net-mvc-3razorasp.net-mvc-4aspose

Display image in a popup in mvc


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?


Solution

  • 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.