Making Flexible User Input With Asp.Net Ajax PopUp & Calendar Extender Toolkit Controls


Complex user input design occurs oftenly in web app. Some of requirements need multiple inputs.
Using standard textbox, radio button, check box, combo box will resulting long and a lot of form elements with so many page refresh thus this is not good enough.
Application User Easiness of use requires simple process so we need to shorten & tidy up the look & feel of UI interface.

We need more sophisticated controls to accomplish that requirement. Fortunately, Asp.Net have Ajax PopUp Extender Control.
We can create several/combined inputs inside PopUp Extender and user see it as one control. Since this control is ajax enabled then when PopUp process is happening, page will only reload partially.

Other example I want to share in this blog post is Calendar Extender Toolkit. This is basically Ajax DatePicker.

Generally, we need a textbox, PopUp panel and PopupControlExtender to form a PopUp. This textbox act as trigger also target control, PopUp panel as the popup it self and PopupControlExtender is a controller that connect popup panel with target textbox.

PopUp Control Examples

Working with Asp.Net Ajax PopUp Extender is quite easy and straight forward. We can get the basic knowledge from http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/PopupControl/PopupControl.aspx.

We need to add reference to AjaxControlToolkit.dll and register the assembly in .aspx file to use PopUp Control. All Ajax Control Toolkit including PopUpExtender need that reference library.

In this post, I’ll give four examples of using PopUp control. They are all multiple user input such as Gender, favourite books, hire date calendar and product lines.
Please see example snapshots below to get more clear:



As you can see pictures above, popups are have common style or css. Here’s is the style;

<style type="text/css">
    .popupControl{
	    background-color:Scrollbar;
	    position:absolute;
	    visibility:hidden;
	    border: 1px solid black;
    }
</style>	

PopUp Radio Button List

First thing first, we need to include add reference to AjaxControlToolkit.dll and register its assembly. To register it please look at code below:

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

Secondly, add ToolkitScriptManager control to page.

<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</ajaxToolkit:ToolkitScriptManager>

Third, place a textbox, PopUp panel and the PopUp ajax toolkit.
Put UpdatePanel control Inside PopUp panel to localize page reload and also make this updatepanel control so that it has contenttemplate tag and RadioButtonList.

 Gender: <asp:TextBox ID="gender" runat="server"></asp:TextBox>
 
 <asp:Panel ID="panel_gender" runat="server" CssClass="popupControl">
		<asp:UpdatePanel ID="UpdatePanel1" runat="server">
		<ContentTemplate>
			<asp:RadioButtonList id="rdogender" runat="server" AutoPostBack="true">
				<asp:ListItem text="Male" Value="Male"></asp:ListItem>
				<asp:ListItem text="Female" Value="Female"></asp:ListItem>
			</asp:RadioButtonList>
		</ContentTemplate>
		</asp:UpdatePanel>
	</asp:Panel>

 <ajaxToolkit:PopupControlExtender ID="PopUpExt_gender" runat="server"
			 TargetControlID="gender" PopupControlID="panel_gender" Position="Bottom">
		</ajaxToolkit:PopupControlExtender>

PopupControlExtender control makes ‘gender’ Textbox as TargetControlID and ‘panel_gender’ Panel as PopupControlID. If TargetControl got focus then PopupControl that contains ‘rdogender’ RadioButtonList will show as PopUp at a Position from textbox which in this case is bottom of textbox.

If user chooses one of choice on RadioButtonList ‘rdogender’ then textbox of TargetControl will have Text radiobuttonlist selected value. This process is accomplished by code behind file.

Protected Sub rdogender_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles rdogender.SelectedIndexChanged
	PopUpExt_gender.Commit(rdogender.SelectedValue)
End Sub

I have Radiobuttonlist selectedIndexChanged event. If this event is triggered then PopupExtender Commit(..) function is running to set the TargetControl (‘gender’ Textbox) text with selectedvalue of rdogender.
Also the Popup will hide itself.

PopUp CheckBox List

Favourite Books: <asp:TextBox ID="books" runat="server"></asp:TextBox>

<asp:Panel ID="panel_books" runat="server" CssClass="popupControl">
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
	<ContentTemplate>
		<asp:CheckBoxList ID="chk_books" runat="server" Width="140px" >
		<asp:ListItem Text="VB" Value="VB"></asp:ListItem>
		<asp:ListItem Text="C#" Value="C#"></asp:ListItem>
		<asp:ListItem Text="PHP" Value="PHP"></asp:ListItem>
		<asp:ListItem Text="Java" Value="Java"></asp:ListItem>
		</asp:CheckBoxList>
		<center>
		<asp:LinkButton ID="lnkbooks" runat="server">OK</asp:LinkButton>
		</center>
	</ContentTemplate>
	</asp:UpdatePanel>
</asp:Panel>

<ajaxToolkit:PopupControlExtender ID="PopUpExt_books" runat="server"
	 TargetControlID="books" PopupControlID="panel_books" Position="Bottom">
</ajaxToolkit:PopupControlExtender>

We have checkboxlist control inside books Panel. This Panel have UpdatePanel ajax control and also we have PopupControlExtender Ajax Toolkit. So all is the same like previous.

Since the nature of checkboxlist is to have multiple values from several checkboxes then we cannot use selectedIndexChanged event. I use Linkbutton control to set TargetControl Textbox and hide Popup by doing Commit(..) method.

Protected Sub lnkbooks_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles lnkbooks.Click
	Dim strbooks As New StringBuilder()
	Dim selected_no As Integer = 0
	For i As Integer = 0 To chk_books.Items.Count - 1
		If chk_books.Items(i).Selected Then
			If selected_no = 0 Then
				strbooks.Append(chk_books.Items(i).Value)
			Else
				strbooks.Append("," & chk_books.Items(i).Value)
			End If
			selected_no = selected_no + 1
		End If
	Next
	PopUpExt_books.Commit(strbooks.ToString())
End Sub

If ‘lnkbooks’ Linkbutton is clicked then selected checkboxes value are appended to StringBuilder class and Commit is executed with string value of StringBuilder.

PopUp Calendar

Hire Date: <asp:TextBox ID="hiredate" runat="server"></asp:TextBox>

<asp:Panel ID="panel_calendar" runat="server" CssClass="popupControl">
	<asp:UpdatePanel ID="UpdatePanel3" runat="server">
	<ContentTemplate>
		<asp:Calendar ID="Calendar1" runat="server" BackColor="White"
			BorderColor="#999999" CellPadding="4" DayNameFormat="Shortest" 
			Font-Names="Verdana" Font-Size="8pt" ForeColor="Black" Height="180px" 
			Width="200px">
			<DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True" Font-Size="7pt" />
			<NextPrevStyle VerticalAlign="Bottom" />
			<OtherMonthDayStyle ForeColor="#808080" />
			<SelectedDayStyle BackColor="#666666" Font-Bold="True" ForeColor="White" />
			<SelectorStyle BackColor="#CCCCCC" />
			<TitleStyle BackColor="#999999" BorderColor="Black" Font-Bold="True" />
			<TodayDayStyle BackColor="#CCCCCC" ForeColor="Black" />
			<WeekendDayStyle BackColor="#FFFFCC" />
			
		</asp:Calendar>
	</ContentTemplate>
	</asp:UpdatePanel>
</asp:Panel>

<ajaxToolkit:PopupControlExtender ID="PopUpExt_calendar" runat="server"
	 TargetControlID="hiredate" PopupControlID="panel_calendar" Position="Bottom">                
</ajaxToolkit:PopupControlExtender>

‘panel_calendar’ Panel contains UpdatePanel & Calendar controls. Asp.Net has built in Calendar control so we can make professional calendar or date time picker as Popup.

If selection of date is changed then Calendar1_SelectionChanged(..) is fired in code behind file and so it has Commit(..) function.

Protected Sub Calendar1_SelectionChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles Calendar1.SelectionChanged
	PopUpExt_calendar.Commit(Calendar1.SelectedDate.ToShortDateString())

End Sub

Dynamic PopUp Containing Database Records and Images

This dynamic popup has a listview that contains html radio button input and image elements. I include sqldatasource control as a data source of listview.

This popup uses AdventureWorks sample database and shows products and their photos. So we can make nice and informative user input using PopUpExtender.

This ‘product’ PopupExtender has DynamicContextKey, DynamicServiceMethod, DynamicServicePath and DynamicControlID attributes.
These Dynamic things used to show message with argument specified in DynamicContextKey. DynamicServiceMethod value is a method name for processing the DynamicContextKey and return a string.
That returned string from DynamicServiceMethod will be attached as Text at a control with ID specified in DynamicControlID.
DynamicServicePath is file location of DynamicServiceMethod.

Products: <asp:TextBox ID="product" runat="server"></asp:TextBox>

<asp:Panel ID="panel_product" runat="server" CssClass="popupControl">
	<asp:UpdatePanel ID="UpdatePanel4" runat="server">
	<ContentTemplate>
		<asp:ListView ID="lstproduct" runat="server" DataSourceID="dsproduct">
			<LayoutTemplate>
				<table>
					<thead>
						<tr>
						<th>&nbsp;</th>
						<th>Product Name</th>
						<th>Image</th>
						</tr>
					</thead>
					<asp:PlaceHolder ID="itemplaceholder" runat="server"></asp:PlaceHolder>
				</table>
			</LayoutTemplate>
			<ItemTemplate>
				<tr>
					<td><input type="radio" id="productid" name="rdoproduct" value='<%# Eval("ProductID") %>' onclick="javascript:__doPostBack('productid','products')" /></td>
					<td><%# Eval("ProductName")%></td>
					<td><img src='img_handler.ashx?photoid=<%# Eval("ProductPhotoID") %>' /></td>
				</tr>
			</ItemTemplate>
		</asp:ListView>
	</ContentTemplate>
	</asp:UpdatePanel>
</asp:Panel>

<ajaxToolkit:PopupControlExtender ID="PopUpExt_product" runat="server" DynamicContextKey="-Choose Your Product-" DynamicServiceMethod="LoadProducts" DynamicControlID="product" DynamicServicePath="Default.aspx"
	 TargetControlID="product" PopupControlID="panel_product" Position="Bottom">                
</ajaxToolkit:PopupControlExtender>

<asp:SqlDataSource ID="dsproduct" runat="server"
         ConnectionString="Data Source=.\SQLDEV;Initial Catalog=AdventureWorks;Integrated Security=true"
         SelectCommand="select prd.ProductID as ProductID, prd.Name as ProductName, photo.ProductPhotoID from Production.Product as prd
            inner join Production.ProductProductPhoto as prdphoto on prd.ProductID=prdphoto.ProductID
            inner join Production.ProductPhoto as photo on prdphoto.ProductPhotoID=photo.ProductPhotoID
            Where prd.ProductID in (746, 817, 838, 352, 716, 894, 882, 756, 821, 966)">
</asp:SqlDataSource>

I only get several database records & photos inside SqlDataSource selectcommand for demonstration purpose.

ListView control is used to view data. Inside this listview ItemTemplate there are html radio button & image with its source to generic file ‘img_handler.ashx’.
The generic handler will get product photo from database and display it as image. This handler has querystring of photoid that equals to ‘ProductPhotoID’ field value from data source.

Here’s ‘img_handler.ashx’ code:

Imports System
Imports System.Web
Imports System.Data.SqlClient
Imports System.Data
Public Class img_handler : Implements IHttpHandler
    
    Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
        context.Response.ContentType = "image/jpeg"
        Dim imageByte As Byte()
        
        Dim dbconn As New SqlConnection("Data Source=.\SQLDEV;Initial Catalog=AdventureWorks;Integrated Security=true")
        dbconn.Open()
        
        Dim comm As New SqlCommand("select ThumbNailPhoto from Production.ProductPhoto where ProductPhotoID=" & context.Request.QueryString("photoid"), dbconn)
        imageByte = CType(comm.ExecuteScalar(), Byte())
        comm.Dispose()
        
        dbconn.Close()
        
        context.Response.BinaryWrite(imageByte)
        
    End Sub
 
    Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
        Get
            Return False
        End Get
    End Property
End Class

This handler get photo ID from querystring and get ThumbNailPhoto field value.

Now, How can we do a Popupextender Commit method using html radio button which is not server control? Html radio button does not have AutoPostBack. Well, we can use __doPostBack(...) javascript method to do postback.
The signature of __doPostBack function is __doPostBack(eventTarget, eventArgument). eventTarget value is a html auto generated hidden input value that has Name ‘__EVENTTARGET’ and eventArgument value is also auto generated hidden object value with its Name is ‘__EVENTARGUMENT’.
Generally, if you have form and server controls then asp.net generate both hidden input automatically, you can look at the html source of asp.net page.
So we can get both values with Request.Form("__EVENTTARGET") and Request.Form("__EVENTARGUMENT") at code behind file.

Our radio button click event is onclick="javascript:__doPostBack('productid','products')". This javascript method has target of ‘productid’ which is the id of radiobutton it self, so it is like radiobutton do postback event and eventArgument is set to arbitrary string ‘products’.
I handle that postback event in PageLoad event:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
	If Page.IsPostBack Then
		If (Request.Form("__EVENTARGUMENT") = "products") Then
			PopUpExt_product.Commit(Request.Form("rdoproduct"))
			ScriptManager.RegisterStartupScript(Me, Me.GetType(), "on_load", "rb_check_onload('" & Request.Form("rdoproduct") & "')", True)
		End If
	end If
End Sub

If Page is on PostBack state and the __EVENTARGUMENT value is ‘products’ then PopUpExtender Commit function is executed.

Above code shows ScriptManager.RegisterStartupScript(..). This RegisterStartupScript is registering javascript that executed on page load.
We need this method so that the html radio button selected value is always being selected on page load. Commit method cannot re-select HTML radio button input inside listview since html input is not a server control.
Previous examples are using Asp.Net server control but this dynamic popup example use client html input and also its postback process trigger is javascript __doPostBack(..) function.

The body of ScriptManager.RegisterStartupScript(..) is Public Shared Sub RegisterStartupScript (page As Page, type As Type, key As String, script As String, addScriptTags As Boolean).
‘script’ argument is a javascript method name that will be executed when page is loading. In our example, the ‘script’ function name is rb_check_onload('" & Request.Form("rdoproduct") & "').
‘rdoproduct’ is name of html radio button input and I use that to retrieve current selected radio value.

Javascript rb_check_onload code:

<script type="text/javascript">
function rb_check_onload(strval) {
	var rbs = document.getElementsByName("rdoproduct");
	for (var i = 0; i < rbs.length - 1; i++) {
		if (rbs[i].value == strval) {
			rbs[i].checked = true;
		}
	}
}
</script>

As I told you earlier, this PopUpExtender has DynamicContextKey, DynamicServiceMethod, DynamicServicePath and DynamicControlID attributes in order to show message when pop up is triggered.

Look at aspx page, these Dynamic attributes have values like following ... DynamicContextKey="-Choose Your Product-" DynamicServiceMethod="LoadProducts" DynamicControlID="product" DynamicServicePath="Default.aspx" ...
So I add LoadProducts method inside code behind file (.aspx.vb) of DynamicServicePath ‘Default.aspx’. This method is like a WebService method so it must be set with ‘shared’ / ‘static’ and be accessed asynchronously.

<WebMethod()> _
    Public Shared Function LoadProducts(ByVal contextKey As String) As String
        Return contextKey
    End Function

This Loadproducts method has <WebMethod()> or <System.Web.Services.WebMethod()> attribute which means that this server method is accessed in ajax mode.

contextKey is an argument and its value is DynamicContextKey’s value. I just returned that contextKey.

So if user clicks on product textbox then LoadProducts(..) is executed and returned ‘-Choose Your Product-‘ message. The message appears on Control that has id of DynamicControlID and off course the Popup it self will be showing.

Full Default.aspx source code:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!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">
    .popupControl{
	    background-color:Scrollbar;
	    position:absolute;
	    visibility:hidden;
	    border: 1px solid black;
    }
    </style>
    <script type="text/javascript">
        function rb_check_onload(strval) {
            var rbs = document.getElementsByName("rdoproduct");
            for (var i = 0; i < rbs.length - 1; i++) {
                if (rbs[i].value == strval) {
                    rbs[i].checked = true;
                }
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </ajaxToolkit:ToolkitScriptManager>
        <fieldset style="width:620px">
        <legend>Popup Extender Example</legend>
        Gender: <asp:TextBox ID="gender" runat="server"></asp:TextBox> &nbsp;
        Favourite Books: <asp:TextBox ID="books" runat="server"></asp:TextBox><br /><br />
        Hire Date: <asp:TextBox ID="hiredate" runat="server"></asp:TextBox> &nbsp;
        Products: <asp:TextBox ID="product" runat="server"></asp:TextBox><br /><br />
        <asp:Label ID="lblmsg" runat="server"></asp:Label>
        <asp:Panel ID="panel_gender" runat="server" CssClass="popupControl">
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:RadioButtonList id="rdogender" runat="server" AutoPostBack="true">
                    <asp:ListItem text="Male" Value="Male"></asp:ListItem>
                    <asp:ListItem text="Female" Value="Female"></asp:ListItem>
                </asp:RadioButtonList>
            </ContentTemplate>
            </asp:UpdatePanel>
        </asp:Panel>
        <asp:Panel ID="panel_books" runat="server" CssClass="popupControl">
            <asp:UpdatePanel ID="UpdatePanel2" runat="server">
            <ContentTemplate>
                <asp:CheckBoxList ID="chk_books" runat="server" Width="140px" >
                <asp:ListItem Text="VB" Value="VB"></asp:ListItem>
                <asp:ListItem Text="C#" Value="C#"></asp:ListItem>
                <asp:ListItem Text="PHP" Value="PHP"></asp:ListItem>
                <asp:ListItem Text="Java" Value="Java"></asp:ListItem>
                </asp:CheckBoxList>
                <center>
                <asp:LinkButton ID="lnkbooks" runat="server">OK</asp:LinkButton>
                </center>
            </ContentTemplate>
            </asp:UpdatePanel>
        </asp:Panel>
        <asp:Panel ID="panel_calendar" runat="server" CssClass="popupControl">
            <asp:UpdatePanel ID="UpdatePanel3" runat="server">
            <ContentTemplate>
                <asp:Calendar ID="Calendar1" runat="server" BackColor="White"
                    BorderColor="#999999" CellPadding="4" DayNameFormat="Shortest" 
                    Font-Names="Verdana" Font-Size="8pt" ForeColor="Black" Height="180px" 
                    Width="200px">
                    <DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True" Font-Size="7pt" />
                    <NextPrevStyle VerticalAlign="Bottom" />
                    <OtherMonthDayStyle ForeColor="#808080" />
                    <SelectedDayStyle BackColor="#666666" Font-Bold="True" ForeColor="White" />
                    <SelectorStyle BackColor="#CCCCCC" />
                    <TitleStyle BackColor="#999999" BorderColor="Black" Font-Bold="True" />
                    <TodayDayStyle BackColor="#CCCCCC" ForeColor="Black" />
                    <WeekendDayStyle BackColor="#FFFFCC" />
                    
                </asp:Calendar>
            </ContentTemplate>
            </asp:UpdatePanel>
        </asp:Panel>
        <asp:Panel ID="panel_product" runat="server" CssClass="popupControl">
            <asp:UpdatePanel ID="UpdatePanel4" runat="server">
            <ContentTemplate>
                <asp:ListView ID="lstproduct" runat="server" DataSourceID="dsproduct">
                    <LayoutTemplate>
                        <table>
                            <thead>
                                <tr>
                                <th>&nbsp;</th>
                                <th>Product Name</th>
                                <th>Image</th>
                                </tr>
                            </thead>
                            <asp:PlaceHolder ID="itemplaceholder" runat="server"></asp:PlaceHolder>
                        </table>
                    </LayoutTemplate>
                    <ItemTemplate>
                        <tr>
                            <td><input type="radio" id="productid" name="rdoproduct" value='<%# Eval("ProductID") %>' onclick="javascript:__doPostBack('productid','products')" /></td>
                            <td><%# Eval("ProductName")%></td>
                            <td><img src='img_handler.ashx?photoid=<%# Eval("ProductPhotoID") %>' /></td>
                        </tr>
                    </ItemTemplate>
                </asp:ListView>
            </ContentTemplate>
            </asp:UpdatePanel>
        </asp:Panel>
            
            <ajaxToolkit:PopupControlExtender ID="PopUpExt_gender" runat="server"
                 TargetControlID="gender" PopupControlID="panel_gender" Position="Bottom">
            </ajaxToolkit:PopupControlExtender>
            <ajaxToolkit:PopupControlExtender ID="PopUpExt_books" runat="server"
                 TargetControlID="books" PopupControlID="panel_books" Position="Bottom">
            </ajaxToolkit:PopupControlExtender>
            <ajaxToolkit:PopupControlExtender ID="PopUpExt_calendar" runat="server"
                 TargetControlID="hiredate" PopupControlID="panel_calendar" Position="Bottom">                
            </ajaxToolkit:PopupControlExtender>
            <ajaxToolkit:PopupControlExtender ID="PopUpExt_product" runat="server" DynamicContextKey="-Choose Your Product-" DynamicServiceMethod="LoadProducts" DynamicControlID="product" DynamicServicePath="Default.aspx"
                 TargetControlID="product" PopupControlID="panel_product" Position="Bottom">                
            </ajaxToolkit:PopupControlExtender>
        </fieldset>
        <asp:SqlDataSource ID="dsproduct" runat="server"
         ConnectionString="Data Source=.\SQLDEV;Initial Catalog=AdventureWorks;Integrated Security=true"
         SelectCommand="select prd.ProductID as ProductID, prd.Name as ProductName, photo.ProductPhotoID from Production.Product as prd
            inner join Production.ProductProductPhoto as prdphoto on prd.ProductID=prdphoto.ProductID
            inner join Production.ProductPhoto as photo on prdphoto.ProductPhotoID=photo.ProductPhotoID
            Where prd.ProductID in (746, 817, 838, 352, 716, 894, 882, 756, 821, 966)"
         ></asp:SqlDataSource>
      </div>
    </form>
</body>
</html>

Default.aspx.vb:

Imports System.Text
Imports System.Web.Services
Partial Class _Default
    Inherits System.Web.UI.Page

    Protected Sub rdogender_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles rdogender.SelectedIndexChanged
        PopUpExt_gender.Commit(rdogender.SelectedValue)
    End Sub

    Protected Sub lnkbooks_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles lnkbooks.Click
        Dim strbooks As New StringBuilder()
        Dim selected_no As Integer = 0
        For i As Integer = 0 To chk_books.Items.Count - 1
            If chk_books.Items(i).Selected Then
                If selected_no = 0 Then
                    strbooks.Append(chk_books.Items(i).Value)
                Else
                    strbooks.Append("," & chk_books.Items(i).Value)
                End If
                selected_no = selected_no + 1
            End If
        Next
        PopUpExt_books.Commit(strbooks.ToString())
    End Sub

    Protected Sub Calendar1_SelectionChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles Calendar1.SelectionChanged
        PopUpExt_calendar.Commit(Calendar1.SelectedDate.ToShortDateString())
    End Sub

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Page.IsPostBack Then
            If (Request.Form("__EVENTARGUMENT") = "products") Then
                PopUpExt_product.Commit(Request.Form("rdoproduct"))
                ScriptManager.RegisterStartupScript(Me, Me.GetType(), "on_load", "rb_check_onload('" & Request.Form("rdoproduct") & "')", True)
            End If
        End If
    End Sub
	
    <WebMethod()> _
    Public Shared Function LoadProducts(ByVal contextKey As String) As String
        Return contextKey
    End Function   
End Class

Calendar Extender Ajax Toolkit Example

Actually, we already have Ajax Calendar example inside Popup panel but Asp.Net has Calendar Extender Ajax Toolkit control that has capability to show calendar as popup. Usage of Calendar extender is more simple than Popup extender with calendar control inside it.
Same as Popup Extender this calendar extender has TargetControlID as calendar target also as trigger control ID. Selected Date will be written in the TargetControl.
PopupPosition acts as a popup position relative from TargetControl which is left / right / bottomleft etc

Here’s the screen shot:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="calendar_ajax.aspx.vb" Inherits="calendar_ajax" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!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>
    <ajaxToolkit:ToolkitScriptManager ID="toolkitscriptmanager1" runat="server"></ajaxToolkit:ToolkitScriptManager>
    <asp:TextBox ID="date1" runat="server" ></asp:TextBox><br /><br />
    Image Trigger Example:<br />
    <asp:TextBox ID="date2" runat="server"></asp:TextBox> <asp:Image ID="image1" runat="server" ImageUrl="~/Calendar_scheduleHS.png" />
    <ajaxToolkit:CalendarExtender ID="calext1" runat="server" TargetControlID="date1" Format="dd-MM-yyyy"  PopupPosition="Left"></ajaxToolkit:CalendarExtender>
    <ajaxToolkit:CalendarExtender ID="calext2" runat="server" TargetControlID="date2" Format="dd-MM-yyyy" PopupButtonID="image1" PopupPosition="Left"></ajaxToolkit:CalendarExtender>
    </div>
    </form>
</body>
</html>

ToolkitScriptManager must be included to enable all ajax toolkit extender including CalendarExtender.

We can see that in Image Trigger Example there is PopupButtonID=”image1″ which means image1 become a trigger to show Calendar.

Regards,

Agung Gugiaji

Advertisements

3 responses to “Making Flexible User Input With Asp.Net Ajax PopUp & Calendar Extender Toolkit Controls

  1. Asp.Net has Calendar Extender Ajax Toolkit control that has capability to show calendar as popup.

    • Hi, thanks for your attention to my blog.

      Yes, asp.net has calendar extender ajax toolkit. This post already explained this calendar ajaxtoolkit at last sub chapter

      Regards

  2. Pingback: Asp.Net Nested Grid View Example And Ajax PopUp & Calendar Extender | Enlighten Application Developer Journals

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