In this tutorial will demonstrate how to use a
DataList control to allow users to select individual items in the
particular list.
Learn How to Use the DataList control in ASP.NET 3.5
In this tutorial will demonstrate how to use a
DataList control to allow users to select individual items in the
particular list.
Learn How to Use the DataList control in ASP.NET 3.5 Web App using C#
Once an individual item is selected, the DataList can be set to
display additional text and controls for the SelectedItem that may be
different from, or not included in, the ItemTemplate. This can be done
by defining a SelectedItemTemplate, that is rendered but only for
whichever item that is currently selected.
As you can see the
DataList control displays data in a format that you can define using
templates and styles. It is a perfect control for data in any repeating
structure like a table. The DataList can also encapsulate the
functionality to easily highlight the selected item visually, using the
SelectedItemTemplate.
I just signed up at Server Intellect and couldn't be more pleased with my Windows Server! Check it out and see for yourself.
To start, open Visual Studio 2008. Click File > New > Web Site
> ASP.NET and name it DataList or whatever you want. First, we want
to define the layout in a CSS. This example is pretty straight forward,
considering we are using just a basic layout:
<style type="text/css">
html
{
background-color:green;
}
.content
{
margin:auto;
width:600px;
background-color:white;
}
.column
{
float:left;
width:250px;
padding:20px;
}
.movies td
{
padding:10px;
}
a
{
padding:5px;
color:red;
}
a:hover
{
background-color:gray;
}
</style>
|
Next, we want to create a DataList control. The control will display
a menu of People from our Person table. You can use the DataList
control to edit database records. Although this control requires more
coding than editing with other Databound controls such as the GridView,
FormView, or DetailsView controls.
Notice how it includes a DataKeyField property that accepts the name
of a primary key column from the data source. When this property is
set, the DataList control’s DataKeys collection is populated with the
primary keys from the data source, but only when the control is bound
to its data source. Below is an example markup of a DataList control
and illustrates how you can edit and delete database records:
<body>
<form id="myForm" runat="server">
<div class="content">
<div class="column">
<asp:DataList
id="dlstPeople"
DataSourceID="dbPeople"
DataKeyField="Id"
//GridLines enables you to add rules around the cells in the
DataList.The Possible values are None, Horizontal, Vertical, Both
GridLines="Both"
onEditCommand="dlstPeople_EditCommand"
onCancelCommand="dlstPeople_CancelCommand"
onUpdateCommand="dlstPeople_UpdateCommand"
onDeleteCommand="dlstPeople_DeleteCommand"
//CssClass enables you to associate a CSS class with the DataList
CssClass="people"
//EditItemStyle enables you to format the DataList row selected for editing
EditItemStyle-CssClass="edit"
Runat="server">
<ItemTemplate>
<h1><%#Eval("Name") %></h1>
is a
<%#Eval("Gender") %>
and was born in
<%#Eval("City") %>
<br /><br />
<asp:LinkButton
id="lnkEdit"
CommandName="Edit"
Text="Edit"
Runat="server" />
<asp:LinkButton
id="lnkDelete"
CommandName="Delete"
Text="Delete"
OnClientClick="return confirm('Are you sure?');"
runat="server" />
</ItemTemplate>
|
In the ItemTemplate shown above, the DataList includes an Edit
LinkButton and a Delete LinkButton. When the Edit LinkButton is
clicked, the DataList raises its EditCommand event and the
dlstPeople_Edit() method is executed. Same is true for the delete
button, which also raises the DeleteCommand event and the
dlstPeople_Delete() method is executed. Here is an example of these
methods:
<script runat="server">
protected void dlstPeople_EditCommand(object source, DataListCommandEventArgs e)
{
dlstPeople.EditItemIndex = e.Item.ItemIndex;
dlstPeople.DataBind();
}
protected void dlstPeople_UpdateCommand(object source, DataListCommandEventArgs e)
{
// Get form fields
TextBox txtName = (TextBox)e.Item.FindControl("txtName");
TextBox txtGender = (TextBox)e.Item.FindControl("txtGender");
TextBox txtCity = (TextBox)e.Item.FindControl("txtCity");
// Assign parameters
dbPeople.UpdateParameters["Id"].DefaultValue = dlstPeople.DataKeys[e.Item.ItemIndex].ToString();
dbPeople.UpdateParameters["Name"].DefaultValue = txtName.Text;
dbPeople.UpdateParameters["Gender"].DefaultValue = txtGender.Text;
dbPeople.UpdateParameters["City"].DefaultValue = txtCity.Text;
// Call SqlDataSource Update
dbPeople.Update();
// Take out of Edit mode
dlstPeople.EditItemIndex = -1;
}
protected void dlstPeople_DeleteCommand(object source, DataListCommandEventArgs e)
{
// Assign parameters
dbPeople.DeleteParameters["Id"].DefaultValue = dlstPeople.DataKeys[e.Item.ItemIndex].ToString();
// Call SqlDataSource Delete
dbPeople.Delete();
}
protected void dlstPeople_CancelCommand(object source, DataListCommandEventArgs e)
{
dlstPeople.EditItemIndex = -1;
dlstPeople.DataBind();
}
</script>
|
Can you see how the dlstPeople_Edit() method sets the EditItemIndex
property fo the DataList control? The EditItemTemplate is displayed for
the item in the DataList that matches the EditItemIndex.
Also notice how the EditItemTemplate includes form fields for
editing a people record and an Update and Cancel LinkButton. These
LinkButtons raise the UpdateCommand and Cancel Command events, and
execute the corresponding event handlers.
If you are working through this and trying to get this to compile, do not forget to configure your web.config:
<connectionStrings>
<add name="PeopleConnectionString" connectionString="Data
Source=(local);Initial Catalog=People;Integrated Security=True"
providerName="System.Data.SqlClient"/>
</connectionStrings>
|
Also, be sure that you inlcude the rest of this EditItemTemplate
markup under the ItemTemplate shown above. Ths simply just create
labels and asscoiates them with the correct properties:
<EditItemTemplate>
<asp:Label
id="lblName"
Text="Name:"
AssociatedControlID="txtName"
Runat="server" />
<br />
<asp:TextBox
id="txtName"
Text='<%#Eval("Name")%>'
Runat="server" />
<br /><br />
<asp:Label
id="lblGender"
Text="Gender:"
AssociatedControlID="txtGender"
Runat="server" />
<br />
<asp:TextBox
id="txtGender"
Text='<%#Eval("Gender")%>'
Runat="server" />
<br /><br />
<asp:TextBox
id="txtCity"
Text='<%#Eval("City")%>'
Runat="server" />
<br /><br />
<asp:LinkButton
id="lnkUpdate"
CommandName="Update"
Text="Update"
Runat="server" />
<asp:LinkButton
id="lnkCancel"
CommandName="Cancel"
Text="Cancel"
Runat="server" />
</EditItemTemplate>
</asp:DataList>
</div>
|
In order connect to a 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="dbPeople"
ConnectionString="<%$ ConnectionStrings:PeopleConnectionString %>"
SelectCommand="SELECT Id,Name,Gender, City
FROM Person"
UpdateCommand="UPDATE Person SET Name=@Name,
Gender=@Gender, City=@City
WHERE Id=@Id"
DeleteCommand="DELETE Person WHERE Id=@Id"
Runat="server">
<UpdateParameters>
<asp:Parameter Name="Id" />
<asp:Parameter Name="Name" />
<asp:Parameter Name="Gender" />
<asp:Parameter Name="City" />
</UpdateParameters>
<DeleteParameters>
<asp:Parameter Name="Id" />
</DeleteParameters>
</asp:SqlDataSource>
|
We moved our Web sites to Server Intellect and have found them to be incredibly professional. Their setup is very easy and we were up and running in no time.
|
