20定制数据修改界面.docx
- 文档编号:3484250
- 上传时间:2022-11-23
- 格式:DOCX
- 页数:15
- 大小:2.01MB
20定制数据修改界面.docx
《20定制数据修改界面.docx》由会员分享,可在线阅读,更多相关《20定制数据修改界面.docx(15页珍藏版)》请在冰豆网上搜索。
20定制数据修改界面
摘要:
本文主要介绍如何对GridView的编辑界面进行定制,使GridView在编辑时具有DropDownList和RadioButtonList控件,提供更人性化的界面。
目录
简介
一、重载UpdateProduct方法
二、手工处理可编辑的GridView
三、在编辑界面中使用DropDownList显示Category和Supplier
四、用RadioButton表示Discontinued状态
小结
简介
GridView和DetailsView控件通过绑定列和CheckBox列,可以简化数据编辑界面制作,呈现只读,编辑和新增界面,我们不需要增加元素标记或编写任何额外代码就可以得到这些界面。
然而,绑定列和CheckBox列呈现的界面却缺乏实际应用中经常用到的定制功能。
为了对GridView和DetailsView的编辑、新增界面进行定制,需要用模板列(TemplateField)替换原有列。
在上节教程中我们讨论如何增加验证控件来定制数据编辑界面,而本节教程将演示如何使用Web控件对实际的数据集合进行定制:
将绑定列和CheckBox列中默认的TextBox、CheckBox控件替换成其他的输入控件。
为此,我们将创建一个可编辑的GridView,并允许编辑更新产品的名字、类别、提供商和废弃状态等。
而且编辑某行时,类别category和提供商supplier我们将使用DropDownList来显示,以供用户进行选择。
此外,还将CheckBox列中默认的CheckBox控件替换成RadioButtonList控件,并提供2个单选选项:
Active和Discontinued。
如图1:
图1:
在GridView的编辑界面使用DropDownList和RadioButton控件
一、重载UpdateProduct方法
本节教程我们将创建一个可编辑的GridView并允许编辑更新产品的名字、类别、提供商和废弃状态等。
因此,我们要重载UpdateProduct方法,并接受5个输入参数:
4个产品参数值加上一个产品ID。
像以前那样,本重载将:
1.根据指定的ProductID从数据库中获取产品信息;
2.更新ProductName,categoryID,supplierID和Discontinued字段;
3.通过TableAdapter的Update()方法向数据访问层DAL发出更新请求。
简单起见,这个重载方法省略了一个重要的业务逻辑――检查并确保一个将会标记为discontinued的产品不是它的提供商提供的唯一产品。
你愿意的话也可以加进来,或者做的更完善一些,将这个逻辑写到一个独立的方法中。
下面的代码是我们在ProductsBLL类中新增的UpdateProduct重载方法:
[System.ComponentModel.DataObjectMethodAttribute
(System.ComponentModel.DataObjectMethodType.Update,false)]
publicboolUpdateProduct(stringproductName,int?
categoryID,
int?
supplierID,booldiscontinued,intproductID)
{
Northwind.ProductsDataTableproducts=Adapter.GetProductByProductID(productID);
if(products.Count==0)
//nomatchingrecordfound,returnfalse
returnfalse;
Northwind.ProductsRowproduct=products[0];
product.ProductName=productName;
if(supplierID==null)product.SetSupplierIDNull();
elseproduct.SupplierID=supplierID.Value;
if(categoryID==null)product.SetCategoryIDNull();
elseproduct.CategoryID=categoryID.Value;
product.Discontinued=discontinued;
//Updatetheproductrecord
introwsAffected=Adapter.Update(product);
//Returntrueifpreciselyonerowwasupdated,otherwisefalse
returnrowsAffected==1;
}
二、手工处理可编辑的GridView
编写完UpdateProduct重载方法,下面要做的是创建可编辑的GridView:
在设计器窗口中打开EditInsertDelete文件夹中的CustomizedUI.aspx页,为其增加一个GridView控件;接着通过GridView的智能标记创建一个新的ObjectDataSource,配置这个ObjectDataSource使用ProductBLL类的GetProducts()方法来获取产品信息,并让其使用上面创建的UpdateProduct重载方法来进行产品的更新。
在新增和删除标签上,从下拉列表中选择(None)。
图2:
配置ObjectDataSource使用上面创建的UpdateProduct重载方法
像《datamodification》教程中那样,VisualStudio创建了ObjectDataSource的元素标记并指定OldValuesParameterFormatString属性为original_{0}。
由于我们编写的方法不支持传入的原始的ProductID值,所以业务逻辑层不会生效。
因此,像上节教程中那样,我们需要从元素标记中移除这些属性,或者设置这些属性。
改动后的ObjectDataSource元素标记将如下所示:
ObjectDataSourceID="ObjectDataSource1"runat="server" SelectMethod="GetProducts"TypeName="ProductsBLL" UpdateMethod="UpdateProduct"> ParameterName="productName"Type="String"/> ParameterName="categoryID"Type="Int32"/> ParameterName="supplierID"Type="Int32"/> ParameterName="discontinued"Type="Boolean"/> ParameterName="productID"Type="Int32"/> ObjectDataSource> 注意上面代码中OldValuesParameterFormatString已经被移除,并且在UpdateParameters集合中为UpdateProduct重载方法的每个入口参数提供了一个Parameter。 虽然ObjectDataSource被配置为只对产品的部分信息进行更新,而GridView却显示了所有的产品信息。 我们需要按照下面几点来调整GridView: ∙1.只包括ProductName,SupplierName,CategoryName字段的绑定列和Discontinued字段的CheckBox列。 ∙2.CategoryName和SupplierName字段在Discontinued前面显示(左边) ∙3.将CategoryName和SupplierName的标题分别改为“Category”和“Supplier” ∙4.启用编辑模式(在GridView的智能标记中选择启用编辑复选框) 这些调整之后,设计器中的页面将如图3所示: 图3: 移除GridView中无用的字段 GridView的元素标记也像下面所示: GridViewID="GridView1"runat="server"AutoGenerateColumns="False" DataKeyNames="ProductID"DataSourceID="ObjectDataSource1"> BoundFieldDataField="ProductName" HeaderText="ProductName"SortExpression="ProductName"/> BoundFieldDataField="CategoryName"HeaderText="Category" ReadOnly="True" SortExpression="CategoryName"/> BoundFieldDataField="SupplierName"HeaderText="Supplier" ReadOnly="True" SortExpression="SupplierName"/> CheckBoxFieldDataField="Discontinued" HeaderText="Discontinued"SortExpression="Discontinued"/> GridView 这时GridView的只读界面就改好了。 查看数据时,每种产品就作为GridView中的一行,并显示产品的name,category,supplier和discontinued状态。 图4: GridView调整后的只读界面 三、在编辑界面中使用DropDownList显示Category和Supplier 我们注意到ProductsRow对象包含产品的CategoryID,CategoryName,SupplierID和SupplierName属性,但是Products数据库只保存了外键,而对应的Name保存在Categories和Suppliers表中。 ProductsRow对象中的CategoryID和SupplierID可以读取和写入,而CategoryName和SupplierName属性则标记为只读。 由于CategoryName和SupplierName的只读状态,相应绑定列的ReadOnly属性也被置为true,防止编辑某行时它们的值被修改。 尽管也可以通过设置ReadOnly属性为false,使其在编辑状态将这些绑定列转为TextBox,但是这样以来当用户尝试更新产品信息时系统就会抛出异常,因为UpateProduct重载中并不接受CategoryName和SupplierName参数。 事实上,我们也不想编写这种重载方法,原因如下: ∙1.Products表没有SupplierName和CategoryName字段,而是对应的外键SupplierID和CategoryID。 因此,我们希望在更新方法中传递外键ID,而不是查找外键表中的值。 ∙2.要求用户键入supplier或者category的名字也很不合理,因为这要求用户必须知道合法的category和supplier,并且拼写正确无误。 我们打算在只读模式Supplier和category列分别显示了分类和提供商的名字,而在编辑时,通过下拉列表显示可用选项。 这样以来,用户可以快速查看有效的category和supplier并且可以很便捷直观的进行选择。 要实现这一点,需要将SupplierName和CategoryName对应的绑定列转换为模板列,在ItemTemplate模板中显示SupplierName和CategoryName,而EidtItemTemplate模板则使用DropDownList控件列出有效的cagegory和supplier。 添加Categories和Suppliers的DropDownList控件 我们要先将SupplierName和CategoryName绑定列转换为模板列: 点击GridView智能标记中的‘编辑列’链接;选择左下的BoundField;点击“将此字段转换为TemplateField”链接,转换过程将创建一个模板列,包括ItemTemplate和EditItemTemplate,最终的元素标记大致如下: TemplateFieldHeaderText="Category"SortExpression="CategoryName"> LabelID="Label1"runat="server" Text='<%#Eval("CategoryName")%>'> Label> LabelID="Label1"runat="server" Text='<%#Bind("CategoryName")%>'> Label> TemplateField> 由于绑定列标记为只读,ItemTemplate和EditItemTemplate都将用Label控件的Text属性绑定显示相关数据(如上面的CategoryName)。 因此需要修改EditItemTemplate模板,用DropDownList控件来替换原来的Label控件。 像上节教程讲的,即可在设计器中编辑模板也可直接修改模板的元素标记。 要在设计器中修改,可以通过GridView的智能标记点击“编辑模板”链接并选择Category字段的EditItemTemplate模板。 删除Label控件用DropDownList控件代替,并设置DropDownList的ID属性为Categories。 图5: 删除EditItemTemplate模板中的TextBox并增加一个DropDownList 下一步我们需要为DropDownList绑定category。 从智能标记中点击“选择数据源”链接并选择创建一个新的ObjectDataSource,命名为CategoriesDataSource。 图6: 创建一个新的ObjectDataSource控件CategoriesDataSource 为了使ObjectDataSource显示所有的category,我们将它与CategoriesBLL类的GetCategories()方法进行绑定。 图7: 将ObjectDataSource控件用GategoriesBLL的GetCategories()方法进行绑定 最后,配置DropDownList,用CategoryName字段作为显示字段而CategoryID作为Value字段。 图8: 用CategoryName作为显示字段并用CategoryID作为Value字段 改动后CategoryName的模板项将拥有一个DropDownList控件和一个ObjectDataSource,元素标记大致如下: TemplateFieldHeaderText="Category"SortExpression="CategoryName"> DropDownListID="Categories"runat="server" DataSourceID="CategoriesDataSource" DataTextField="CategoryName"DataValueField="CategoryID"> DropDownList> ObjectDataSourceID="CategoriesDataSource"runat="server" OldValuesParameterFormatString="original_{0}" SelectMethod="GetCategories"TypeName="CategoriesBLL"> ObjectDataSource> LabelID="Label1"runat="server" Text='<%#Bind("CategoryName")%>'> Label> TemplateField> 注意: EditItemTemplate模板中的DropDownList必须启用视图状态(viewstate)。 下面我们将会在DropDownList的元素标记中增加数据绑定语法和数据绑定命令例如Eval()和Bind(),它们要求启用视图状态,否则将无法显示。 重复以上步骤为SupplierName的模板列中EditItemTemplate模板添加DropDownList控件,并命名为Suppliers。 包括增加DropDownList控件和创建另一个ObjectDataSource,注意新的ObjectDataSource调用的是SuppliersBLL类的GetSuppliers()方法。 另外,配置Suppliers下拉框的显示字段为CompanyName,value字段为SupplierID。 两个下拉框都增加完成后,在浏览器中查看页面并点击“ChefAnton’sCajunSeasoning”产品的编辑按钮。 如图9所示,产品的category和supplier列都变成了下拉框并包含了对应的category和supplier选项集。 但是,你会发现下拉框中默认选择的是下拉框的第一项(category是Beverages,supplier是ExoticLiquids),事实上它们分别应该是Condiment和NewOrleansCajunDelights。 图9: 下拉列表默认选中的是第一项 此外,如果点击更新,你会发现该产品的CategoryID和SupplierID都变成了NULL。 这些都是由于EditItemTemplate模板中的下拉框没有根据数据库中的实际数据进行绑定。 为DropDownList绑定CategoryID和SupplierID数据 为了使product编辑状态下的category和supplier下拉列表选中实际数据,并使其可以根据用户选择调用BLL的UpdateProduct方法对数据库进行更新,我们需要对两个下拉框的SelectedValue分别绑定到CategoryID和SupplierID。 例如对于Categories下拉框,我们直接在元素标记中增加SelectedValue='<%#Bind("CategoryID")%>'。 另一种做法是在设计器中,通过下拉框的智能标记,点击“编辑DataBinding”链接,设置编辑模板中的下拉框的数据绑定。 接下来,用双重模式指定SelectedValue绑定到CategoryID字段(见图10)。 重复上面的方法之一,为Suppliers下拉框绑定SupplierID数据。 图10: 给DropDownList的SelectedValue属性绑定CategoryID值 一旦完成两个下拉框SelectedValue属性的数据绑定,产品的category和supplier就会默认选中实际选项了。 在点击Update按钮时,下拉框中的选择也会准确传递给UpdateProduct方法。 图11显示了增加数据绑定后的代码;注意如何选中下拉列表中的项: ChefAnton’sCajunSeasoning产品的分类和提供商分别选中了正确的Condiment和NewOrleansCajunDelights选项。 图11: 修改后Categroy和Supplier正确选中了Product的实际数据 处理NULL值 Product表中的CategoryID和SupplierID列允许为NULL,而编辑模板中的下拉列表却没有NULL这一项。 所以目前存在下面两种问题: ∙1.用户无法则现在的界面中将某个product非空的category或supplier设置为NULL ∙2.如果产品的CategoryID或SupplierID为NULL,在点击Edit按钮时程序会抛出异常。 这是因为Bind()表达式中CategoryID(或SupplierID)返回NULL值时,SelectedValue无法找到NULL这一列表项因而抛出异常。 为了支持CategoryID和SupplierID的NULL值,需要为两个DropDownList增加一个NULL值选项。 在《Master/DetailFilteringWithaDropDownList》教程中,我们演示了为绑定的DropDownList增加列表项,方法是将DropDownList的AppendDataBoundItems属性设置为true并手动增加一个值为-1的列表项。 在ASP.NET的数据绑定逻辑中,空字符串将自动转换为NULL,NULL值也可以转为空字符串。 因此,本节教程我们将增加一个值为空字符串的列表项。 先将这两个DropDownList的AppendDataBoundItems属性设置为true。 接着,用 ListItem>元素来增加一个NULL列表项,元素标记大致如下: DropDownListID="Categories"runat="server"DataSourceID="CategoriesDataSource"DataTextField="CategoryName"DataValueField="CategoryID"SelectedValue='<%#Bind("CategoryID")%>'AppendDataBoundItems="Tr
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 20 定制 数据 修改 界面