Beginning Ajax and ASP.NET 3.5
Ajax is a great helper to us while developing rapid applications without worrying us at power of asynchronous. In Visyal Web Developer 2008 comes with builtin Atlas and ASP.NET3.5 . In this tutorial, I try to show you what's ajax and database querying at same time.
Now let's build our scene. Open an empty web site and dop a ScriptManager and UpdatePanel from Ajax Extensions tab. Close the tab and open standard controls and drop one textbox and one button. Place a label inside ajax control and one more outside of UpDatePanel. The second label will display that we are using Ajax and page is not posting back. I will add some hard codes and I have put s SqlDataSource and a GridView. Complete code is below.
What's going on!
I'm sure that, you're thinking that that was too easy. We have just write a scene for Visual Web Developer and place all actors on board. When we start application, first label (outside of Ajax Control) will display the second of request time. Type a character on textbox and hit the burtton. Ajax will fill the GridView without posting page and label2 will display working second of application. Look at that label1 did not change. Because page loaded only one time but Ajax loaded data intop GridView without posting request. Only a small part of page has been updated.
Here is the page code:
<form id="form1" runat="server"> <div> <asp:Label ID="Label1" runat="server"></asp:Label> <br /> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <br /> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:Button ID="Button1" runat="server" Text="Button" /> <br /> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" SelectCommand="SELECT [ProductID], [ProductName], [UnitPrice], [UnitsInStock] FROM [Alphabetical list of products] WHERE ([ProductName] LIKE '%' + @ProductName + '%')"> <SelectParameters> <asp:ControlParameter ControlID="TextBox1" Name="ProductName" PropertyName="Text" Type="String" /> </SelectParameters> </asp:SqlDataSource> <asp:Label ID="Label2" runat="server"></asp:Label> <br /> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="ProductID" DataSourceID="SqlDataSource1"> <Columns> <asp:BoundField DataField="ProductID" HeaderText="ProductID" InsertVisible="False" ReadOnly="True" SortExpression="ProductID" /> <asp:BoundField DataField="ProductName" HeaderText="ProductName" SortExpression="ProductName" /> <asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice" SortExpression="UnitPrice" /> <asp:BoundField DataField="UnitsInStock" HeaderText="UnitsInStock" SortExpression="UnitsInStock" /> </Columns> </asp:GridView> </ContentTemplate> </asp:UpdatePanel> </div> </form>Code Behind file:
Label2.Text = Date.Now.Second
End Sub
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Label1.Text = Date.Now.Second
End Sub
In code behind, we have passed page load time in second. Butwhen we hit the button ajax will change runtime to label which is label2 is a member control in our Ajax code.
In this tutorial, I try to build a very very simple application which fills the a data grid with our textbox control. Notice that, data grid will be filled after hitting the button that needs an action after page loaded.
Happy Coding!
