First, here's the definition of AJAX ( A synchronous J avaScript A nd X ML) fundamental part of the RIA (Rich Internet Applications) .
This post will try to install the ASP.NET AJAX extension specifically for the Visual Web Developer Express Edition and the basic use of the Update Panel.
To add AJAX functionality within our IDE, we must go to this page http://www.microsoft.com/downloads/details.aspx?FamilyID=ca9d90fa-e8c9-42e3-aa19-08e2c027f5d6&displaylang = in where to download and then install the ASP.NET AJAX Extensions 2.0.
Once installed open the Visual Web Developer and create a Web site enabled AJAX-style Web Site .... to see in design view the default page, we will see a control called ScriptManager, this control handles the basic script for an AJAX application, simply by the implementations AJAX can be used, otherwise we could not use AJAX site or were going to do the script manually.
If we go to the toolbox will see that there is a new tab (AJAX Extensions), now we use the UpdatePanel, the UpdatePanel is a control container, such as a normal GroupBox or a Panel, but it has the ability to execute instructions asynchronous, avoiding the postback (sending information to the server) each time the user performs an action, updating only the part that you say, not the page completely. Let the control action to better understand the concept.
Add 2 labels and a dropdownlist.
one of the labels will be used just to see the impact of AJAX on the label2 put in the text 0 (number zero).
the DropDownList filled it with several elements (properties, we Items, click on the box next to "Collection ()" and begin to add items) .. and we put the AutoPostBack to true (in the properties, we AutoPostBack and change it to true), then we double-click the DropDownList to schedule in the SelectedIndexChanged event which will
- Me.Label1.Text = Me.DropDownList1 . Text
- Me.Label2.Text = CStr (CInt (Me.Label2.Text) + 1)
Running
our webform, add in our label1 and our DropDownList, and run our application .. to select an item from the list we see that our label1 change .. but no .. 2 forwards only necessary, not every page in full, save valuable resources, but then the DropDownList necessarily be inside the UpdatePanel?, No.
we get the DDL of the UpdatePanel and change to HTML editing view, where see our UpdatePanel, which is a tag "< ContentTemplate> where the elements belonging to this (should be in our label1), after the closure of " ContentTemplate
< asp: AsyncPostBackTrigger control = "DropDownList1" EventName = "SelectedIndexChanged" /> we are adding an asynchronous call to the SelectedIndexChanged event DropDownList1 control .. what caused it, but not inside the UpdatePanel that can update our label1 without causing a PostBack not necessary. Execute
and see that everything works perfectly, we use only what you need and understand how the UpdatePanel and the usefulness of AJAX in our web site.
This was the first tutorial in ASP.NET 2.0 AJAX .. then see the AjaxControlToolkit
Any questions, comments or whatever then do it haha.
0 comments:
Post a Comment