AJAX stands for Asynchronous JavaScript and XML. There are two prime benefits of AJAX: -
- It send’s only necessary data to the server. For instance let’s say
you have 4 textboxes and on a submit button you want to only send two
text box data, AJAX helps in the same.
- The second benefit is it’s asynchronous. In other words when you
click on submit button and until the server processes the request you
can do other activities on the site. For instance when you click on send
email and until the email is sent, you can start composing a new email
at the back ground.
What is the difference between Script Manager and ScriptManager Proxy ?
Ans : A page can contain only one ScriptManager control. if you have a master content page in ur application and the master contains a script manager control, then you can use the ScriptManagerProxy control to add script to content pages
What is AJAX
AJAX are client side UI
patterns . What does it Means ?before that lets think on simple
workflow where client requests for a resource on server and
server receives the request and response back to client with resource
all this communication is done via HTTP and all page is rendered in HTML
. Now Lets think if you have a information page where user selects a
Region and on the basics of selected region list of cities is displayed
on dropdownlist well thats fine it works perfect but here we have one
problem for every time when user select a different region then page is
posted back to server com-on this increase the network traffic and
server load its not a good performance practice .
AJAX resolves this
problem by rendering a partial page instead of full page post back to
server . So AJAX is nothing its client side UI pattern and now its
standard for developing robust web applications .
How AJAX Work?
Technically
speaking AJAX combines the XMLHTTP components with JavaScript library
it works via XMLHTTP request to achieve the partial rendering to
server instead of full page postback. So What happens when user tries to
update or get the information it generates the asynchronous call to
server and then server respond with updated data no page refresh will
happen. For example you have to update the total products sold on your
grid view which implements the AJAX so it generate a
partial asynchronous call to server and server will respond with updated
total
What is Script Manager ?
ScriptManager its part of server components it manages the client script for AJAX enable web pages it registers the script for Microsoft AJAX library .
What is Update Panel?
Well
Update panel is most important control it enable the partial page call instead of full page post back
Update Panel has two child tags
<contentTemplate> and< trigger > content
Template is responsible for holding the contents of panel you can put
simple test or a control and Trigger tag trigger the call on a
particular event so Here you can see markup portion of my code.
Examples:
<table>
<tr>
<td>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:DropDownList ID="drpRegions" runat="server" AutoPostBack="True" Height="37px"
OnSelectedIndexChanged="drpRegions_SelectedIndexChanged" Width="163px">
</asp:DropDownList>
<br />
Check Cities
<br />
<asp:DropDownList ID="Cities" runat="server" Height="19px" Width="168px">
</asp:DropDownList>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger runat="server" ControlID="drpRegions" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
Please Wait...
</ProgressTemplate>
</asp:UpdateProgress>
</td>
<td>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:DropDownList ID="ddlColors" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddlColors_SelectedIndexChanged">
<asp:ListItem Value="Red">Red</asp:ListItem>
<asp:ListItem Value="Blue">Blue</asp:ListItem>
<asp:ListItem Value="Green">Green</asp:ListItem>
</asp:DropDownList>
<br />
<br />
Selected color:
<asp:Label runat="server" ID="lblSelectedColor" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress2" runat="server" AssociatedUpdatePanelID="UpdatePanel2">
<ProgressTemplate>
Please wait...
</ProgressTemplate>
</asp:UpdateProgress>
</td>
</tr>
</table>
CS File
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
List<string> Regions = new List<string>();
Regions.Add("South");
Regions.Add("East");
Regions.Add("West");
Regions.Add("North");
Regions.Add("EastWest");
drpRegions.DataSource = Regions;
drpRegions.DataBind();
}
}
protected void drpRegions_SelectedIndexChanged(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(3000);
List<string> Punjab = new List<string>();
Punjab.Add("Lahroe");
Punjab.Add("okara");
List<string> sindh = new List<string>();
sindh.Add("Karachi");
sindh.Add("Quoteata");
List<string> Buloschistan = new List<string>();
Buloschistan.Add("Quetta");
Buloschistan.Add("Cheltan");
List<string> Serhad = new List<string>();
Serhad.Add("Peshwar");
Serhad.Add("Kohat");
List<string> Kashmir = new List<string>();
Kashmir.Add("Bagh");
Kashmir.Add("DheerKot");
Kashmir.Add("Rawlakot");
Kashmir.Add("Mirpur");
if (drpRegions.SelectedValue == "South")
{
this.Cities.DataSource = Punjab;
this.Cities.DataBind();
}
else if (drpRegions.SelectedValue == "East")
{
this.Cities.DataSource = sindh;
this.Cities.DataBind();
}
else if (drpRegions.SelectedValue == "West")
{
this.Cities.DataSource = Buloschistan;
this.Cities.DataBind();
}
else if (drpRegions.SelectedValue == "North")
{
this.Cities.DataSource = Serhad;
this.Cities.DataBind();
}
else if (drpRegions.SelectedValue == "EastWest")
{
this.Cities.DataSource = Kashmir;
this.Cities.DataBind();
}
}
protected void ddlColors_SelectedIndexChanged(object sender, EventArgs e)
{
lblSelectedColor.Text = ddlColors.SelectedValue;
lblSelectedColor.BackColor = System.Drawing.Color.FromName(ddlColors.SelectedValue);
ScriptManager1.AddHistoryPoint("SelectedColor", ddlColors.SelectedValue);
}
protected void ScriptManager1_Navigate(object sender, HistoryEventArgs e)
{
string color = e.State["SelectedColor"];
if (!string.IsNullOrEmpty(color))
{
lblSelectedColor.Text = color;
lblSelectedColor.BackColor = System.Drawing.Color.FromName(color);
}
}
What is Ajax?
The term Ajax was coined by Jesse James Garrett and is a short form for "Asynchronous Javascript and XML". Ajax represents a set of commonly used techniques, like HTML/XHTML, CSS, Document Object Model(DOM), XML/XSLT, Javascript and the XMLHttpRequest object, to create RIA's (Rich Internet Applications).
Ajax gives the user, the ability to dynamically and asynchronously interact with a web server, without using a plug-in or without compromising on the user’s ability to interact with the page. This is possible due to an object found in browsers called the XMLHttpRequest object.
What is ASP.NET AJAX?
‘ASP.NET AJAX’ is a terminology coined by Microsoft for ‘their’ implementation of AJAX, which is a set of extensions to ASP.NET. These components allow you to build rich AJAX enabled web applications, which consists of both server side and client side libraries.
Which is the current version of ASP.NET AJAX Control Toolkit?
As of this writing, the toolkit version is Version 1.0.20229 (if you are targeting Framework 2.0, ASP.NET AJAX 1.0 and Visual Studio 2005) and Version 3.0.20229 (if targeting .NET Framework 3.5 and Visual Studio 2008).
What role does the ScriptManager play?
The ScriptManager manages all ASP.NET AJAX resources on a page and renders the links for the ASP.NET AJAX client libraries, which lets you use AJAX functionality like PageMethods, UpdatePanels etc. It creates the PageRequestManager and Application objects, which are prominent in raising events during the client life cycle of an ASP.NET AJAX Web page. It also helps you create proxies to call web services asynchronously.
Can we use multiple ScriptManager on a page?
No. You can use only one ScriptManager on a page.
What is the role of a ScriptManagerProxy?
A page can contain only one ScriptManager control. If you have a Master-Content page scenario in your application and the MasterPage contains a ScriptManager control, then you can use the ScriptManagerProxy control to add scripts to content pages.
Also, if you come across a scenario where only a few pages in your application need to register to a script or a web service, then its best to remove them from the ScriptManager control and add them to individual pages, by using the ScriptManagerProxy control. That is because if you added the scripts using the ScriptManager on the Master Page, then these items will be downloaded on each page that derives from the MasterPage, even if they are not needed, which would lead to a waste of resources.
What are the requirements to run ASP.NET AJAX applications on a server?
You would need to install ‘ASP.NET AJAX Extensions’ on your server. If you are using the ASP.NET AJAX Control toolkit, then you would also need to add the AjaxControlToolkit.dll in the /Bin folder.
Note: ASP.NET AJAX 1.0 was available as a separate downloadable add-on for ASP.NET 2.0. With ASP.NET 3.5, the AJAX components have been integrated into ASP.NET.
Explain the UpdatePanel?
The UpdatePanel enables you to add AJAX functionality to existing ASP.NET applications. It can be used to update content in a page by using Partial-page rendering. By using Partial-page rendering, you can refresh only a selected part of the page instead of refreshing the whole page with a postback.
Can I use ASP.NET AJAX with any other technology apart from ASP.NET?
To answer this question, check out this example of using ASP.NET AJAX with PHP, to demonstrate running ASP.NET AJAX outside of ASP.NET. Client-Side ASP.NET AJAX framework can be used with PHP and Coldfusion.
How can you cancel an Asynchronous postback?
Yes you can. Read my article over here.
Difference between Server-Side AJAX framework and Client-side AJAX framework?
ASP.NET AJAX contains both a server-side Ajax framework and a client-side Ajax framework. The server-side framework provides developers with an easy way to implement Ajax functionality, without having to possess much knowledge of JavaScript. The framework includes server controls and components and the drag and drop functionality. This framework is usually preferred when you need to quickly ajaxify an asp.net application. The disadvantage is that you still need a round trip to the server to perform a client-side action.
The Client-Side Framework allows you to build web applications with rich user-interactivity as that of a desktop application. It contains a set of JavaScript libraries, which is independent from ASP.NET. The library is getting rich in functionality with every new build released.
How can you debug ASP.NET AJAX applications?
Explain about two tools useful for debugging: Fiddler for IE and Firebug for Mozilla.
Can we call Server-Side code (C# or VB.NET code) from javascript?
Can you nest UpdatePanel within each other?
Yes, you can do that. You would want to nest update panels to basically have more control over the Page Refresh.
How can you to add JavaScript to a page when performing an asynchronous postback?
Use the ScriptManager class. This class contains several methods like the RegisterStartupScript(), RegisterClientScriptBlock(), RegisterClientScriptInclude(), RegisterArrayDeclaration(),RegisterClientScriptResource(), RegisterExpandoAttribute(), RegisterOnSubmitStatement() which helps to add javascript while performing an asynchronous postback.
Explain differences between the page execution lifecycle of an ASP.NET page and an ASP.NET AJAX page?
In an asynchronous model, all the server side events occur, as they do in a synchronous model. The Microsoft AJAX Library also raises client side events. However when the page is rendered, asynchronous postback renders only the contents of the update panel, where as in a synchronous postback, the entire page is recreated and sent back to the browser.
Explain the AJAX Client life-cycle events
Here’s a good article about the same.
Is the ASP.NET AJAX Control Toolkit(AjaxControlToolkit.dll) installed in the Global Assembly Cache?
No. You must copy the AjaxControlToolkit.dll assembly to the /Bin folder in your application.
On basis of these control only, updatePanel get refreshed then we write in trigger tag
<Triggers> <asp:PostBackTrigger ControlID="btnSave" /> <asp:AsyncPostBackTrigger ControlID="btnDeleteTop" EventName="Click" /> <asp:AsyncPostBackTrigger ControlID="btnCancel" EventName="Click" /></Triggers>
