Escolar Documentos
Profissional Documentos
Cultura Documentos
By B.KANNA BABU
AJAX
The name AJAX was coined by Jesse James Garrett in 2005 Ajax is Asynchronous javascript and Xml AJAX is a technique for producing faster ,more interaxctive and usable webpages without pagerefreshment. AJAX was developed by five main components HTML,JAVASCRIPT,CSS,XML ,XMLHTTP REQUEST. AJAX is not a technology it is a combination of technologies.
XMLHTTP Request:this object allows asynchronous exchange of data between the server and the client. It is an API that uses javascript to transfer the data like xml using HTTP protocol. MS developed it in 2000 as a part of outllok web access.
Browser support
Any browser that supports Xml Http request object can be used to see the Ajax enabled webpage. Ex: internet Explorer Browser,Mozilla FireFox,Apple Safari, Google Chrome, Opera etc.. The developer has to struggle to implement javascript code at client side to make the webpage as ajax enabled.
To reduce burden on the developer we can make use of appropriate Ajax framework according to the server side technology used for ASP.net. We can make use of ajax framework called ASP.net Ajax .it is not the part of ASP.net.it is a separate framework which is build upon ASP.net technology. With the help of ASP.net Ajax we can make the ASP.net pages as Ajax enabled.
Components in AJAX
Asp.net Ajax contains two components
Script Manager: it is a server side control which is responsible to generate the client side code to make the asp.net webpage as Ajax enabled It is responsible to decide which portion of the webpage must be rendered for the Asynchronous request. There can be only one script Manager within a webpage.and should be first control. This control will provide complete JavaScript required for AJAX implementation.
script manager
Update panel
Update panel is a container for set of controls this will send request to server using xmlHttpRequest component . Only controls in update panel can be updated to server information.
Update panel
It is used to increase some portion of the webpage for which asynchronous request need to be sent and response must be received. We can make use of number of update panels in a webpage. The content of the webpage must be place inside the content template of update panel. Always update panel control must be placed after script manager
Take two update panels and drag label and button in both the update panels And drag label and button outside the update panel Observe?
protected void Button1_Click1(object sender, EventArgs e) { Label1.Text = "hi" + System.DateTime.Now.ToLongDateString(); Label2.Text = hello" + System.DateTime.Now.ToLongDateString(); }
observation
The controls that are available within the update panel only will fire whenever user clicks on the button. i.e. both the update panel controls will be loaded. But whenever user clicks on any button outside the update panel then the entire page will be loaded including the controls that are available within update panel and and outside update panel.
Requirement
only update panel label to be submitted when user clicks on button other update panel controls should not be submitted This requires setting update panel mode to
conditional
Asynchronous postback trigger will provide update panel controls to control [action] outside the update panel.
protected void Button1_Click(object sender, EventArgs e) { Label1.Text = "hi" + System.DateTime.Now.ToLongDateString(); Label2.Text = hello" +System.DateTime.Now.ToLongDateString(); Label3.Text = hru" + System.DateTime.Now.ToLongDateString(); } protected void Button2_Click(object sender, EventArgs e) { Label1.Text = "hello" + System.DateTime.Now.ToLongDateString(); Label2.Text = hello" + System.DateTime.Now.ToLongDateString(); Label3.Text = hru" + System.DateTime.Now.ToLongDateString(); }
SOURCE CODE
<div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:Label ID="Label1" runat="server" Font-Bold="True" Text="Label"></asp:Label> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:GridView ID="gv1" runat="server" AllowSorting="True" onselectedindexchanged="gv1_SelectedIndexChanged" onsorting="gv1_Sorting"></asp:GridView> </ContentTemplate> </asp:UpdatePanel> </div>
protected void Page_Load(object sender, EventArgs e) { Label1.Text = "page time:" + DateTime.Now.ToLongTimeString(); FillGrid("empno"); } public void FillGrid(string empname) { SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["constr"].ToStri ng()); SqlDataAdapter da = new SqlDataAdapter("select * from employee order by"+" "+empname, con); DataSet ds = new DataSet(); da.Fill(ds, "employee"); gv1.DataSource = ds; gv1.DataBind(); }
protected void gv1_Sorting(object sender, GridViewSortEventArgs e) { FillGrid(e.SortExpression); Label1.Text = "page time:" + DateTime.Now.ToLongTimeString(); }
Timer Control
Timer control will send request to server at regular intervals without page submission Timer control will have Tick event
Update progress will display text /image when task is performed on server one task is finished text/image will disappear. It is used to increase some portion of the webpage for which asynchronous request need to be sent and response must be received. We can make use of number of update panels in a webpage. The content of the webpage must be place inside the content template of update panel. Always update panel control must be placed after script manager.
Update progress
Calendar Extender: <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <cc1:CalendarExtender ID="TextBox1_CalendarExtender" runat="server" Enabled="True" TargetControlID="TextBox1" Format="MMMM d,yyyy" PopupButtonID="Image1"> </cc1:CalendarExtender> <asp:Image ID="Image1" runat="server" Height="19px" ImageUrl="~/images/calender1.bmp" /> <br /> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager>
ACCORDION
The Accordion is a web control that allows you to provide multiple panes and display them one at a time. It is like having several CollapsiblePanels where only one can be expanded at a time. The Accordion is implemented as a web control that contains AccordionPane web controls. Each AccordionPane control has a template for its Header and its Content. We keep track of the selected pane so it stays visible across postback
Accordion properties
Headercss class: formatting will be applied for pane heading if it is collapsed state. HeaderselectedCssclass:formatting will be applied for expanded pane heading Contentcss class:formatting applied for pane content info Transitionduration:will specify pane info presentation wiothin particular time period. Fade transitions :will display pane content info in a faded manner.
<head runat="server"> <title>Untitled Page</title> <style type="text/css"> .c1 { background-color:Gray;color:Black;font-size:xx-large; } .c2 { background-color:Yellow;color:Blue;font-size:xx-large; } </style>
ACCORDION
<div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <cc1:Accordion ID="Accordion1" runat="server" FadeTransitions="true" AutoSize="None" HeaderCssClass="c1" ContentCssClass="c2" > <Panes > <cc1:AccordionPane ID="AccordionPane1" HeaderCssClass="header" ContentCssClass="content" runat="server" ForeColor="blue" BackColor ="red"> <Header>HOME</Header>
<Content> <asp:Panel ID="Panel1" runat="server" GroupingText ="Deatails of Accordian"> Copy some text here to display in Home page </asp:Panel> </Content> </cc1:AccordionPane> </Panes>
<Panes > <cc1:AccordionPane ID="AccordionPane2" HeaderCssClass="header" ContentCssClass="content" runat="server" ForeColor="green" BackColor ="red"> <Header >ABOUTUS</Header> <Content> <asp:Panel ID="Panel2" runat="server" GroupingText ="Deatails of Accordian"> Copy some text here to display in ABOUTUs page </asp:Panel> </Content> </cc1:AccordionPane> </Panes>
<Panes > <cc1:AccordionPane HeaderCssClass="header" ContentCssClass="content" ID="AccordionPane3" runat="server" ForeColor="Yellow" BackColor ="red"> <Header>CONTACTUS</Header> <Content> <asp:Panel ID="Panel3" runat="server" GroupingText ="Deatails of Accordian">
Place some image you cannot modify the properties of the image at designtime go to source and write the code for image and set the imageurl property .add a image in solution explorer <asp:Image ID="Image1" runat="server" ImageUrl="~/images/1.png" /> </asp:Panel> </Content> </cc1:AccordionPane> </Panes> </cc1:Accordion> </div>
PASSWORD STRENGTH
<asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> <cc1:PasswordStrength ID="PasswordStrength1" runat="server" HelpStatusLabelID="Label1" MinimumSymbolCharacters="1" PreferredPasswordLength="7" TargetControlID="TextBox2"> </cc1:PasswordStrength>
TextBoxWatermarkExtender
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <br /> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <cc1:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" runat="server" TargetControlID="TextBox1" WatermarkText="Username"> </cc1:TextBoxWatermarkExtender>
ConfirmButtonExtender
<div> <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" /> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <cc1:ConfirmButtonExtender ID="ConfirmButtonExtender1" runat="server" ConfirmText="ARE YOU SURE YOU WANT TO CLCIK THIS" TargetControlID="button1"> </cc1:ConfirmButtonExtender> </div>
FilteredTextBoxExtender
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender1" runat="server" TargetControlID="TextBox1" FilterType="Numbers"> </cc1:FilteredTextBoxExtender>
PasswordStrength
PasswordStrength is an ASP.NET AJAX extender that can be attached to an ASP.NET TextBox control used for the entry of passwords. The PasswordStrength extender shows the strength of the password in the TextBox and updates itself as the user types the password. The indicator can display the strength of the password as a text message or with a progress bar indicator. The styling and position of both types of indicators is configurable. The indicator is displayed when the user begins typing into the TextBox and is hidden from view once the TextBox loses focus.
PasswordStrength
<asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager>
AnimationExtender1
<asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:Button ID="btnTarget" runat="server" Text="Animate Me" OnClientClick="return false;" /> <cc1:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="btnTarget"> <Animations> <OnLoad><StyleAction Attribute="backgroundColor" Value="#fff000" /></OnLoad> <OnClick><StyleAction Attribute="backgroundColor" Value="blue" /></OnClick> <OnMouseOver><StyleAction Attribute="backgroundColor" Value="blue" /></OnMouseOver> <OnMouseOut><StyleAction Attribute="backgroundColor" Value="green" /></OnMouseOut> <OnHoverOver><StyleAction Attribute="color" Value="blue" /></OnHoverOver> <OnHoverOut><StyleAction Attribute="color" Value="yellow" /></OnHoverOut> </Animations> </cc1:AnimationExtender>
DROPDOWN EXTENDER
It is ASP.net Ajax extender that can be attached to almost any Asp.net control to display the control in dropdown menu fashion
<asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <cc1:DropDownExtender ID="DropDownExtender1" runat="server" TargetControlID="LinkButton1" > </cc1:DropDownExtender>
Tab Container
It is a collection of tab panels Each tab can be displayed certain information. Tabpanel contains two templates Header Template:it will diplay the heading Content template :is used to place the controls
<asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <cc1:TabContainer ID="TabContainer1" runat="server"> <cc1:TabPanel ID="tb1" runat="server"> <HeaderTemplate> news </HeaderTemplate> <ContentTemplate> <asp:Panel ID="Panel1" runat="server"> hi ia mkanna </asp:Panel> </ContentTemplate>
</cc1:TabPanel> <cc1:TabPanel ID="TabPanel2" runat="server"> <HeaderTemplate> news </HeaderTemplate> <ContentTemplate> <asp:Panel ID="Panel2" runat="server"> hi how r u </asp:Panel> </ContentTemplate> </cc1:TabPanel> </cc1:TabContainer>
ASP.NET AJAX is a free framework for quickly creating efficient and interactive Web applications that work across all popular browsers. Asynchronous requests can be made asynchronously or synchronously both techniques allow web page to be updated without refreshing it anything useful the user can do while processing request? if yes then use asynchronous, otherwise use synchronous JavaScript typically JavaScript is used on the client-side (in the browser) only programming language supported out-of-the-box by most web browsers can use any language on server-side that can accept HTTP requests and return HTTP responses XML
AJAX
ToolKit Download
http://www.asp.net/AJAX/downloads
LifeCycle
Browser Event Server Request Server Response Browser Update
DataTypes
Integer String Double Boolean DateTime DataSet DataTable Custom classes
AJAX Controls
1.Update panel 2.Password Strength 3.Calender 4.DropDown 5.DropShadow 6.FilteredTextBox 7.HoverMenu 8.NumericUpDown 9.TextBoxWaterMark 10.RoundedControl
ScriptManager
You must use a ScriptManager control on a page to enable the following AJAX features of ASP.NET: Partial-page rendering, which enables regions on the page to be independently refreshed without a postback. JavaScript proxy classes for Web services, which enable you to use client script to access Web services and specially marked methods in ASP.NET pages. It does this by exposing the Web services and page methods as strongly typed objects. JavaScript classes to access ASP.NET authentication, profile, and roles application services.
TextBoxWatermarkExtender
<div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <br /> <cc1:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" runat="server" TargetControlID="TextBox1" WatermarkText="ENTER USERNAME" > </cc1:TextBoxWatermarkExtender> <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> <br /> <cc1:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender2" runat="server" TargetControlID="TextBox2" WatermarkText="ENTER PASSWORD"> </cc1:TextBoxWatermarkExtender> <asp:Button ID="Button1" runat="server" Text="Button" /> <br /> <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
CALENDER EXTENDER
<div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <cc1:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="TextBox1"> </cc1:CalendarExtender> </div>
CALENDER EXTENDER
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> <asp:Image ID="Image1" runat="server" /> <cc1:CalendarExtender ID="CalendarExtender2" runat="server" TargetControlID="TextBox2" PopupButtonID="Image1"> </cc1:CalendarExtender>
Filtered textbox
<div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender1" runat="server" TargetControlID="TextBox1" FilterType="Numbers"> </cc1:FilteredTextBoxExtender> </div>
properties
Filter Type=numbers,characters Target controlid=TextBox1 Valid Characters=some alphabets or some numbers Invalid charcters=some expressions
HOVER MENU
<div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <cc1:HoverMenuExtender ID="HoverMenuExtender1" runat="server" TargetControlID="BTNPRODUCT" PopupControlID="Panel1" PopupPosition="Bottom"> </cc1:HoverMenuExtender> <asp:Panel ID="Panel1" runat="server"> <asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton> <asp:LinkButton ID="LinkButton2" runat="server">LinkButton</asp:LinkButton> </asp:Panel> <asp:LinkButton ID="BTNPRODUCT" runat="server">KANNA</asp:LinkButton> </div>
<div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Label ID="lbl1" runat="server"></asp:Label> <asp:Button ID="btn1" runat="server" onclick="btn1_Click" Width="245px" Height="90px" Text="button"/> </ContentTemplate> </asp:UpdatePanel> <asp:Label ID="Label1" runat="server"></asp:Label> </div>
protected void btn1_Click(object sender, EventArgs e) { lbl1.Text = "hi" + System.DateTime.Now.ToLongDat eString(); Label1.Text = "mygo" + System.DateTime.Now.ToLongDat eString(); }
<asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Label ID="lbl1" runat="server"></asp:Label> <asp:Button ID="btn1" runat="server" onclick="btn1_Click" Width="115px"/> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="Button2"/> </Triggers> </asp:UpdatePanel> <asp:Button ID="Button2" runat="server" Width="115px" onclick="Button2_Click"/> <asp:Label ID="Label1" runat="server"></asp:Label>
protected void btn1_Click(object sender, EventArgs e) { lbl1.Text = "hi"+System.DateTime.Now.ToLongDateString(); Label1.Text ="mygo"+System.DateTime.Now.ToLongDateStrin g(); } protected void Button2_Click(object sender, EventArgs e) { lbl1.Text = "hi" + System.DateTime.Now.ToLongDateString(); Label1.Text = "mygo" + System.DateTime.Now.ToLongDateString(); }
PasswordStrength
PasswordStrength is an ASP.NET AJAX extender that can be attached to an ASP.NET TextBox control used for the entry of passwords. The PasswordStrength extender shows the strength of the password in the TextBox and updates itself as the user types the password. The indicator can display the strength of the password as a text message or with a progress bar indicator. The styling and position of both types of indicators is configurable. The indicator is displayed when the user begins typing into the TextBox and is hidden from view once the TextBox loses focus.
Properties
<ajaxToolkit:PasswordStrength ID="PS" runat="server" TargetControlID="TextBox1" DisplayPosition="RightSide" StrengthIndicatorType="Text" PreferredPasswordLength="10" PrefixText="Strength:" TextCssClass="TextIndicator_TextBox1" MinimumNumericCharacters="0" MinimumSymbolCharacters="0" RequiresUpperAndLowerCaseCharacters="false" TextStrengthDescriptions="Very Poor;Weak;Average;Strong;Excellent" TextStrengthDescriptionStyles="cssClass1;cssClass2;cssClass3;cssClass4;cs sClass5 CalculationWeightings="50;15;15;20" />
Calender
Calendar is an ASP.NET AJAX extender that can be attached to any ASP.NET TextBox control. It provides client-side date-picking functionality with customizable date format and UI in a popup control. You can interact with the calendar by clicking on a day to set the date, or the "Today" link to set the current date. In addition, the left and right arrows can be used to move forward or back a month. By clicking on the title of the calendar you can change the view from Days in the current month, to Months in the current year. Another click will switch to Years in the current Decade. This action allows you to easily jump to dates in the past or the future from within the calendar control.
Properties
<ajaxToolkit:Calendar runat="server" TargetControlID="Date1" CssClass="ClassName" Format="MMMM d, yyyy" PopupButtonID="Image1" /> TargetControlID - The ID of the TextBox to extend with the calendar. CssClass - Name of the CSS class used to style the calendar. See the Calendar Theming section for more information. Format Format String used to display the selected date. PopupButtonID - The ID of a control to show the calendar popup when clicked. If this value is not set, the calendar will pop up when the textbox receives focus. PopupPosition - Indicates where the calendar popup should appear at the BottomLeft(default), BottomRight, TopLeft, TopRight, Left or Right of the TextBox. SelectedDate - Indicates the date the Calendar extender is initialized with.
Filtered TextBox
FilteredTextBox is an extender which prevents a user from entering invalid characters into a text box. Note that since this effect can be avoided by deactivating JavaScript, you should use this extender as a convenience for your users, but you must never expect that the data being sent to the server consists of "valid" chars only. FilteredTextBox Properties <ajaxToolkit:FilteredTextBoxExtender ID="ftbe" runat="server" TargetControlID="TextBox3" FilterType="Custom, Numbers" ValidChars="+-=/*()." />
NumericUPDown
It will attach up and down buttons to textboxes for navigating between values NumericUpDown is an ASP.NET AJAX extender that can be attached to an ASP.NET TextBox control to add "up" and "down" buttons that increment and decrement the value in the TextBox. The increment and decrement can be simple +1/-1 arithmetic, they can cycle through a provided list of values (like the months of the year), or they can call a Web Service to determine the next value.
Properties
<ajaxToolkit:NumericUpDownExtender ID="NUD1" runat="server" TargetControlID="TextBox1" Width="100" RefValues="January;February;March;April" TargetButtonDownID="Button1" TargetButtonUpID="Button2" ServiceDownPath="WebService1.asmx" ServiceDownMethod="PrevValue" ServiceUpPath="WebService1.asmx" ServiceUpMethod="NextValue" Tag="1" /> TargetControlID - The ID of the TextBox to modify Width - Combined size of the TextBox and Up/Down buttons (min value 25). This property is not used if you provide custom buttons. RefValues - A list of strings separated by semicolons (;) to be used as an enumeration by NumericUpDown Step - Step used for simple numeric incrementing and decrementing. The default value is 1. TargetButtonDownID/TargetButtonUpID - Reference to custom Up/Down buttons
ListSearchExtender
<div>
Click on this ListBox and start typing to search for an entry: <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:ListBox ID="ListBox1" runat="server"></asp:ListBox> <cc1:ListSearchExtender ID="ListSearchExtender1" runat="server" TargetControlID="ListBox1" PromptCssClass="ListSearchExtenderPrompt"> </cc1:ListSearchExtender> <asp:DropDownList ID="DropDownList1" runat="server"> </asp:DropDownList> <cc1:ListSearchExtender ID="ListSearchExtender2" runat="server" TargetControlID="DropDownList1" PromptCssClass="ListSearchExtenderPrompt"> </cc1:ListSearchExtender> </div>
protected override void OnLoad(EventArgs e) { base.OnLoad(e); ListBox1.DataSource = GetWordListText(); ListBox1.DataBind(); DropDownList1.DataSource = GetWordListText(); DropDownList1.DataBind(); } private static string[] wordListText; public string[] GetWordListText() { // This is the NATO phonetic alphabet (http://en.wikipedia.org/wiki/NATO_phonetic_alphabet) // and was chosen for its size, non-specificity, and presence of multiple words with the same // starting letter.
if (null == wordListText) { string[] tempWordListText = new string[] {"Alfa","Alpha","Bravo","Charlie","Delta", "Echo","Foxtrot","Golf","Hotel","India", "Juliett","Juliet","Kilo","Lima","Mike", "November","Oscar", "Papa","Quebec","Romeo", "Sierra","Tango","Uniform","Victor","Whiskey", "X-ray","Xray","Yankee","Zulu","Zero","Nadazero", "One","Unaone","Two","Bissotwo","Three","Terrathree", "Four","Kartefour","Five","Pantafive","Six","Soxisix", "Seven","Setteseven","Eight","Oktoeight","Nine", "Novenine"}; Array.Sort(tempWordListText); wordListText = tempWordListText; } return wordListText; }