在DataGrid快速添加新行

2024-07-21 02:23:08

字体：大中小

来源：转载

供稿：网友

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="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 窗体设计器生成的代码
override protected void oninit(eventargs e)
{
//
// codegen: 该调用是 asp.net web 窗体设计器所必需的。
//
initializecomponent();
base.oninit(e);
}

/// <summary>
/// 设计器支持所需的方法 - 不要使用代码编辑器修改
/// 此方法的内容。
/// </summary>
private void initializecomponent()
{
this.load += new system.eventhandler(this.page_load);

}
#endregion
}
}

上一篇：利用RowFilter属性，将一个DataSet绑定到两个DataGrid

下一篇：显示和隐藏DataGrid中的列