DetailsView Control in ASP.NET - Part 8
Introduction
In Part 7 of this article series we have discussed how to add Template
Fields in DetailsView Control
for to enhance the editing technique. Now in this article we will discuss how
to Insert data with DetailsView Control.
Inserting Data with DetailsView Control
We can
use the DetailsView control
to insert new records into a database table. For example, the page given below
enables us to insert a new record into the BOOK_LIST database table.
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DetailsView
id="dtlBooks"
AllowPaging="true"
DataSourceID="SqlDataSource1"
AutoGenerateInsertButton="true"
Runat="server" Width="227px" />
<br />
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:DatabaseConnectionString1 %>"
InsertCommand="INSERT INTO
BOOK_LIST(ID, TITLE, AUTHOR, PRICE) VALUES (@ID, @TITLE, @AUTHOR, @PRICE)"
ProviderName="<%$ ConnectionStrings:DatabaseConnectionString1.ProviderName %>"
SelectCommand="SELECT [ID], [TITLE],
[AUTHOR], [PRICE] FROM [BOOK_LIST]">
</asp:SqlDataSource>
</div>
</form>
</body>
</html>
Notice that the DetailsView control
in above example includes an AutoGenerateInsertButton property
that has the value true. This property automatically generates the user interface for
inserting a new record. After we open the above page, we can click the New
button to display a form for inserting a new record. When we click the Insert
button, the SQL command represented by theSqlDataSource control's InsertCommand property
is executed.
If we want the DetailsView control
to display an insert form by default, then we can assign the value Insert to the DetailsViewcontrol's DefaultMode property.
Here it is.
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">
html
{
background-color:silver;
font:14px Arial,Sans-Serif;
}
td,th
{
padding:10px;
}
#divDisplay
{
border:solid 1px black;
width:400px;
padding:15px;
background-color:#eeeeee;
}
#divInsert
{
display:none;
border:solid 1px black;
width:400px;
position:absolute;
top:100px;
left:100px;
padding:10px;
background-color:white;
}
</style>
<script type="text/javascript">
function showInsert() {
var divInsert = document.getElementById('divInsert');
divInsert.style.display = 'block';
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div id="divDisplay">
<asp:GridView
id="grdBooks"
DataSourceID="SqlDataSource1"
Runat="server" />
<br />
<a href="JavaScript:showInsert();">Inserting Books</a>
</div>
<div id="divInsert">
<b>Insert Book</b>
<asp:DetailsView
id="dtlBooks"
DataSourceID="SqlDataSource1"
AutoGenerateInsertButton="true"
AutoGenerateRows="false"
DefaultMode="Insert"
Runat="server">
<Fields>
<asp:BoundField
DataField="ID"
HeaderText="ID:" />
<asp:BoundField
DataField="TITLE"
HeaderText="TITLE:" />
<asp:BoundField
DataField="AUTHOR"
HeaderText="AUTHOR:" />
<asp:BoundField
DataField="PRICE"
HeaderText="PRICE:" />
</Fields>
</asp:DetailsView>
</div>
<br />
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:DatabaseConnectionString1 %>"
InsertCommand="INSERT INTO
BOOK_LIST(ID, TITLE, AUTHOR, PRICE) VALUES (@ID, @TITLE, @AUTHOR, @PRICE)"
ProviderName="<%$ ConnectionStrings:DatabaseConnectionString1.ProviderName %>"
SelectCommand="SELECT [ID], [TITLE],
[AUTHOR], [PRICE] FROM [BOOK_LIST]">
</asp:SqlDataSource>
</div>
</form>
</body>
</html>
Above page contains both
a GridView and DetailsView control.
The DetailsView control is hidden until you click the Insert Movie link. This
link executes a JavaScript function named ShowInsert(), which displays the DetailsView control. We can hide a column when aDetailsView control is in Insert mode with the BoundField control's InsertVisible property. This property is very useful, when we want to prevent
users from inserting a value for an identity column also.
Note: Continue
in Next Part.
Comments
Post a Comment