Filter and Display Data with ASP.NET Web Forms (Part 3)

This is already part 3 of this series to filter and display data with ASP.NET Web Forms. In part 1 a distinct list of countries was retrieved from a Formula 1 Racers table, part 2 extended this to display racers from a single country within a GridView control. Changing the selection of the DropDownList control to a different country so far always makes a full postback to the server to request the new list. Part 3 now demonstrates how ASP.NET Web Forms can take advantage of Ajax to only request a part of the page.

For having Ajax functionality on a WebForms page, a ScriptManager control must be added to the page.

There can be only one instance of the ScriptManager with a page. In case master pages or user controls are used, and functionality of the ScriptManager should be used within the inner parts, the ScriptManager must be instantiated in the outer page parts, and the inner page parts can make use of the ScriptManagerProxy. The sample just defines a simple ASPX page, and thus just a singe ScriptManager is fine.

For updating only parts of the page the property EnablePartialRendering must be set to True. That’s the default setting. With this setting client-side JavaScript code is offered for partial rendering.

        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>

To define the part of the page that should be updated asynchronously, the UpdatePanel does the job. With the sample page the DropDownList could stay the same with every page request, but the GridView should change with every selection change in the DropDownList control. Thus the GridView control should be moved within the UpdatePanel.

The DropDownList shouldn’t update. However, on selection change of the DropDownList control the Ajax postback should fire. This must be set with the Triggers collection of the UpdatePanel. Clicking on the ellipsis button of the Triggers collection in the property editor allows adding this behavior with a simple designer as the following figure shows.

Checking the ASPX code that’s generated reveals these settings of the UpdatePanel:

        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:GridView ID="GridView1" runat="server" DataSourceID="EntityDataSource2">
                </asp:GridView>
                <br />
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="DropDownList1" 
                    EventName="SelectedIndexChanged" />
            </Triggers>
        </asp:UpdatePanel>

Running the application now just updates parts of the page instead of reloading the complete page with every selection change in the DropDownList control. The IE9 Developer Tools show the request of every page, and only the content of the UpdatePanel gets transferred. IE9 Developer Tools can be started from IE by clicking the F12 button and are really very helpful on developing Web applications Clicking the Network tab, network requests are captured and the complete HTTP request and response can be seen.

With an Ajax postback just the part of the update panel is replaced by new HTML code with the help from some JavaScript. There’s no need to write custom JavaScript code for doing this.

To summarize, ASP.NET Web Forms fulfills its promise with Ajax as well. With simple Web applications, partial page updates can be done easily just by using server-side controls and not deal with HTML and JavaScript at all. Of course, there are still the issues mentioned in the previous article on the ViewState, the necessity to do some tuning where still code is required, and ASP.NET Web Forms also lacks of a good way for unit testing.

Christian

CN innovation

The next article in this series makes use of a newer technology – ASP.NET Web Pages. Here Microsoft WebMatrix will be used as a tool instead of Visual Studio 2010. More on that next week.

Here you can find the links to all articles on this series.

Comments

[django developer]

Triggers collection in the property editor allows adding this behavior with a simple designer as the following figure shows.