Showing the views in Modal Popup in MVC

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
    .Title("PopUp View")

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.
<a href="" id="spsViewDetail">Click Here for Popup View</a>
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.       
                function (data) {                    
                    .css("overflow-x", "hidden")
                    .css("overflow-y", "auto");                   
We know that all the actions work in MVC is through Ajax, and the controller will respond in JSON format.
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.


  1. Is there a way that we can do this without using telerik()

  2. Please answer to above question

  3. alsp provide demo sample

  4. Hi
    There is a way just by using JQuery.