ASP.Net DataGrid為我們提供的內建的記錄行編輯功能,但是沒有提供內建的添加新行的功能。一個辦法就是:在DataTable中添加新行,然後再重新綁定到DataGrid,這個辦法可行,但在更新前需要進行確認,可能會產生空行。另外一個解決辦法就是:利用DataGrid footer template來提供一個空的行,這樣既可以提高速度,也可以避免其它方法帶來的不足。
為了為浏覽者提供一個空行,我們使用DataGrid的Footer Template,我們直接在Footer Template裡添加文本框,這樣可以避免不必要的操作:比如點擊“編輯”按鈕等。這樣也可以減少往復數據提交的次數。我們這裡仍然LinkButton(插入),並設置CommandName屬性為“Insert”,這個CommandName在DataGrid的ItemCommand事件中,確保只有用戶點擊了“Insert”LinkButton才添加記錄。添加到數據庫的方法是很簡單的。
下面的這個例子提供了DataGrid快速添加新行的功能。ASPx代碼和Cohe Behind代碼分別如下,注意更改數據錄連接字符串:
查看例子
InsertableDataGrid.ASPx
<%@ Page Language="<a href="http://dev.21tx.com/language/vb/" target="_blank">VB</a>" AutoEventWireup="false" Codebehind="InsertableDataGrid.aspx.vb" Inherits="ASPx<a href="http://dev.21tx.com/web/" target="_blank">Web</a>.InserTableDataGrid"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD Html 4.0 Transitional//EN">
<Html>
<HEAD>
<title>WebForm1</title>
<meta name="GENERATOR" content="Microsoft Visual Studio.Net 7.0">
<meta name="CODE_LANGUAGE" content="Visual Basic 7.0">
<meta name="vs_defaultClIEntScript" content="<a href="http://dev.21tx.com/web/Javascript/" target="_blank">JavaScript</a>">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/IE5">
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<ASP:DataGrid id="DataGrid1" runat="server" BorderColor="#CC9966" Border
BorderWidth="1px" BackColor="White" CellPadding="4" ShowFooter="True" AutoGenerateColumns="False">
<SelectedItemStyle Font-Bold="True" ForeColor="#663399" BackColor="#FFCC66"></SelectedItemStyle>
<ItemStyle ForeColor="#330099" BackColor="White"></ItemStyle>
<HeaderStyle Font-Bold="True" ForeColor="#FFFFCC" BackColor="#990000"></HeaderStyle>
<FooterStyle ForeColor="#330099" BackColor="#FFFFCC"></FooterStyle>
<Columns>
<ASP:TemplateColumn HeaderText="Employee ID">
<ItemTemplate>
<ASP:Label id=Label3 runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.employeeid") %>'>
</ASP:Label>
</ItemTemplate>
<FooterTemplate>
<asp:LinkButton id="LinkButton1" runat="server" CommandName="Insert">Insert</ASP:LinkButton>
</FooterTemplate>
<EditItemTemplate>
<ASP:TextBox id=TextBox5 runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.employeeid") %>'>
</ASP:TextBox>
</EditItemTemplate>
</ASP:TemplateColumn>
<ASP:TemplateColumn HeaderText="Last Name">
<ItemTemplate>
<ASP:Label id=Label1 runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.lastname") %>'>
</ASP:Label>
</ItemTemplate>
<FooterTemplate>
<asp:TextBox id="TextBox2" runat="server"></ASP:TextBox>
</FooterTemplate>
<EditItemTemplate>
<asp:TextBox id="TextBox1" runat="server"></ASP:TextBox>
</EditItemTemplate>
</ASP:TemplateColumn>
<ASP:TemplateColumn HeaderText="First Name">
<ItemTemplate>
<ASP:Label id=Label2 runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.firstname") %>'>
</ASP:Label>
</ItemTemplate>
<FooterTemplate>
<asp:TextBox id="TextBox4" runat="server"></ASP:TextBox>
</FooterTemplate>
<EditItemTemplate>
<asp:TextBox id="TextBox3" runat="server"></ASP:TextBox>
</EditItemTemplate>
</ASP:TemplateColumn>
</Columns>
<PagerStyle HorizontalAlign="Center" ForeColor="#330099" BackColor="#FFFFCC"></PagerStyle>
</ASP:DataGrid>
</form>
</body>
</Html>
InsertableDataGrid.ASPx.vb
Imports System.Data
Imports System.Data.SqlClIEnt
Public Class InserTableDataGrid
Inherits System.Web.UI.Page
Protected WithEvents DataGrid1 As System.Web.UI.WebControls.DataGrid
#Region " Web Form Designer Generated Code "
'This call is required by the Web Form Designer.
<System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent()
End Sub
Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init
'CODEGEN: This method call is required by the Web Form Designer
'Do not modify it using the code editor.
InitializeComponent()
End Sub
#End Region
Dim connstr As String = "Integrated Security=SSPI;User ID=sa;Initial Catalog=NorthWind;Data Source=.\netsdk"
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
If Not Page.IsPostBack Then
BindGrid()
End If
End Sub
Sub BindGrid()
Dim cnn As New SqlConnection(connstr)
Dim da As New SqlDataAdapter("select employeeid,lastname,firstname from employees", cnn)
Dim ds As New DataSet()
da.Fill(ds, "employees")
DataGrid1.DataSource = ds
DataGrid1.DataBind()
EndSub
Private Sub DataGrid1_ItemCommand(ByVal source As Object, ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs)_
Handles DataGrid1.ItemCommand
If e.CommandName = "Insert" Then
Dim cnn As New SqlConnection(connstr)
Dim t1 As TextBox = e.Item.FindControl("textbox2")
Dim t2 As TextBox = e.Item.FindControl("textbox4")
cnn.Open()
Dim cmd As New SqlCommand("insert into employees(lastname,firstname) values('" & t1.Text & "','" & t2.Text & "')", cnn)
cmd.ExecuteNonQuery()
cnn.Close()
BindGrid()
End If
End Sub
End Class