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-color: Yellow;
filter: alpha(opacity=60);
opacity: 0.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