Showing the views in Modal Popup in MVC

CodeProject

Showing a Modal popup using Jquery is nothing new.

The concept i like to stress on is how to display a View in that Popup.

Step 1: I have created a  View (Popup View). Make sure that you haven't selected any Layout page (Master), as we will b displaying it in the Popup.

Just for time being i embed some text in Popup View.

Step 2: Here in order to have ease of development, i have added a Telerik reference and using a telerik window. Place the below code for embedding the telerik window for accommodating your view.

@(Html.Telerik().Window() // Add Telerik.web.mvc.dll in references
    .Name("DetailWindow")
    .Title("PopUp View")
    .Draggable(true)
    .Modal(true)
    .Width(1190)
    .Scrollable(false)
    .Visible(false)   
    )

Step 3: Add the required script and CSS files to support the JQuery modal popup functionality.



Step 4: Create a button or a link for triggering the popup.
Paste the following code in your parent view.

<div>
<a href="" id="spsViewDetail">Click Here for Popup View</a>
</div>

Step 5: Now, comes to important part of assigning a specific view to the Telerik window. Following code will be taking care of this.

<script type="text/javascript">
$(document).ready(function () {
        $('#spsViewDetail').click(function () {
            var url = '@Url.Action("PopUpView", "Home")'
           //PopupView is the Action method name and Home is the controller name.       
            $.get(url,
                function (data) {                    
                    $('#DetailWindow').html(data);
                    $('#DetailWindow').find(".t-window-content")
                    .css("overflow-x", "hidden")
                    .css("overflow-y", "auto");                   
                   $('#DetailWindow').modal();
                });
        });
  });   
</script>    

We know that all the actions work in MVC is through Ajax, and the controller will respond in JSON format.
jQuery.get(url,[data],[success(data,textStatus,jqXHR)],[dataType]) 

url: A string containing the URL to which the request is sent.

data: A map or string that is sent to the server with the request.

success(data, textStatus, jqXHR): A callback function that is executed if the request succeeds.

dataType: The type of data expected from the server. Default: Intelligent Guess (xml, json, script, or html).

$.get() is the shorthand form of doing all the job of making an ajax call and receiving the JSON response.


Parent View:

View getting displayed on Modal Popup:

Is it helpful for you? Kindly let me know your comments / Questions.