Tag Archives: AjaxControlToolkit

ASP.Net Ajax Creating Multiple Calendar Extenders on TextBoxes Programmatically


A web app having multiple Textboxes and Date Pickers or Calendar Extenders are very common.
Usually a page for submitting more than one rows which include Date field.

If Textboxes with attached Calender depends on some logic then we need to create them programmatically.

I will show how to do it using Asp.Net Ajax Control Toolkit Calendar Extender as Date picker control. I also used the simple ‘Northwind’ sample Database for demo purpose.

This small application will show Employees Name, Title and Hire Date info. Hire Date can be choose using calendar extender & updated.

  1. Creating multiple TextBoxes and Calendar Extenders programmatically
    ...
    <form id="form1" runat="server">
        <div>
            <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
            </asp:ToolkitScriptManager>
            <asp:UpdatePanel ID="updpanel" runat="server">
            <ContentTemplate>
               
                <asp:Table ID="tblinput" runat="server" >
                    <asp:TableHeaderRow ID="TableHeaderRow1" runat="server" Font-Names="Calibri" Font-Size="10pt">
                        
                        <asp:TableHeaderCell>ID</asp:TableHeaderCell>
                        <asp:TableHeaderCell>Name</asp:TableHeaderCell>
                        <asp:TableHeaderCell>Title</asp:TableHeaderCell>
                        <asp:TableHeaderCell>Hire Date</asp:TableHeaderCell>
                    </asp:TableHeaderRow>
                    
                </asp:Table>
               
                <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
                <asp:Button ID="btnSubmit" runat="server" Text="Submit" 
                    onclick="btnSubmit_Click" />  <asp:Label ID="lblmsg" runat="server"></asp:Label>
                
            </ContentTemplate>
            </asp:UpdatePanel>
        </div>
        </form>
    ...
    

    I have Table Control as container of Labels & TextBoxes. Also PlaceHolder control that will be contained by AjaxControlToolkit Calendar Extender.

    Labels, TextBoxes and Calendar Extender created programmatically inside Page_Load procedure.

  2. Continue reading

Using Asp .Net TabContainer To Create Professional Entry Form/View


Asp .Net TabContainer is useful for multi view purpose via clicking its Tab Panels.
The idea is using two TabPanels as containers for Entry form and list view. The first Tab Panel contains Entry Form and second for List View as we can see at above screen shots.

I use simple Northwind Database and Products Table to create Entry and View to this table.

Asp .Net TabContainer Basic

We must add reference to Asp .Net Ajax Control Toolkit since TabContainer Control is inside it.

  • Add ToolkitScriptManager Control inside form tag
  • Add TabContainer Control after ToolkitScriptManager.
     <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    	</asp:ToolkitScriptManager>   
    	<asp:TabContainer ID="TabContainer1" runat="server" >
    		 <asp:TabPanel ID="tabpanel1" runat="server" HeaderText="Entry">
    		 </asp:TabPanel>
    		 <asp:TabPanel ID="tabpanel2" runat="server" HeaderText="View">
    		 </asp:TabPanel>
    	</asp:TabContainer>
    

Basic TabContainer is already created with simple above Asp .Net Script. You can switch between TabPanels but these still contains nothing.
Continue reading

Understanding Asp .Net CascadingDropDown AjaxControlToolkit Tutorial


Populating DropDown is a common process in web application. We can set dropdown listitem manually or load from array / database.

Sometimes we deal with more than one dropdown that related to each other. It calls Cascading DropDown.

Many ways to create Cascading DropDown with asp .net which are using autopostback that page refresh everytime dropdown item selected, plain asp .net ajax that only reload partially and using CascadingDropDown Ajaxcontroltoolkit that also use ajax process.

The benefit of using CascadingDropDown Ajaxcontroltoolkit are increasing productivity due to a lot of design work has been done in its functionality and also the web page doesnt have to reload a whole page since its process is using ajax.

CascadingDropDown AjaxControlToolkit Description

Tag example:
<ajaxToolkit:CascadingDropDown ID=”CascadingDropDown1″ runat=”server” TargetControlID=”DropDownList1″
Category=”category” PromptText=”….” LoadingText=”[Loading …]”
ServiceMethod=”GetDropDownContents” />
Continue reading

Create a PopUp Dialog with ModalPopupExtender AjaxControlToolkit

Introduction

Simple dialog on web page can be created using client script / javascript functions like alert and confirm. window.open(args) function used to open an Url as dialog or new window.

Asp.Net Ajax provides ModalPopupExtender Control to create modal popup dialog. Basically the dialog is a panel control that associated with ModalPopupExtender. User have to click a button, hyperlink or controls to show this popup. We can make better dialog look and feel to the panel.

We need to add reference to AjaxControlToolkit.dll to build an ajax web page with all controls in AjaxControlToolkit. Also we have to register AjaxControlToolkit assembly, namespace and tagprefix.

Continue reading