This tutorial will demonstrate how to page using the ListView control in nested UpdatePanels. The UpdatePanel control enables you to build rich, client centric Web applications. UpdatePanel controls allow you to refresh the selected parts of a page rather than refreshing an entire whole page with a postback.
These partial-page updates contain a ScriptManager control, usually one or more UpdatePanels and can automatically participate without custom client script.
UpdatePanels are a server control that helps you develop Web pages with complex client behavior. It makes a Web page appear more interactive to the end user. Without UpdatePanels, coordinating between server and client when update specified parts of a Web page, requires extensive knowledge of JavaScript. However, with UpdatePanel controls, you can enable pages to participate in updates without wiring any script. Additionally, the UpdatePanel control is browser independent and can reduce the amount of data transferred between client and server.
One UpdatePanel can contain another UpdatePanel which can contain another Updatepanel and so forth and so on. Like we described above, this is be useful when you want to control how much the page is refreshed. There may be instances when only a part of the page needs to be updated and other times when the entire page needs to be updated.
Try Server Intellect for Windows Server Hosting. Quality and Quantity!
Here is an example that contains two nested UpdatePanels. The outer panel will contain a DropDownList, and ListView control. The inner panel will contain only the ListView control.
To start, open Visual Studio 2008. File > New > Web site > ASP.NET Web site and name it nestUpdatePanel or whatever you want. In the markup we want to add a CSS; this should be very straight-forward:
| <title>Learn How to Display Nested Update Panels</title> <style type="text/css"> fieldset { padding: 12px; } .comment { padding: 12px; border: dotted 3px black; margin: 8px; } </style> </head> |
Next, let's create a DropDownList control that will contain a list for all the "members". What we are going to implement is when a user clicks on a member name from the DropDownList control the entire page is updated. However, when you add a new comment to the member with the ListView control, only the comments portion fo the page is updated.
Next, we want to create a DropDownList that is connected to out Person's table. This Web server control enables users to select from a single-selection drop-down list box. This control shows only the selected item in a box, along with a drop-down button that is clicked dislpays the name of the member.
| <asp:DropDownList id="ddlPeople" DataSourceID="dbPeople" DataValueField="Id" DataTextField="Name" AutoPostBack="true" Runat="server" /> <asp:SqlDataSource id="dbPeople" ConnectionString="<%$ ConnectionStrings:PeopleConnectionString %>" SelectCommand="SELECT Id, Name FROM Person" Runat="server" /> |
Here are two UpdatePanel controls. The first UpdatePanel control has an ID of upOuter. It also includes a trigger that points to the DropDownList control which is used select a member.
| <asp:UpdatePanel ID="upOuter" UpdateMode="Conditional" runat="server"> <Triggers> <asp:AsyncPostBackTrigger ControlID="ddlPeople" /> </Triggers> <ContentTemplate> <br /> <asp:FormView id="frmPeople" DataSourceID="dbPeople" Runat="server"> <ItemTemplate> <fieldset> <legend>Member Name</legend> <%# Eval("Name") %> |
Can you see that this UpdatePanel control has its UpdateMode property is set to the value "condiitional"? If it was not set to this value, the outer panel would refresh its content when the Add Comment Button is clicked.
Yes, it is possible to find a good web host. Sometimes it takes a while. After trying several, we went with Server Intellect and have been very happy. They are the most professional, customer service friendly and technically knowledgeable host we've found so far.
Now look at the inner UpdatePanel. The ID is named upInner. This UpdatePanel surrounds the ListView, which is used to display the form for adding and displaying member comments. Now when you add a new comment, only the comment area of the page is updated, not the entire page.
| <asp:ListView id="lstPeopleComments" DataSourceID="dbPeopleComments" InsertItemPosition="FirstItem" Runat="server" ItemPlaceholderID="itemPlaceHolder"> <LayoutTemplate> <fieldset> <legend>Feedback</legend> <%= DateTime.Now.ToString("T") %> <div id="itemContainer" runat="server"> <asp:placeHolder ID="itemPlaceHolder" runat="server" /> </div> </fieldset> </LayoutTemplate> <ItemTemplate> <div class="comment"> <%# Eval("Comment") %> </div> </ItemTemplate> <InsertItemTemplate> <asp:Label id="lblComment" Text="Comment:" AssociatedControlID="txtComment" Runat="server" /> <br /> <asp:TextBox id="txtComment" Text='<%# Bind("Comment") %>' TextMode="MultiLine" Columns="40" Rows="3" Runat="server" /> <br /> <asp:Button id="btnInsert" Text="Add Comment" CommandName="Insert" Runat="server" /> </InsertItemTemplate> </asp:ListView> |
In order connect to the Person table you will need to connect to a database. So first you must set the ConnectionString property to a valid connection string.
The SqlDataSource data source control represents data in an SQL relational database to data-bound controls like the DataList we just went through. You can use the SqlDataSource control in conjunction with a data-bound control to retrieve data from a relational database and to display, edit, and sort data on a Web page with little or no code.
| <asp:SqlDataSource id="dbPeopleComments" ConnectionString="<%$ ConnectionStrings:PeopleConnectionString %>" SelectCommand="SELECT Id, Comment FROM Person WHERE catId=@catId" InsertCommand="INSERT Person (Comment,catId) VALUES (@Comment,@catId)" Runat="server"> <SelectParameters> <asp:ControlParameter Name="catId" ControlID="ddlPeople" /> </SelectParameters> <InsertParameters> <asp:ControlParameter Name="catId" ControlID="ddlPeople" /> </InsertParameters> </asp:SqlDataSource> </fieldset> </ItemTemplate> </asp:FormView> </ContentTemplate> </asp:UpdatePanel> <asp:SqlDataSource id="dbPeoples" ConnectionString="<%$ ConnectionStrings:PeopleConnectionString %>" SelectCommand="SELECT Id, Name, Gender FROM Person WHERE Id=@Id" Runat="server"> <SelectParameters> <asp:ControlParameter Name="Id" ControlID="ddlPeople" /> </SelectParameters> </asp:SqlDataSource> |
For performance reasons, you should always place the smallest possible area that you need to update in side of an UpdatePanel control. It simple. The larger the area contained in an UpdatePanel, the more content that must be passed via Internet when the UpdatePanel gets updated. When we nest these UpdatePanel controls, we have a more granular control over the content that gets in a page.
Server Intellect assists companies of all sizes with their hosting needs by offering fully configured server solutions coupled with proactive server management services. Server Intellect specializes in providing complete internet-ready server solutions backed by their expert 24/365 proactive support team.
No comments:
Post a Comment