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.
How to Display Nested UpdatePanels using the ListView
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.
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.
<ContentTemplate>
<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.
|
