This tutorial will show you how to use the ListView Control to display, edit and delete database records without using any code-behind.
Download the Full Working Version of this Project written with Visual Studio.NET 2008 Here!
Looking for more .NET Database Tutorials? Click Here!
The ListView Data Control is a new addition to the .NET Framework in version 3.5. It is a very versatile control and let's us do a lot of the same things as the other data controls combined. In this tutorial, you will learn how to use the ListView Control to edit data in a database using no code-behind. We will be using the templates of the ListView only.
Before we begin, we need a database. For this example, we will create a database with one table, which will have three columns - id, name and age. We will use this database to display the data through the ListView and a SqlDataSource.
Once we have our database, we can add our ListView and SqlDataSource:
<form id="form1" runat="server">
<asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1" DataKeyNames="id">
</asp:ListView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT * FROM tblPeople"
UpdateCommand="Update tblPeople SET name=@name, age=@age WHERE id=@id"
DeleteCommand="Delete tblPeople WHERE id=@id" /> |
We add the ListView control like any other server control. Notice the Update and Delete Commands we added to the Sql DataSource. This allows us to use the SqlDataSource to submit changes and deletions back to the database.
The next thing we need to do is to create the Templates that our ListView will use. We will start with the LayoutTemplate, which acts as the container for the ItemTemplate:
|
<LayoutTemplate>
<asp:PlaceHolder ID="itemPlaceholder" runat="server" />
</LayoutTemplate>
|
We are not going to have anything in the LayoutTemplate other than the PlaceHolder. The PlaceHolder will be replaced at runtime by the ItemTemplate contents.
Next, we are going to create the ItemTemplate, which is used to display the data from the database:
<ItemTemplate>
<div>
<strong>Name: </strong><%# Eval("name") %>
<br />
<strong>Age: </strong><%# Eval("age") %>
<br />
<asp:LinkButton ID="lnkEdit" runat="server" Text="Edit" CommandName="Edit" /> |
<asp:LinkButton ID="lnkDel" runat="server" Text="Delete"
CommandName="Delete" OnClientClick="return confirm('Delete this entry?')" />
</div> |
Here, we are simply outputting the Name and Age, as well as two Link Buttons, for each record in the database. By doing this, we are providing a way to edit or delete each individual record directly. The CommandName is built-in to the control, so when we click it, it will take us to the relevant template.
Next up, is the EditItemTemplate, which appears when the Edit CommandName is called (or when we click Edit):
<EditItemTemplate>
<div>
Name: <asp:TextBox ID="txtName" runat="server" Text='<%# Bind("name") %>' />
<br />
Age: <asp:TextBox ID="txtAge" runat="server" Text='<%# Bind("age") %>' />
<br />
<asp:LinkButton ID="lnkSave" Text="Save" runat="server" CommandName="Update" /> |
<asp:LinkButton ID="lnkCancel" Text="Cancel" runat="server" CommandName="Cancel" />
</div> |
This is similar to the ItemTemplate, except we are binding the table names to the controls, rather than assigning the values. Also, we have two more link buttons with CommandNames. Again, these Commands are built-in to the control, so we can save changes back to the database or cancel changes and go back to the ItemTemplate view.
If we run our web application now, we will be presented with a list of records from the database, and Edit and Delete links for each one. These link buttons should be fully functional - allowing us to edit each record, or delete as we wish.
The ASPX code will look something like this:
<form id="form1" runat="server">
<asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1" DataKeyNames="id">
<LayoutTemplate>
<asp:PlaceHolder ID="itemPlaceholder" runat="server" />
</LayoutTemplate>
<ItemTemplate>
<div>
<strong>Name: </strong><%# Eval("name") %>
<br />
<strong>Age: </strong><%# Eval("age") %>
<br />
<asp:LinkButton ID="lnkEdit" runat="server" Text="Edit" CommandName="Edit" /> |
<asp:LinkButton ID="lnkDel" runat="server" Text="Delete"
CommandName="Delete" OnClientClick="return confirm('Delete this entry?')" />
</div>
</ItemTemplate>
<EditItemTemplate>
<div>
Name: <asp:TextBox ID="txtName" runat="server" Text='<%# Bind("name") %>' />
<br />
Age: <asp:TextBox ID="txtAge" runat="server" Text='<%# Bind("age") %>' />
<br />
<asp:LinkButton ID="lnkSave" Text="Save" runat="server" CommandName="Update" /> |
<asp:LinkButton ID="lnkCancel" Text="Cancel" runat="server" CommandName="Cancel" />
</div>
</EditItemTemplate>
</asp:ListView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT * FROM tblPeople"
UpdateCommand="Update tblPeople SET name=@name, age=@age WHERE id=@id"
DeleteCommand="Delete tblPeople WHERE id=@id" /> |
Download the Full Working Version of this Project written with Visual Studio.NET 2008 Here!
Looking for more .NET Database Tutorials? Click Here!
|