在DataGrid快速添加新行

2024-07-21 02:23:08

字體：大中小

供稿：網(wǎng)友

asp.net datagrid為我們提供的內(nèi)建的記錄行編輯功能，但是沒有提供內(nèi)建的添加新行的功能。一個辦法就是：在datatable中添加新行，然后再重新綁定到datagrid，這個辦法可行，但在更新前需要進行確認，可能會產(chǎn)生空行。另外一個解決辦法就是：利用datagrid footer template來提供一個空的行，這樣既可以提高速度，也可以避免其它方法帶來的不足。

為了為瀏覽者提供一個空行，我們使用datagrid的footer template，我們直接在footer template里添加文本框，這樣可以避免不必要的操作：比如點擊“編輯”按鈕等。這樣也可以減少往復(fù)數(shù)據(jù)提交的次數(shù)。我們這里仍然linkbutton（插入），并設(shè)置commandname屬性為“insert”，這個commandname在datagrid的itemcommand事件中，確保只有用戶點擊了“insert”linkbutton才添加記錄。添加到數(shù)據(jù)庫的方法是很簡單的。

下面的這個例子提供了datagrid快速添加新行的功能。aspx代碼和cohe behind代碼分別如下，注意更改數(shù)據(jù)錄連接字符串：

查看例子

insertabledatagrid.aspx

<%@ page language="vb" autoeventwireup="false" codebehind="insertabledatagrid.aspx.vb" inherits="aspxweb.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="javascript">
<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" borderstyle="none"
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()
end sub
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

代碼很容易理解，但要聲明的是，這是參考孔子的vb版改寫的，只是因為有的朋友說用c#不好寫。
我才寫一個供大家參考。在此，謝謝孔子了。

appe_admin.aspx

<%@ page language="c#" codebehind="appe_admin.aspx.cs" autoeventwireup="false" inherits="bzh_home.appe_admin" %>
<!doctype html public "-//w3c//dtd html 4.0 transitional//en" >
<html>
<head>
<title>appe_admin</title>
<meta name="generator" content="microsoft visual studio .net 7.1">
<meta name="code_language" content="c#">
<meta name="vs_defaultclientscript" content="javascript">
<meta name="vs_targetschema" content="http://schemas.microsoft.com/intellisense/ie5">
</head>
<body ms_positioning="gridlayout">
<form id="form1" method="post" runat="server">
<font face="宋體"></font>
<asp:datagrid id="datagrid1" runat="server" autogeneratecolumns="false" showfooter="true" onitemcommand="itemsgrid_command"
cellpadding="4" backcolor="white" borderwidth="1px" borderstyle="none" bordercolor="#cc9966">
<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.編號") %>'>
</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.編號") %>'>
</asp:textbox>
</edititemtemplate>
</asp:templatecolumn>
<asp:templatecolumn headertext="last name">
<itemtemplate>
<asp:label id=label1 runat="server" text='<%# databinder.eval(container, "dataitem.用戶名") %>'>
</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.密碼") %>'>
</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>

appe_admin.aspx.cs

using system;
using system.collections;
using system.componentmodel;
using system.data;
using system.data.sqlclient;
using system.drawing;
using system.web;
using system.web.sessionstate;
using system.web.ui;
using system.web.ui.webcontrols;
using system.web.ui.htmlcontrols;

namespace bzh_home
{
/// <summary>
/// appe_admin 的摘要說明。
/// </summary>
public class appe_admin : system.web.ui.page
{
protected system.web.ui.webcontrols.datagrid datagrid1;

string connstr = "user id=sa;data source=/"xidongs//datamanage/";initial catalog=bzh_data";

private void page_load(object sender, system.eventargs e)
{
// 在此處放置用戶代碼以初始化頁面
if(!page.ispostback){
bindgrid();
}

}

private void bindgrid(){
sqlconnection cnn = new sqlconnection(connstr);
sqldataadapter da = new sqldataadapter("select * from admin", cnn);
dataset ds = new dataset();
da.fill(ds,"admin");

this.datagrid1.datasource = ds;
this.datagrid1.databind();

}

public void itemsgrid_command(object sender, datagridcommandeventargs e)
{

if(e.commandname == "insert")
{
//this.page.response.write("ss");

sqlconnection cnn = new sqlconnection(connstr);

textbox t1 = (textbox)e.item.findcontrol("textbox2");
textbox t2 = (textbox)e.item.findcontrol("textbox4");
cnn.open();
sqlcommand cmd = new sqlcommand("insert into admin(用戶名,密碼) values('" + t1.text + "','" + t2.text + "')", cnn);
cmd.executenonquery();
cnn.close();
bindgrid();

}

}

#region web 窗體設(shè)計器生成的代碼
override protected void oninit(eventargs e)
{
//
// codegen: 該調(diào)用是 asp.net web 窗體設(shè)計器所必需的。
//
initializecomponent();
base.oninit(e);
}

/// <summary>
/// 設(shè)計器支持所需的方法 - 不要使用代碼編輯器修改
/// 此方法的內(nèi)容。
/// </summary>
private void initializecomponent()
{
this.load += new system.eventhandler(this.page_load);

}
#endregion
}
}

上一篇：利用RowFilter屬性，將一個DataSet綁定到兩個DataGrid

下一篇：顯示和隱藏DataGrid中的列