-->

06/09/2011

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

4 comments:

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

    ReplyDelete
  2. Please answer to above question

    ReplyDelete
  3. alsp provide demo sample

    ReplyDelete
  4. Hi
    There is a way just by using JQuery.
    http://jquerybyexample.blogspot.com/2012/12/10-jquery-modal-dialog-boxes-plugins.html

    ReplyDelete