Search
Submit & Win
Submit and win
Cash Prizes !
Winners

Win Prizes

Social Presence
Twitter Twitter LinkedIn YouTube Google

Like us on Facebook
Advertisements
Top Articles Author
Sat, 20-Dec-2014 Authors
All Time Authors
Sourav.Kayal
39750
SheoNarayan
38550
Niladri.biswas
33350

Latest members | More ...


(Statistics delayed by 5 minutes)
Ads
 Article

How to use Ajaxtoolkit ModalPopupExtender in ASP.NET AJAX

Vuyiswamb
Posted by under ASP.NET AJAX category on for Beginner level | Points: 250 | Views : 65652 red flag
If you found plagiarised (copied) or inappropriate content,
please let us know the original source along with your correct email id (to communicate) for further action.
Rating: 5 out of 5
1 vote(s)
It is going to be full 4 years since I started writing articles. My First 4 years were a learning curve and no one could read my articles because I was just a newbie. I am hoping to write a book next year. Why I am saying that , is that I came across a book from a a reputable publisher, where an author badly explain a topic and he ended up pasting a generated that took 3 pages of his book. I will not do that and from the articles I have written before I have never done that, this means there is still room for people like Vuyiswa Maseko, Sheo Narayan and other guys like Abhi and QuestPond to write a book.

Introduction

It is going to be full 4 years since I started writing articles. My First 4 years were a learning curve and no one could read my articles because I was just a newbie. I am hoping to write a book next year.The Reason i wrote this article , is that I came across a book from a reputable publisher, where an author badly explain a topic and he ended up pasting a generated code that took 3 pages of his book. I will not do that and from the articles I have written before I have never done that. This means there is still a room for people like Vuyiswa Maseko, Sheo Narayan and other guys like Raja,Abhi2434 and QuestPond to write a book.

Background

This will be the shortest article I have ever written. Another reason why we write such articles here at Dotnetfunda is that we want our readers to be redirected here at home, than outside. We are motivated by the number of post posted regarding the subject, no matter how small the topic.

I wrote this article to demonstrate the Ajax’s modalpopupExtender. I am not going to go the route of showing you how to add the controls in your toolbox, because in almost all the Ajax article I have ever written, I have demonstrated that, please check one of my articles here at www.Dotnetfunda.com .

Using the code

We are going to use C# as our language.

Start

Open Visual Studio and Create a New Website. Automatically you will have an empty page defined for you like this

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

</head>

<body>

    <form id="form1" runat="server">

    <div>

   

    </div>

    </form>

</body>

</html>

We are going to dynamically create a pop-up extender on the server side. One might ask why would you want to do that. Not everything can be done on the client-side, if you believe in that, you will end-up finding your self doing page methods and later experiencing performance problems and controls not to follow the asp.net page life cycle like I did in the past.

Sometimes you might want to show a modal that has some controls that are created dynamically on click of a button and by the same button that is supposed to open your modal pop-up extender.

In this article I will demonstrate a very simple and non Complex code that will allow you to create controls dynamically and add them to your Modal pop-up Extender. The only things I will add on design time are:

  • ·         CSS
  • ·         PanelModal (Carry the Controls that will be in the Modal)
  • ·         UpdatePanel1 (Stop the Flickering of the Page
  • ·         Button to trigger the Modal to show
  • ·         Button to Close the Modal
  • ·         ScriptManager(All Ajax Controls must have this, unless you want to create your own, which is a waste of time)

And that is all. Wow this is simple, but I have seen articles that made it a complex subject. You can clearly see that with Ajaxtoolkit, you don’t need to do anything to show a modal pop that is looking fairly decent.

Now Add make sure that your markup looks like mine

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>

 

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

   <style type="text/css">

 .modalBackground

{

      background-colorYellow;

      filteralpha(opacity=60);

      opacity0.6;

}

   </style>

</head>

<body>

    <form id="form1" runat="server">

    <asp:ScriptManager ID="ScriptManager1" runat="server">

    </asp:ScriptManager>

    <div>

    <asp:Panel ID="Panel1" runat="server">

    <asp:Button ID="Button1" runat="server"

    Text="CreateModal" OnClick="Button1_Click" />

    </asp:Panel>

    <asp:Panel ID="ModalPanel" runat="server" HorizontalAlign="Center" Style="display: none" BackColor="Green">

    All these Units Exists in Another Boxes

    <asp:Button ID="btnCancel" runat="server" Text="Close Me" />

    </asp:Panel>

    </div>

    </form>

</body>

</html>

Now let me start by explaining it from the top. The First important part is the modalBackground, this is the css that will be used our Ajax modalpopup extender. The Following important part is the Scriptmanager, all the Ajax controls must have the scriptmanager, and you can add this in your master page, if you are using one. There is nothing special to be done there, and the next one is the panel that will carry the control that will invoke the modal, it does not need to be in a panel, but I added to organize my controls. And a modal panel follows. As you can see the style display property is set to “none” and when you run your application at first it will not be visible, and another part os the button that will be used to cancel or close the modal. You will see later how we use these controls in Ajaxmodalpopup Extender.

As you can see your button1 has an event wired to the control, to create a handler for the button click, just switch to desgin view and double click on the button and Visual Studio will create a handler for you. And in your click event of button1 add the following code as depicted below

  Protected void Button1_Click(object sender, EventArgs e)

    {

        CheckBoxList lstchecks = new CheckBoxList();

        for (int i = 0; i <5; i++)

        {

            lstchecks.Items.Add("Unit" + i);

 

        }

 

        AjaxControlToolkit.ModalPopupExtender modalPop                             new AjaxControlToolkit.ModalPopupExtender();

 

        modalPop.ID = "popUp";

 

        modalPop.PopupControlID = "ModalPanel";

 

        modalPop.TargetControlID = "Button1";

 

        modalPop.DropShadow = true;

 

        modalPop.BackgroundCssClass = "modalBackground";

 

        modalPop.CancelControlID = "btnCancel";

       

        this.Panel1.Controls.Add(modalPop);

 

        this.ModalPanel.Controls.Add(lstchecks);

 

        modalPop.Show();

 

    }

Now as you can see above, I am dynamically creating a checkboxlist and I am adding values to the list. The  following is the creation of the modalpopupextender and I give it a name and the popupControlID is the panel that will be shown when the modal is shown, this panel can contain other controls.  The TargetControlID is the control that will be used to invoke the modal; in this case it is the current button “Button1”. BackgroundCssClass is the css that will handle the background of the modal; this is the css we defined earlier in our markup. The nearly last part is CancelControlID, this is the button that will be used to close the modal, the nice thing here, is that you don’t need to write a single code to close the modal. At the bottom you will notice I am adding controls to a panel and at the end I am showing the modal. 

Now that we have all we need, Run your application and you will first see the button as depicted below


Now if you click the button you will get this


I think I have said enough, let us jump to my conclusion.

Conclusion

There are many ways to create a modal, but this is one of the simplest ways. I have been using Telerik and Infragistics almost my whole life and I must say Telerik does not have a popup modal like this one. I have used the Ingragistics modal; it is very nice thing to use. I colleague of mine showed me a Devexpress one, that is similar to the Infragistics one. You can use the one that you can afford. If you can’t buy third party controls then this one is for you, else “You can afford” Don’t reinvent the wheel, use the third party control that has more nice things in it.

Thank you for visiting DotnetFunda.


Vuyiswa Maseko

Page copy protected against web site content infringement by Copyscape
About the Author

Vuyiswamb

Full Name: Vuyiswa Maseko
Member Level: NotApplicable
Member Status: Member,MVP,Administrator
Member Since: 7/6/2008 11:50:44 PM
Country: South Africa
Thank you for posting at Dotnetfunda [Administrator]
http://www.Dotnetfunda.com

Vuyiswa Junius Maseko is a Functional Head(Property Valuations) for City of Tshwane Municipality in South Africa, Gauteng and a moderator at www.DotnetFunda. Vuyiswa has been developing for 14 years now. his major strength are C# 1.1,2.0,3.0,3.5,4.0,4.5 and vb.net and sql and his interest were in asp.net, c#, Silverlight,wpf,wcf, wwf and now his interests are in Kinect. He has been using .net since the beta version of it. Vuyiswa believes that Kinect is the next generation of computing. . Thanks to people like Chris Maunder (codeproject), Colin Angus Mackay (codeproject), Dave Kreskowiak (Codeproject), Sheo Narayan (.Netfunda),Rajesh Kumar(Dell) They have made vuyiswa what he is today. Occupation: Functional Head Company: City of Tshwane Location: South Africa
Login to vote for this post.
Share this to:

Bookmark It

Comments or Responses

Posted by: Vinay13mar on: 10/15/2012 | Points: 25

Hi.
You have written a nice article. please checl this also which i found.

http://www.dotnetpools.com/Article/ArticleDetiail/?articleId=33&title=How%20To%20Make%20Ajax%20Call%20Using%20Jquery%20in%20Asp.Net

Login to post response

Comment using Facebook(Author doesn't get notification)