您现在的位置是:网站首页> 编程资料编程资料

在ASP.NET 2.0中操作数据之六十四:GridView批量添加数据_自学过程_

2023-05-24 246人已围观

简介 在ASP.NET 2.0中操作数据之六十四:GridView批量添加数据_自学过程_

导言:

  在前面的第62章《GridView批量更新数据》里,我们用GridView控件里定制了一个批编辑界面,同样的我们也可以定制一个批添加界面.假设有这种情况,我们接受一批从Tokyo(东京)发过来的货物:6种不同的tea 和 coffee,如果用户在一个DetailsView控件里一次输入一个产品,他将会重复的输入很多相同的值,比如相同的种类(Beverages),相同的供应商(Tokyo Traders),相同的discontinued值(False),以及相同的order值(0).重复性的输入这些相同的值不仅累,还很容易出错.只需额外多做一些工作,我们就可以创建一个批添加界面。用户只需一次行的选择supplier 和category,输入一系列产品的names 和unit prices,再点击一个按钮就可以将这些新产品添加进数据库(如图1所示).这些添加的产品的ProductName 和UnitPrice数据由界面上方的2个DropDownList控件指定,Discontinued 和UnitsOnOrder的值由“硬编辑”指定,分别为false和0.

//img.jbzj.com/file_images/article/201605/2016051811030752.png
图1:批添加界面


本教程,我们将创建一个如图1所示的批添加界面。在前面2章的基础上我们将把添加过程用事务封装以保证原子操作.让我们开始吧!

第一步:创建一个展示界面

  我们将创建一个包含2个区域的单一页面:展示区域和添加区域.我们在这一步创建的是展示区域,它包含一个用于展示产品的GridView控件以及一个标题为“Process Product Shipment”的button按钮.当点击该按钮时,展示界面将替换为一个如图1所示的添加界面.如果点“Add Products from Shipment” 或 “Cancel”按钮时又会返回展示页面.添加界面将在第二步完成.

  这个包含2个界面的页面每次只能让一个界面可见。我们将用2个Panel Web控件作为容器包含这2个界面——一个Panel Web控件包含一个界面.

  首先打开BatchData文件夹里的BatchInsert.aspx页面,在设计器模式里从工具箱里拖一个Panel控件到页面(如图2所示),设置其ID为DisplayInterface.当将Panel控件拖到页面时其Height 和 Width属性分别为50px 和 125px.在属性窗口里清除这些属性.

//img.jbzj.com/file_images/article/201605/2016051811030753.png
图2:从工具箱里拖一个Panel控件到页面

  然后拖一个Button 和 GridView控件到Panel控件里。设Button的ID为ProcessShipment ,Text属性为“Process Product Shipment”.  设GridView的ID为ProductsGrid,从其智能标签里将其绑定到一个名为ProductsDataSource的ObjectDataSource.设置该ObjectDataSource调用ProductsBLL class类的GetProducts方法.由于该GridView控件只用来展示数据,从UPDATE, INSERT, DELETE标签里选“(None)”. 点Finish完成设置

//img.jbzj.com/file_images/article/201605/2016051811030754.png
图3:调用ProductsBLL Class类的GetProducts方法来显示数据

//img.jbzj.com/file_images/article/201605/2016051811030755.png
图4:在UPDATE, INSERT, DELETE标签里选“(None)”

  完成ObjectDataSource设置后,Visual Studio会自动地添加一些BoundFields以及一个CheckBoxField。只保留ProductName, CategoryName, SupplierName, UnitPrice, 以及Discontinued这几列.你可以再做一些外观的改进.我将UnitPrice列定制为货币值,重新对列进行了排序,再对一些列的HeaderText值进行了修改.再在GridView的智能标签里启用了“分页”和“排序”功能.完成上述工作后,页面的声明代码看起来应该和下面的差不多:

  我们注意到Button 和 GridView控件的声明代码出现在标签内部,因为这些控件置于名为DisplayInterface的Panel控件里面,我们可以将Panel控件的Visible 属性设置为false来隐藏这些控件.我们将在第三步看到,当点击一个按钮时,通过编程的方式改变Panel控件的Visible属性以显示添加界面.

  花点时间在浏览器里登录该页面.如图5所示,你将看到一个显示为“Process Product Shipment”的button按钮,其下的GridView控件每次列出10个产品.

//img.jbzj.com/file_images/article/201605/2016051811030856.png
图5:GridView列出了产品并启用排序和分页功能

第二步:创建添加界面

  创建完展示界面后,我们将创建添加界面。在本教程,我们的添加界面允许用户同时添加5个产品,且这5个产品的category 和 supplier是一样的,而names 和 nit price值不同.在ID为DisplayInterface的Panel控件下面,从工具箱里拖一个Panel控件到页面,设置其ID为InsertingInterface,Visible属性为false,并清除其Height 和 Width属性值。我们将在第三步添加代码将其Visible属性改为true.

  接下来我们将创建如图1所示的添加界面。该界面本来可以通过一些HTML技术来创建的,不过在这里我们将使用一个很简单的4列7行的table表.

  注意:虽然在设计器模式里可以使用工具箱的工具来添加

elements元素,不过那样会自动添加一些我们不需要的style属性设置.因此,我更偏向于在源视图模式里添加HTML
elements元素. 当写好类
声明代码后,我喜欢立即切换到设计器模式,再添加Web控件并设置其属性。当心中有数,已经想好了要创建几行几列的时候,我倾向于使用静态HTML(static HTML)而不是Table Web控件,原因是如果使用Table Web控件的话,我们必须通过FindControl("controlID")的方式来访问放置在里面的的Web控件.不过话又说回来,如果是要创建一个动态变化的表(dynamically-sized tables)的话——比如该表的行和列都绑定到数据库或者基于用户自定义的标准格式,我还是要使用Table Web控件,原因很简单,我们可以通过编程来创建该Table Web控件.

在ID为InsertingInterface的Panel控件的标签里输入如下的声明代码:

Supplier:Category:
Product:Price:
Product:Price:
Product:Price:
Product:Price:
Product:Price:

  该

声明代码里暂时还未包含任何的Web控件。我们注意到每一个 element元素都有明确的CSS class设置:放置名为supplier 和category的DropDownLists控件的“头顶行”对应的是BatchInsertHeaderRow;放置“Add Products from Shipment” 和“Cancel”按钮的“底部行”对应的是BatchInsertFooterRow;那些包含product和unit price的TextBox控件的行交替的运用BatchInsertRow和BatchInsertAlternatingRow.我已经在Styles.css文件里创建里相应的CSS classes,代码如下:

 /*** Styles for ~/BatchData/BatchInsert.aspx tutorial ***/ .BatchInsertLabel { font-weight: bold; text-align: right; } .BatchInsertHeaderRow td { color: White; background-color: #900; padding: 11px; } .BatchInsertFooterRow td { text-align: center; padding-top: 5px; } .BatchInsertRow { } .BatchInsertAlternatingRow { background-color: #fcc; } 

输入这些代码后,切换到设计视图,该

看起来是一个4列7行的表,如图6所示:

//img.jbzj.com/file_images/article/201605/2016051811030857.png
图6:添加界面为一个4列7行的表

  现在我们在添加界面里添加Web控件.从工具箱拖2个DropDownList到表的相应方格里——一个用来显示supplier另一个用来显示category.

  将用来显示supplier的那个DropDownList的ID设为Suppliers,并将其绑定到一个名为SuppliersDataSource的ObjectDataSource.设置该ObjectDataSource调用SuppliersBLL class类的GetSuppliers方法.并在UPDATE标签里选“(None)”,点击Finish完成设置向导.

//img.jbzj.com/file_images/article/201605/2016051811030858.png
图7:设置ObjectDataSource调用SuppliersBLL Class类的GetSuppliers方法

设置该DropDownList显示CompanyName列,而传递的值为SupplierID列.

//img.jbzj.com/file_images/article/201605/2016051811030859.png
图8:显示CompanyName列,传递的是SupplierID列的值

  将第2个DropDownList的ID设为Categories,并将其绑定到一个名为CategoriesDataSource的ObjectDataSource.该ObjectDataSource调用CategoriesBLL class类的GetCategories方法. 在UPDATE标签里选“(None)”,再点Finish完成设置. 最后设置该DropDownList控件显示CategoryName列,传递CategoryID列的值.

当添加这2个DropDownList控件并绑定到相应的ObjectDataSources后,你的屏幕看起来应该和图9差不多:

//img.jbzj.com/file_images/article/201605/2016051811030860.png
图9:“头部行”包含显示Suppliers和Categories的DropDownList控件

  我们现在需要创建收集每个产品的name和price信息的TextBox控件。在下面的每行对应的name和price方格里各拖放一个TextBox控件. 分别设置它们的ID为ProductName1, UnitPrice1,ProductName2, UnitPrice2,依次类推.

  对每个price TextBoxes添加一个CompareValidator控件,设置其ControlToValidate属性为相应控件的ID值.同时将Operator属性设置为GreaterThanEqual,ValueToCompare 属性设置为“0”, Type属性设置为Currency.这样一来可以保证输入的价格为有效的大于或等于0的货币值.同时将Text属性设置为“*”;ErrorMessage属性为“The price must be greater than or equal to zero. Also, please omit any currency symbols.”。

  注意:我们并没有在添加界面里包含任何的RequiredFieldValidator控件,即便是数据库表Products的ProductName不允许为NULL值.举个例子,如果用户只想在前3行输入产品的name和unit price,而最后2行为空,我们就仅仅向数据库添加了3个产品。由于ProductName是必需的,当输入了name值后,我们只需要通过编程检查用户是否输入了该产品的unit price值.我们将在第四步进行该检查.

  当用户输入了数据,但如果输入值包含货币符号的话,CompareValidator控件将报告无效数据.在每个unit price TextBoxe控件前添加一个“$”符合,提示用户输入数据的时候忽略货币符号.

  最后,在InsertingInterface Panel控件里添加一个ValidationSummary控件,设置其ShowMessageBox属性为true,ShowSummary属性为false.有了这些设置后,当用户输入一个无效的unit price值后,在TextBox控件旁边将会出现一个星号,且ValidationSummary控件将显示一个客户端的消息框,显示相应的错误消息.

  此时,你的屏幕看起来和图10差不多.

//img.jbzj.com/file_images/article/201605/2016051811030861.png
图10:添加界面现在包含显示产品的Names和Prices的TextBox控件

  接下来我们要在底部行添加“Add Products from Shipment” 和 “Cancel”按钮.从工具箱拖2个Button控件到界面的底部,分别设置其ID为AddProducts和CancelButton;同时分别设其Text属性为“Add Products from Shipment”和“Cancel”.此外,将 CancelButton按钮的CausesValidation属性设置为false.

  最后,我们需要添加一个Label Web控件来显示有关这2个界面的状态信息.比如:当用户成功地添加了一批产品时我们希望切换到展示界面并显示确认消息.当然,如果用户输入产品信息时只提供了price而没有提供name信息,我们就需要显示一个警告信息