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.
Step 5: Now, comes to important part of assigning a specific view to the Telerik window. Following code will be taking care of this.
jQuery.get(url,[data],[success(data,textStatus,jqXHR)],[dataType])
Parent View:
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.
Is there a way that we can do this without using telerik()
ReplyDeletePlease answer to above question
ReplyDeletealsp provide demo sample
ReplyDeleteHi
ReplyDeleteThere is a way just by using JQuery.
http://jquerybyexample.blogspot.com/2012/12/10-jquery-modal-dialog-boxes-plugins.html
A good example.
ReplyDeleteVery helpful for me.