ASP.NET ajax modal popup

popup windows  usage is one of the every day tasks for any web developer. The problem of the normal html simple popups that it is usually blocked by the browser of the client also it is not attractive specially if you are developing a web site that need to be very attractive. So in such cases you will need ajax popup instead.

I searched the web allot in the end i can say that the best options you have as a asp.net developer are

1-The modal popup extender which is part of the free  asp.net ajax controls tool kit.

2-The  free greybox modal popup form orangoo labs.

so i will concentrate on comparison between the two options after trying them for a long time

grey box vs modal popup extender:

i will not concentrate  on the usage of the two techniques because this will be a very lengthy explanation instead i will mention an example on each one and a comparison between them .But both have a very good documentation and step by step setup in the manufacturer web sites

you can find full explanation of the modal popup extender at codeplex.com and www.asp.net website also have a very good example of using this control.

The other option (orangoo grey box) is also explained in details here.

Greybox concept:

Simply when you click on the link  the greybox script take the target of any normal a link and open the target page in a good looking modal popup( this link can be generated dynamically to make a master details scenario  ) peace of cake.

Modal popup extender concept:

The process is more complicated here (it is Microsoft funded project lol ) . Here you have to put the contents of the popup you want to open in an asp.net panel and the modal popup extender control taking care of hiding this panel when the page load  and and showing the panel when the user click the trigger button  with all of it’s contents as a popup.Notice  that the popup here is part of the main page not a separate physical page like  greybox  and from here come the problems i think that using ajax controls toolkit on the page modifying the page life cycle some how. So you start to have unexpected problems regarding data binding  and logic modification during  page events which need great effort in debugging till the page work like expected.

Greybox  asp.net  installation  and usage:

Suppose you have a  product catalog(master ) and when the user press on the product image a popup is opened containing the product details(details). Using the grey box in this situation will be very easy you will be surprised by the fast results.

1- Add an asp.net listview control to the main page containing the list of products links with each link linking to the product details page by changing the query string  value to the wanted ID’s (like ~/productdetails.aspx?productid=1)

2-Create the productdetails page with a formview control on the page that will display the product details . Remember to configure the sql data  source to  select one record based on the query string parameter passed from the  products list page(make the diameters of the form view 400 * 400 pixels because this will be the diameter of the popup)

3-copy the greybox folder to your root directory

4-Append following to your header section (in between <header>…</header>).

GB_ROOT_DIR is the URL where static files are located:

<script type=”text/javascript”>

var GB_ROOT_DIR = “http://mydomain.com/greybox/”;

</script>

GB_ROOT_DIR should be absolute.

5-Append also following scripts and one stylesheet:

<script type=”text/javascript”src=”greybox/AJS.js”></script>

<script type=”text/javascript”src=”greybox/AJS_fx.js”></script>

<script type=”text/javascript”src=”greybox/gb_scripts.js”></script>

<link href=”greybox/gb_styles.css”rel=”stylesheet”type=”text/css”/>

AJS_fx.js is optional,it’s used for effects. If you don’t wish effects,then don’t include AJS_fx.js in your header section.

6-add a  “rel=”gb_page[500,500]”attribute to the hyperlink data bound control inside the main page.this will make the link open the page in the popup window not a normal window

the listview must look like

</ItemTemplate>

<AlternatingItemTemplate>

<td runat=”server”style=”">

prodid:

<asp:Label ID=”prodidLabel”

runat=”server”

Text=’<%# Eval(“prodid”) %>’/>

<br />

</td>

</AlternatingItemTemplate>

and you are finished when you click on any link the product details will open in a popup window.

Modal popup control extender setting up and usage:

1-First you should prepare vwd for asp.net ajax controls toolkit learn how from here

2-As we mentioned before modal popup control extender is not opining a different physical page inside the modal popup instead it just will display the contents of the asp.net panel you select and display it using ajax as a layer over the same window. Here we will use another example (the one i already have on my pc)suppose we hade a list of categories and when the user click on an category image the popup will open containing a grid with each row have a product image and a link .so will make a asp.net page named products.aspx. The page will contain a categories datalist(the example that i have on my pc was before the great listview control) containing a list image buttons (notice not links but button to act as a trigger for the modal popup extender)

the item template code should look like this:

<ItemTemplate>

&nbsp;&nbsp;&nbsp;&nbsp;

<asp:ImageButton ID=”ImageButton1″runat=”server”CausesValidation=”False”CommandName=”select”

ImageUrl=’<%# Eval(“categorylogostring”) %>’Height=”95px”Width=”95px”ImageAlign=”Middle”/>

&nbsp;&nbsp;

</ItemTemplate>

2-Then we have to add a panel containing the grid view that will present the products:

<asp:Panel ID=”Panel1″runat=”server”Height=”30px”ScrollBars=”Auto”Style=”border-left-color:#ff3333;

border-bottom-color:#ff3333;border-top-style:groove;border-top-color:#ff3333;padding:20px;

border-right-style:groove;border-left-style:groove;background-color:black;

border-right-color:#ff3333;border-bottom-style:groove”Width=”50px”>

<asp:GridView ID=”GridView1″runat=”server”AutoGenerateColumns=”False”DataKeyNames=”linkid”

DataSourceID=”ObjectDataSource1″Style=”color:#ff0000″EmptyDataText=”No available links in this category ”

ShowHeader=”False”Width=”440px”BorderColor=”Black”BorderStyle=”None”BackColor=”Black”PageSize=”100″>

<Columns>

<asp:HyperLinkField DataNavigateUrlFields=”linkstring”DataNavigateUrlFormatString=”http://{0}”

DataTextField=”linkstring”>

<ItemStyle BackColor=”Black”BorderColor=”Black”BorderStyle=”None”ForeColor=”Red”/>

</asp:HyperLinkField>

<asp:ImageField DataImageUrlField=”linklogostring”DataImageUrlFormatString=”~/pictures/linkslogos/{0}”>

<ControlStyle Height=”50px”/>

<ItemStyle BackColor=”Black”BorderColor=”Black”BorderStyle=”None”/>

</asp:ImageField>

</Columns>

</asp:GridView>

<br />

<asp:Button ID=”ok”runat=”server”Text=”ok”/></asp:Panel>

3-we will add a button inside the previous panel that will act as a close button to close the popup.

<asp:Button ID=”ok”runat=”server”Text=”ok”/>

4-then add the modal popup extender control inside the same panel.

<ajaxToolkit:ModalPopupExtender ID=”PopupControlExtender1″runat=”server”

PopupControlID=”panel1″TargetControlID=”Button1″DropShadow=”false”

CancelControlID=”ok”>

</ajaxToolkit:ModalPopupExtender>

popupcontrolid is the panel that you want to appear as a popup

targetcontrolid supposed to be the the id of the control that trigger of the popup notice that we will not use it here you can make it hidden because we will show the poup dynamically from the code behind page using the selected index changed of the categories list as a trigger.

dropshadow use this if you want the main page to darken after the popup open.

cancelcontrolid is id of the button to close the popup.

5-Then rap the panel that will act as a popup with all it’s contents in an asp.net ajax update panel and configure it to be triggered by the selected index changed event of the categories datalist. so when the user press the image button inside the datalist the button trigger the selected index changed event which is assigned as a asynchronous post back event because we added it as a trigger to the update panel so the page won’t refresh and the popup appear on the page.

here is the code of the poup panel inside the update panel

<ajax1:UpdatePanel ID=”UpdatePanel1″runat=”server”ChildrenAsTriggers=”False”UpdateMode=”Conditional”>

<ContentTemplate>

<asp:Panel ID=”Panel1″runat=”server”Height=”30px”ScrollBars=”Auto”Style=”border-left-color:#ff3333;

border-bottom-color:#ff3333;border-top-style:groove;border-top-color:#ff3333;padding:20px;

border-right-style:groove;border-left-style:groove;background-color:black;

border-right-color:#ff3333;border-bottom-style:groove”Width=”50px”>

&nbsp;

<asp:Button ID=”Button1″runat=”server”BorderStyle=”None”Style=”background-color:#000000″

Text=”Button”/>

<ajaxToolkit:ModalPopupExtender ID=”PopupControlExtender1″runat=”server”

PopupControlID=”panel1″TargetControlID=”Button1″DropShadow=”false”

BehaviorID=”mdlPopupFadeIn” CancelControlID=”ok”>

</ajaxToolkit:ModalPopupExtender>

<asp:GridView ID=”GridView1″runat=”server”AutoGenerateColumns=”False”DataKeyNames=”linkid”

DataSourceID=”ObjectDataSource1″Style=”color:#ff0000″

EmptyDataText=”No available links in this category ”ShowHeader=”False”Width=”440px”BorderColor=”Black”

BorderStyle=”None”BackColor=”Black”PageSize=”100″>

<Columns>

<asp:HyperLinkField DataNavigateUrlFields=”linkstring”DataNavigateUrlFormatString=”http://{0}”

DataTextField=”linkstring”>

<ItemStyle BackColor=”Black”BorderColor=”Black”BorderStyle=”None”ForeColor=”Red”/>

</asp:HyperLinkField>

<asp:ImageField DataImageUrlField=”linklogostring”DataImageUrlFormatString=”~/pictures/linkslogos/{0}”>

<ControlStyle Height=”50px”/>

<ItemStyle BackColor=”Black”BorderColor=”Black”BorderStyle=”None”/>

</asp:ImageField>

</Columns>

</asp:GridView>

</ContentTemplate>

<Triggers>

<ajax1:AsyncPostBackTrigger ControlID=”DataList2″EventName=”SelectedIndexChanged”/>

</Triggers>

</ajax1:UpdatePanel>

6-last thing we have to add the following code behind to rebind the data base update the update panel and show the popup dynamically.

Protected Sub DataList2_SelectedIndexChanged(ByVal sender As Object,ByVal e As System.EventArgs)

Handles DataList2.SelectedIndexChanged

‘set it to true so it will render

Me.GridView1.Visible = True

‘force databinding

Me.GridView1.DataBind()

‘update the contents in the detail panel

Me.UpdatePanel1.Update()

‘show the modal popup

Me.PopupControlExtender1.Show()

End Sub

oooooooooohhhhhhhhhhhh long exhausting hard to debug code when you compare it with the greybox but remember it is also fully customizable even if you don’t know anything about javascript. you can control the borders of the popup,the way to close it,,even animating the popup while opining and closing.

gerybox performance:

The performance here is just so great the full source code of the greybox is about 22kb .it’s browser compatibility is good it just didn’t work for me with ie6

but overall the performance is so great.

Modal popup control extender performance:

Modal popup extender is part of the asp.net ajax controls toolkit .Using this controls in any page require uploading many resources file to the visitors computer this files can reach 300kb. so when the user open the page for the first time he have to wait for these files to be saved. sure it is cached to the users computer and won’t need to be downloaded again but if the user has a bad connection speed he may go and don’t comeback again thinking that the website have something wrong.

but with even a medium dsl connection speed no problems and the page will load quite easily.

Customization of greybox:

I tried to change any thing in the great greybox because i am not the javascript man and i don’t think it is easy to customize greybox .use it out of the box or leave it.

customizing modal popup extender:

it is the strong point of usong modal popup control extender you can control almost every thing even animating the popup any way you want change borders buttons shapes every thing. and the good thing that you change every thing using a normal asp.net vb.net code without any need to learn javascript.

The over all result:

you have to use greybox whenever possible for the sake of easy installation,less or no coding also superior performance.

but when you need to have full control over every thing and customizing the scenario to a very special needs use the modal popup extender specially if you are not the JavaScript guy because you will deal with a very normal asp.net control.