Home > ASP.NET MVC > ASP.NET # MVC # 13 – Open window or Modal Pop-Up and fill the contents of it from the controller method.

ASP.NET # MVC # 13 – Open window or Modal Pop-Up and fill the contents of it from the controller method.

Hi Geeks,

As we know in web applications window pop ups play an important role for displaying the data without refreshing the current page.

In this article we will see

1) How to open the window pop up and modal window pop up on button click event ,

2) As well as filling the content of the window by calling the method on controller the asynchronously.

**  Suppose we have a view as follows

 

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
   
Home Page
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> 
    
<
input type="button" id="btnSave" value="Show Popup" onclick="ShowPopUp();" />

    <script type="text/javascript">

        ShowPopUp = function ()
        { 
window.showModalDialog(‘/Home/GetPopupData/1’ , "wndPopUp", ‘width=1000,height=1000’);
        }
   
    </script>
</
asp:Content>

 

DESCRIPTION

In the above view we have taken an input button with id btnSave . onclick event of this button we are calling the JavaScript method called ShowPopUp .

ShowPopUp method contains a method window.showModalDialog (for MODAL – POP –UP) which has first parameter as url And we are passing the value  ‘/Home/GetPopupData/1’, so it will give call to the method GetPopupData on the controller Home which has parameter id.

 

The code  on controller is as follows

image

 

Note : The parameter in the above method is taken as “id” because in the golbal.asax file we have the default route as follows

image

once you click on the button above it will give you output as follows

image

Note :  If you want to open a normal window you can use the function window.open for more on window.open visit Details of Window.Open .

The parameters of Window.open and winodw.showModalDialogue are almost same.

 

Hope this will help you.

Thanks.

Advertisements
Categories: ASP.NET MVC
  1. Andrew
    December 27, 2011 at 8:39 am

    Great.That`s very useful. Thanks.

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: