二十二为删除数据添加客户端确认

在ASP.NET2.0中操作数据之二十二：为删除数据添加客户端确认作者：heker2007字体：[增加减小]类型：转载时间：2016-05-07我要评论本文主要介绍ASP.NET2.0中利用JavaScript在删除按钮的客户端onclick事件（在ASP.NET中是OnClientClick）中调用confirm(string)方法，从而显示一个确认窗口，根据窗口的返回值执行不同的操作。导言在前面一些教程中，我们已经看到如何使用应用程序框架，ObjectDataSource，以及那些提供增、改、删功能的数据Web控件。在我们已经实现的删除数据的界面中，包含一个删除按钮，当点击它的时候，会导致数据回传以及调用ObjectDataSource的Delete()方法。然后Delete()方法会调用对应业务逻辑层中的方法，再进入数据访问层，直至调用最终操作数据库的DELETE语句。虽然这个界面已经能够让用户通过GridView，DetailsView，或者FormView控件来删除记录，但是在用户点击删除按钮的时候，它缺少一些提示信息。如果用户本想点击编辑按钮，但是不小心点击了删除按钮，那么原本会更新的记录将会被删除。为了避免此类事情发生，在这篇教程里面，我们将为点击删除按钮的时候，添加一个能在客户端显示提醒的窗口。JavaScript的confirm(string)方法将在一个模式窗口中显示那些作为string参数传进来的文本，这个窗口将会显示两个按钮－确定(OK)和取消(Cancel)。（见图1）confirm(string)方法将根据点击不同的按钮来返回一个布尔类型值。（返回true，如果点击了确定(OK)，返回false如果点击了取消(Cancel)）图1：JavaScript的confirm(string)方法显示一个模式的，客户端的窗口在一个表单的提交过程中，如果从客户端的事件处理器返回一个false值，那么这个表单将取消提交。使用这种特性，我们可以在这个删除按钮的客户端事件处理器onClick中，调用confirm(“你确定要删除这个产品吗？”)，让它返回一个布尔值。如果用户点击了取消，confirm(string)将返回false，因此会取消表单的提交。在没有回传的前提下，这个已经点击了删除按钮的产品并没有被删除。相反，如果在确认窗口中用户点击了确定，回传将会继续而且这个产品将会被删除。参考使用JavaScript的confirm()方法控制表单提交来获取这方面的更多信息。在添加这些有用的客户端脚本时候，使用模版和使用一个CommandField相比，将会有一些细微的差别。因此，在这篇教程中，我们将同时考察FormView和GridView的例子。注意：正如这篇教程中讨论到的，使用客户端确认技术时候，我们假设用户的浏览器支持JavaScript并且已经启用了JavaScript支持。如果这其中的任何一个假设不能满足，那么点击删除按钮的时候将会立即进行回传而不会显示一个确认窗口。第一步：新建一个支持删除的FormView首先在EditInsertDelete目录下面，创建ConfirmationOnDelete.aspx页面，并添加一个FormView控件，然后给这个控件绑定一个ObjectDataSource，这个数据源控件将从ProductsBLL类的GetProducts()方法获取产品信息。同时给它的Delete()方法绑定指向ProductsBLL类的DeleteProduct(productID)方法。确保INSERT和UPDATE标签的下拉框中为（None）。最后，在FormView的属性窗口中勾上EnablePaging多选框。通过这些步骤，创建了一个以下语句声明的ObjectDataSource：?1234567asp:ObjectDataSourceID=ObjectDataSource1runat=serverDeleteMethod=DeleteProductOldValuesParameterFormatString=original_{0}SelectMethod=GetProductsTypeName=ProductsBLLDeleteParametersasp:ParameterName=productIDType=Int32//DeleteParameters/asp:ObjectDataSource因为在我们前面的例子中没有使用到optimisticconcurrency，可以把OldValuesParameterFormatString属性删掉。因为这个FormView已经被绑定到一个仅仅支持删除的ObjectDataSource控件，在ItemTemplate中我们只要提供删除按钮，而不需要新建和更新按钮。而在FormView的声明标记中，可以删掉我们不再需要的EditItemTemplate以及InsertItemTemplate。稍微花点时间定制一下ItemTemplate以便只显示一组产品属性。我已经定制好了，用h3样式显示产品的名字作为标题，接下来是供应商和分类的名字（以及删除按钮）。?12345678asp:FormViewID=FormView1AllowPaging=TrueDataKeyNames=ProductIDDataSourceID=ObjectDataSource1runat=serverItemTemplateh3i%#Eval(ProductName)%/i/h3bCategory:/basp:LabelID=CategoryNameLabelrunat=serverText='%#Eval(CategoryName)%'/asp:Labelbr/bSupplier:/basp:LabelID=SupplierNameLabelrunat=serverText='%#Eval(SupplierName)%'91011121314151617/asp:Labelbr/asp:LinkButtonID=DeleteButtonrunat=serverCausesValidation=FalseCommandName=DeleteText=Delete/asp:LinkButton/ItemTemplate/asp:FormView做了这些变化之后，我们已经有了一个功能完善的页面，可以允许用户显示每个产品，以及通过简单地点击按钮来删除某个产品。图2显示了在浏览器中访问我们上面所完成的例子的截图。图2：FormView控件显示一个产品第二步：在删除按钮的客户端onclick事件中调用confirm(string)方法在创建FormView之后，最后的步骤是配置这个删除按钮，使得用户点击它的时候，JavaScript的confirm(string)方法会被调用。可以通过使用OnClientClick这个属性来为Button，LinkButton，ImageButton的客户端onclick事件添加客户端脚本，这个属性是ASP.NET2.0新引入的。因为我们想让confirm(string)方法有返回值，可以简单地设置属性值为：returnconfirm(‘你确定要删除这个产品吗？')。修改之后这个删除按钮的声明语法应该如下所述：3给出了这个提示操作的截图。点击这个删除按钮激活确认窗口的显示。如果用户选择取消，回传将被取消，产品也不会被删除。相反，用户选择确定，回传继续，ObjectDataSource的Delete()方法被调用，最后数据库中相应的记录也会被删除。?1234asp:LinkButtonID=DeleteButtonrunat=serverCausesValidation=FalseCommandName=DeleteText=DeleteOnClientClick=returnconfirm('Areyoucertainyouwanttodeletethisproduct?');/asp:LinkButton仅仅只需要这么多！注意：传入confirm(string)JavaScript方法的字符串用单引号进行标记（而不是双引号）。在JavaScript中，标记字符串可以是单引号也可以是双引号。我们这里使用单引号是为了确保不影响OnClientClick这个属性本身的双引号标记。图3：当点击删除按钮时候显示一个确认窗口第三步：在一个CommandField中为删除按钮设置OnClientClick属性在模板中直接使用Button，LinkButton，或者ImageButton的时候，可以直接为它的OnClientClick属性设置确认窗口并返回confirm(string)JavaScript的返回值。然而，CommandField是在GridView或者DetailsView上内置的一些删除按钮，而且它们本身不具有OnClientClick属性可以设置声明。相反，我们必须要在处理GridView或者DetailsView，它们适当的DataBound事件的代码中，引用这个删除按钮，然后在那里设置它的OnClientClick属性。注意：当我们在适当的DataBound事件处理器中设置删除按钮的OnClientClick属性时候，我们已经有权限访问当前绑定的数据。这意味着我们可以扩展确认信息，并包含具体记录的详细信息，比如，“你确定要删除这个Chai产品吗?“这些定制也可以在模板的数据绑定的语法中实现。为了实践在一个CommandField中设置删除按钮的OnClientClick属性，我们在页面上添加一个GridView。配置这个GridView使用FormView一样的ObjectDataSource控件。同时，限制GridView的BoundFields属性只包括产品名称，分类和供应商。最后，在GridView的属性窗口中勾上EnableDeleting的多选框。这样会在GridView的ColumnCollection的集合中添加一列CommandField，并且它的ShowDeleteButton属性会设置成true。做了这些改变后，你的GridView的声明标记应该如下所示：?123456789101112asp:GridViewID=GridView1runat=serverAutoGenerateColumns=FalseDataKeyNames=ProductIDDataSourceID=ObjectDataSource1Columnsasp:CommandFieldShowDeleteButton=True/asp:BoundFieldDataField=ProductNameHeaderText=ProductSortExpression=ProductName/asp:BoundFieldDataField=CategoryNameHeaderText=CategoryReadOnly=TrueSortExpression=CategoryName/asp:BoundFieldDataField=SupplierNameHeaderText=SupplierReadOnly=TrueSortExpression=SupplierName//Columns/asp:GridView这个CommandField包含一个删除LinkButton实例，并且可以在GridView的RowDataBound事件处理器中被访问。一旦被引用，我们就可以相应地设置它的OnClientClick属性。通过下面的代码来新建一个RowDataBound事件的处理器：?123456789101112protectedvoidGridView1_RowDataBound(obj