Creating AJAX enabled web forms

Creating AJAX enabled web forms

1. AJAX is a platform-independent, ECMAScript-compliant technology for communicating between code running on the client and code running on the server.
2. ASP.NET includes both a set of server controls for working with AJAX and a set of client-side JavaScript files called the Microsoft AJAX library.
3. The ScriptManager control is required on all pages that work with the AJAX Extensions for ASP.NET. It manages the JavaScript files sent to the client and the communication between the server and the client.
4. The ScriptManagerProxy control is used on pages that work with a master page that already defines a ScriptManager control or with user controls that will be used on pages that include a ScriptManager control.
5. The UpdatePanel control allows you to define an area within your page that can post back to the server and receive updates independent of the rest of the page.
6. The UpdateProgress control is used to provide notice to the user that the page has initiated a callback to the server.

Uses and Benefits of ASP.NET AJAX

1. Partial-page updates 
2. Client-side processing 
3. Desktop-like UI 
4. Progress indication improved performance and higher scale

Building an AJAX enabled webpage

Enabling Partial page updates

1. Open Visual Studio and create a new ASP.NET website.
2. Add SQL Server database to the App_Data folder of the site or you can add northwnd.mdf database file.
3. Add a table to the above added database. For example, create a table “Employees” with columns “EmployeeID” and “EmployeeName” and add entries to these columns.
4. Open Default.aspx in Source view. Add a ScriptManager control to the body of the page from the AJAX Extensions tab of the Toolbox. 
5. Add text to the page to serve as a title followed by a horizontal line. Your markup inside the BodyContent control might look as follows.
6. Add an AJAX UpdatePanel control to the page from the AJAX Extensions tab of the Toolbox.
ASP.NET

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <h2>Employees</h2>
    <hr />
    </asp:Content> 

7. Switch to Design view and add a GridView control inside the UpdatePanel and bind the GridView to the database table.
8. Again, open the GridView Tasks window by using the smart tag. Select the Enable Paging check box.
XML

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="ButtonSave" EventName="Click" />
    </Triggers>
    <ContentTemplate>
        <asp:GridView ID="GridView1" runat="server" 
               AutoGenerateColumns="False" DataSourceID="SqlDataSource1"
               AllowPaging="True">
            <Columns>
                <asp:BoundField DataField="EmployeeID" 
                       HeaderText="Employee ID" SortExpression="Employee ID" />
                <asp:BoundField DataField="EmployeeName" 
                       HeaderText="Employee Name" SortExpression="Employee Name" />
            </Columns>
        </asp:GridView>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
            ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
            SelectCommand="SELECT * FROM [Employee]"></asp:SqlDataSource>
    </ContentTemplate>
</asp:UpdatePanel>

9. Run the application and view the Default.aspx page in a browser. Click the data page numbers to move between data pages. Notice that only the grid is being updated and not the entire page; this is because the UpdatePanel control wraps requests for data and replaces the markup for the grid rather than refreshing the entire page. 
10. Next, add a section at the top of the form (outside of the UpdatePanel) that allows the user to enter a new employee and have it added to the database. Your markup code might look as follows.
XML

<div style="margin: 20px 0px 20px 40px">
    Employee Name
    <br />
    <asp:TextBox ID="TextBoxName" runat="server" Width="200"></asp:TextBox>
    <br />
    <asp:Button ID="ButtonSave" runat="server" 
       Text="Add" Style="margin-top: 15px" OnClick="ButtonSave_Click" />
</div>

11. Next, add a Click event to the ButtonSave button defined in step 11 (onclick="ButtonSave_ Click"). This Click event will  add employee name to the Employees table in the database. At the end of this event, rebind the GridView control. The following code shows an example.
C#

<pre lang="cs"><span style="font-size: 9pt;"></span>protected void ButtonSave_Click(object sender, EventArgs e)
{
    SqlConnection con = new SqlConnection(conStr);
    string qry = "Insert into Employee(EmployeeName) Values(@employeeName)";
    SqlCommand cmd = new SqlCommand(qry, con);
    cmd.Parameters.AddWithValue("@employeeName", TextBoxName.Text);
    con.Open();
    cmd.ExecuteNonQuery();
    con.Close();
    GridView1.DataBind();
}

12. Run the application and enter a row in the table. Notice that the entire page refreshes. Add behavior to the page so that the Add button triggers a partial-page update to the GridView control. To do so, add a trigger to the UpdatePanel control and connect the trigger to the ButtonEnter control. The following markup shows an example.
XML

<Triggers>
    <asp:AsyncPostBackTrigger ControlID="ButtonSave" EventName="Click" />
</Triggers>

13. Run the application again and notice that now only GridView updates when a new row is added.

Adding a Progress Indicator

1. Open Default.aspx in Source view. Add an UpdateProgress control to the UpdatePanel. Add the control to the bottom of the panel just inside the ContentTemplate element.
2. Add text inside the ProgressTemplate elements of the UpdateProgress control to notify the user that processing is happening on the server. The following shows a sample markup.
XML

<asp:UpdateProgress ID="UpdateProgress1" runat="server">
    <ProgressTemplate>
        <div style="margin-top: 20px; font-size: larger; color: Green">
            Processing, please wait ...
        </div>
    </ProgressTemplate>
</asp:UpdateProgress>

3. The processing happens pretty fast. Therefore, add a line of code to the end of the ButtonSave_Click event to pause the server-side processing. You can simply put the thread to sleep for a few seconds. The following code shows an example.
C#

System.Threading.Thread.Sleep(2000);

4. Run the application and notice that the notification is shown to the user when you enter a new record in the GridView control.