This tutorial will show you how to use the ListView control to insert new records to a SQL database.
Download the Full Working Version of this Project written with Visual Studio.NET 2008 Here!
Looking for more .NET Database Tutorials? Click Here!
In previous tutorials, we have learned how to display data from a SQL database using the new ListView Control, and also how to edit and delete that data. In this tutorial, we will look at how to use the ListView control to add new records to the database. It is actually much easier than editing and deleting data, and can be done without any code-behind.
The first thing we will want to do is get our database. If you already have one that you wish to work with, you can skip this step. We will create a SQL database and add it to our project. The database will have one table, and three columns - id, name and age. The ID column will be the Primary Key.
Once we have our database setup, we will start by adding our controls to the ASPX page:
<form id="form1" runat="server">
<asp:ListView ID="ListView1" runat="server"
InsertItemPosition="FirstItem" DataSourceID="SqlDataSource1">
</asp:ListView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
SelectCommand="SELECT * FROM tblPeople"
InsertCommand="INSERT tblPeople (name,age) VALUES (@name,@age)"
ConnectionString="<%$ ConnectionStrings:ConnectionString %>" >
</asp:SqlDataSource> |
Notice that we have added an InsertCommand to our SqlDataSource and also the InsertItemPosition to our ListView.
Next, we add the usual LayoutTemplate and ItemTemplate:
|
<LayoutTemplate>
<asp:PlaceHolder ID="itemPlaceholder" runat="server" />
</LayoutTemplate>
<ItemTemplate>
<div>
Name: <%# Eval("name") %><br />
Age: <%# Eval("age") %>
</div>
</ItemTemplate>
|
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.
In the ItemTemplate, we will be displaying the contents of the database as normal. To create a form to allow new additions to the database, we will use the InsertItemTemplate:
<InsertItemTemplate>
<div>
Name: <asp:TextBox ID="txtName" runat="server" Text='<%# Bind("name") %>' /><br />
Age: <asp:TextBox ID="txtAge" runat="server" Text='<%# Bind("age") %>' /><br />
<asp:Button ID="butInsert" runat="server" CommandName="Insert" Text="Add" />
</div> |
This template will be rendered at the same time as the ItemTemplate. We have provided two textboxes to allow new entries of a name and an age to be added to the database. We've also added a button to submit the addition to the database; notice the CommandName of Insert. This is a built-in feature of the ListView Control.
If we run this web application now, we will get the form we created in the InsertItemTemplate, and the ItemTemplate will also be rendered, displaying the current items in the database. We can use the form to make additions to the website, and then they should automatically appear in the table below the form.
The whole code for the ASPX page will be as follows:
<form id="form1" runat="server">
<asp:ListView ID="ListView1" runat="server"
InsertItemPosition="FirstItem" DataSourceID="SqlDataSource1">
<LayoutTemplate>
<asp:PlaceHolder ID="itemPlaceholder" runat="server" />
</LayoutTemplate>
<ItemTemplate>
<div>
Name: <%# Eval("name") %><br />
Age: <%# Eval("age") %>
</div>
</ItemTemplate>
<InsertItemTemplate>
<div>
Name: <asp:TextBox ID="txtName" runat="server" Text='<%# Bind("name") %>' /><br />
Age: <asp:TextBox ID="txtAge" runat="server" Text='<%# Bind("age") %>' /><br />
<asp:Button ID="butInsert" runat="server" CommandName="Insert" Text="Add" />
</div>
</InsertItemTemplate>
</asp:ListView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
SelectCommand="SELECT * FROM tblPeople"
InsertCommand="INSERT tblPeople (name,age) VALUES (@name,@age)"
ConnectionString="<%$ ConnectionStrings:ConnectionString %>" >
</asp:SqlDataSource> |
Download the Full Working Version of this Project written with Visual Studio.NET 2008 Here!
Looking for more .NET Database Tutorials? Click Here!
|