Click here to Skip to main content
12,399,799 members (49,792 online)
Click here to Skip to main content
Add your own
alternative version

Stats

28.8K views
24 bookmarked
Posted

Creating AJAX enabled web forms

, 13 Dec 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
Benefits of creating AJAX enabled web forms and how to do it.

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.
  7. <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <h2>Employees</h2>
        <hr />
        </asp:Content> 
  8. Switch to Design view and add a GridView control inside the UpdatePanel and bind the GridView to the database table.
  9. Again, open the GridView Tasks window by using the smart tag. Select the Enable Paging check box.
  10. <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>
    
  11. 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. 
  12. 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.
  13. <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>
  14. 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.
  15. <pre lang="cs"><span style="font-size: 9pt;"></span>
  16. 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.
  17. <Triggers>
        <asp:AsyncPostBackTrigger ControlID="ButtonSave" EventName="Click" />
    </Triggers>
  18. 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.
  3. <asp:UpdateProgress ID="UpdateProgress1" runat="server">
        <ProgressTemplate>
            <div style="margin-top: 20px; font-size: larger; color: Green">
                Processing, please wait ...
            </div>
        </ProgressTemplate>
    </asp:UpdateProgress>
  4. 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.
  5. System.Threading.Thread.Sleep(2000);
  6. Run the application and notice that the notification is shown to the user when you enter a new record in the GridView control.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Komal Mangal
Software Developer
India India
For more technical articles please visit my blog at-
http://komalmangal.blogspot.in

You may also be interested in...

Comments and Discussions

 
Questionrequest Pin
Member 1014340512-Dec-13 8:21
memberMember 1014340512-Dec-13 8:21 
AnswerRe: request Pin
Komal Mangal13-Dec-13 20:03
memberKomal Mangal13-Dec-13 20:03 
SuggestionSql Injection Pin
KevinAG10-Dec-13 5:54
memberKevinAG10-Dec-13 5:54 
GeneralRe: Sql Injection Pin
Komal Mangal11-Dec-13 5:29
memberKomal Mangal11-Dec-13 5:29 
GeneralRe: Sql Injection Pin
HaBiX12-Dec-13 10:38
memberHaBiX12-Dec-13 10:38 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.160721.1 | Last Updated 13 Dec 2013
Article Copyright 2013 by Komal Mangal
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid