open view as modal in different view

Question

User1403418439 posted

Here is the scenario.

1. On contact.cshtml page I have text fields and a button. User completes the fields and on "continue" button click, it should go to a controller action.(this I achieved using jquery ajax post).
2. From that controller action, after doing some calculations it should return a partial view(xyz.cshtml) as modal popup/window in the contact.cshtml.

Answer 1

User-271186128 posted

Hi sridharvoruganti,

• On contact.cshtml page I have text fields and a button. User completes the fields and on "continue" button click, it should go to a controller action.(this I achieved using jquery ajax post).
• From that controller action, after doing some calculations it should return a partial view(xyz.cshtml) as modal popup/window in the contact.cshtml.

If you want to display the partial view in the popup modal, you could try to use JQuery Dialog modal popup or Bootstrap JS modal. In the JQuery Ajax success function, you could add the partial view into the modal content (in the contact.html). Then, display the popup modal.

Please refer to the following code:

Code in the action method:

    [HttpPost]
    public ActionResult Details(string customerId)
    {
        NorthwindEntities entities = new NorthwindEntities();
        //return the partialview.
        return PartialView("Details", entities.Customers.Find(customerId)); 
    }

Code in the main view (this sample using JQuery dialog, the dialog div is the modal container):

    <table cellpadding="0" cellspacing="0" id="CustomerGrid">
        <tr>
            <th>CustomerID</th>
            <th>Contact Name</th>
            <th>City</th>
            <th>Country</th>
            <th></th>
        </tr>
        @foreach (Customer customer in Model)
        {
            <tr>
                <td>@customer.CustomerID</td>
                <td>@customer.ContactName</td>
                <td>@customer.City</td>
                <td>@customer.Country</td>
                <td><a class="details" href="javascript:;">View</a></td>
            </tr>
        }
    </table>
    <div id="dialog" style="display: none">
    </div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
    <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css"
          rel="stylesheet" type="text/css"/>
    <script type="text/javascript">
        $(function () {
            $("#dialog").dialog({
                autoOpen: false,
                modal: true,
                title: "View Details"
            });
            $("#CustomerGrid .details").click(function () {
                var customerId = $(this).closest("tr").find("td").eq(0).html();
                $.ajax({
                    type: "POST",
                    url: "/Home/Details",
                    data: '{customerId: "' + customerId + '" }',
                    contentType: "application/json; charset=utf-8",
                    dataType: "html",
                    success: function (response) {
                        $('#dialog').html(response); //add the partial view into the modal content.
                        $('#dialog').dialog('open'); //display the modal popup.
                    },
                    failure: function (response) {
                        alert(response.responseText);
                    },
                    error: function (response) {
                        alert(response.responseText);
                    }
                });
            });
        });
    </script>

More details steps, please check this article.

You could also refer to the following articles to use Bootstrap JS Modal:

https://www.c-sharpcorner.com/article/render-partial-view-as-modal-popup-using-ajax-call-with-json/

https://forums.asp.net/t/2119481.aspx

Best regards,
Dillion