宝哥软件园

ASP.NET 2.0中的操作数据二十二:添加删除数据的客户端确认

编辑:宝哥软件园 来源:互联网 时间:2021-11-01

介绍

在前面的教程中,我们已经看到了如何使用提供添加、修改和删除功能的应用程序框架、对象数据源和数据网络控件。我们已经实现的删除数据的接口包括一个删除按钮,当点击时,它将导致数据返回并调用ObjectDataSource的Delete()方法。然后DELETE()方法会调用对应业务逻辑层的方法,然后进入数据访问层,直到调用最终操作数据库的Delete语句。

虽然该界面使用户能够通过GridView、DetailsView或FormView控件删除记录,但当用户单击“删除”按钮时,它缺少一些提示信息。如果用户想要单击编辑按钮,但不小心单击了删除按钮,则本应更新的记录将被删除。为了避免这种事情,在本教程中,我们将添加一个窗口,当点击删除按钮时,该窗口可以在客户端显示提醒。

JavaScript的confirm(字符串)方法将在模式窗口中将传入的文本显示为字符串参数,该窗口将显示两个按钮-OK和Cancel。(见图1)1)confirm(string)方法将根据单击不同的按钮返回一个布尔值。(如果单击确定,则返回真;如果单击取消,则返回假)。

//files.jb51.net/file_images/article/201605/20160507144720121.png

图1:1:JavaScript的确认(字符串)方法显示一个模态的客户端窗口。

在提交表单的过程中,如果客户端的事件处理程序返回一个false值,表单将被取消。有了这个功能,我们可以在点击这个删除按钮时调用客户端事件处理程序中的确认(“您确定要删除这个产品吗?”) )并让它返回一个布尔值。如果用户单击取消,确认(字符串)将返回false,因此表单的提交将被取消。在不回发的前提下,点击删除按钮的产品没有被删除。相反,如果用户在确认窗口中点击确定,退货将继续,产品将被删除。有关更多信息,请参考JavaScript的confirm()方法来控制表单提交。

当添加这些有用的客户端脚本时,使用模板和使用命令字段之间会有一些细微的区别。因此,在本教程中,我们将研究FormView和GridView示例。

注意:正如本教程中所讨论的,当使用客户端验证技术时,我们假设用户的浏览器支持JavaScript,并且已经启用了JavaScript支持。如果不能满足这些假设中的任何一个,当您单击删除按钮时,它将立即返回,而不显示确认窗口。

步骤1:创建一个支持删除的新表单视图。

首先,在EditInsertDelete目录下,创建页面ConfirmationOnDelete.aspx,并添加一个FormView控件,然后将ObjectDataSource绑定到该控件,该控件将从ProductsBLL类的GetProducts()方法获取产品信息。同时,将其Delete()方法绑定到ProductsBLL类的Delete ProductID()方法。确保插入和更新标签的下拉框为(无)。最后,在窗体视图的属性窗口中勾选启用分页框。

通过这些步骤,创建了由以下语句声明的ObjectDataSource:

asp: object data source ID=' objectdata source 1 ' runat=' server ' delete method=' DeleteProduct ' oldvaluesparametertformatstring=' original _ { 0 } ' SelectMethod=' GetProducts ' Type Name=' product bll ' DeleteParameters asp3360 parameter Name=' product ID ' Type=' int 32 '/DeleteParameters/asp: object data source,因为我们在前面的示例中没有使用最优并发,所以可以删除oldvaluesparametertformatstring属性。

因为这个FormView已经绑定到一个只支持删除的ObjectDataSource控件,所以我们只需要在ItemTemplate中提供删除按钮,而不需要创建和更新按钮。在FormView的声明标签中,可以删除我们不再需要的EditItemTemplate和InsertItemTemplate。花点时间自定义项目模板,以便只显示一组产品属性。我已经定制了它,使用h3样式显示产品名称作为标题,后面是供应商和类别的名称(以及删除按钮)。

asp3360 formview ID=' FormView1 ' AllowPaging=' True ' DataKeyNames=' product ID ' DataSourceID=' objectdata source 1 ' runat=' server ' item template h3i % # Eval(' product name ')%/I/H3 category 3360 asp: label ID=' CategoryNameLabel ' runat=' server ' Text=' % # Eval(' CategoryName ')% '/asp3360 label br/supplier 3366图2显示了在浏览器中访问我们上面完成的示例的屏幕截图。

//files.jb51.net/file_images/article/201605/20160507144723122.png

图2:2:FormView控件显示一个产品。

第二步:在删除按钮的客户端onclick事件中调用confirm(string)方法。

创建FormView后,最后一步是配置删除按钮,这样当用户单击它时,就会调用JavaScript的confirm(字符串)方法。您可以使用OnClientClick属性为按钮、链接按钮和图像按钮的onclick事件添加客户端脚本。这个属性是ASP.NET 2.0新引入的。因为我们希望confirm(string)方法具有返回值,所以我们可以简单地将属性值设置为:return confirm(‘您确定要删除此产品吗?’)。

修改后,删除按钮的声明语法应该如下:3。给出了提示操作的截图。单击删除按钮激活确认窗口的显示。如果用户选择取消,退货将被取消,产品不会被删除。相反,用户选择确定,回发继续,调用ObjectDataSource的Delete()方法,最终数据库中对应的记录将被删除。

asp: link button ID=' Delete button ' runat=' server ' causes validation=' False ' command name=' Delete ' Text=' Delete ' onclient click=' return confirm('您确定要删除此产品吗?');'/asp3360 link button只需要这么多!

注意:传入confirm(string) JavaScript方法的字符串用单引号(而不是双引号)标记。在JavaScript中,标记字符串可以是单引号或双引号。我们在这里使用单引号来确保OnClientClick属性本身的双引号不受影响。

//files.jb51.net/file_images/article/201605/20160507144723123.png

图3:当点击删除按钮时,显示一个确认窗口。

步骤3:在命令字段中为删除按钮设置OnClientClick属性。

在模板中直接使用Button、LinkButton或ImageButton时,可以直接为其OnClientClick属性设置确认窗口,并返回confirm(string) JavaScript的返回值。但是,CommandField是GridView或DetailsView上的内置删除按钮,它们没有OnClientClick属性来设置声明。相反,我们必须在处理GridView或DetailsView及其相应的数据绑定事件的代码中引用这个删除按钮,然后在那里设置其OnClientClick属性。

注意:当我们在适当的数据绑定事件处理程序中设置删除按钮的OnClientClick属性时,我们已经可以访问当前绑定的数据。这意味着我们可以扩展确认信息,并包括特定记录的详细信息,例如“您确定要删除此柴产品吗?”这些定制也可以在模板的数据绑定语法中实现。

为了在命令字段中设置删除按钮的OnClientClick属性,我们向页面添加了一个GridView。将此GridView配置为使用与窗体视图相同的ObjectDataSource控件。同时,GridView的BoundFields属性仅限于包括产品名称、分类和供应商。最后,在GridView的属性窗口中勾选“启用删除”多框。这将向GridView的ColumnCollection集合中添加一列CommandField,其ShowDeleteButton属性将设置为true。

进行这些更改后,您的GridView声明标记应该如下所示:

asp3360 GridView ID=' GridView 1 ' runat=' server ' AutoGenerateColumns=' False ' DataKeyNames=' Product ID ' data sourceid=' objectdata source 1 ' Columns asp: co mmandField ShowDeleteButton=' True '/asp3360 boundfield data field=' Product name ' header text=' Product ' sort expression=' Product name '/asp3360 boundfield data field=' Category name ' header text=' Category一旦被引用,我们就可以相应地设置它的OnClientClick属性。使用以下代码为RowDataBound事件创建新的处理程序:

受保护的void GridView1 _ RowDataBound(对象发送方,GridView RowEventArgs e){ if(e . Row . RowType==DatacontrolRowType。DataRow) { //引用删除链接按钮链接按钮db=(链接按钮)e.Row.Cells[0]。控件[0];//获取绑定到Northwind行的产品的信息。产品行产品=(北风。产品行()((系统。数据行视图)。划;db。OnClientClick=字符串。格式('返回确认('您确定要删除{0}产品吗?');',产品。ProductName.Replace(' ' ',@ ' ' ');}}在代码中绑定数据和引用删除按钮时,将调用此事件处理程序。一般来说,使用以下模式:按钮类型是CommandField使用的按钮类型,可以是Button、LinkButton或ImageButton。默认情况下,命令字段使用链接按钮,但也可以通过命令字段的按钮类型属性进行自定义。CommandFieldIndex是GridView中Columns集合中CommandField的原始索引,而controlIndex是CommandField的Controls集合中delete按钮的索引。控制索引的值由命令字段中的按钮和其他按钮的相对位置决定。例如,如果CommandField中只有一个删除按钮,则其索引为0。但是,如果在删除按钮之前有一个编辑按钮,则索引值为2。因为删除按钮前面有两个控件,一个是编辑按钮,另一个是literarchy控件,用于将编辑按钮与删除按钮隔离开来。

button type obj=(button type)e . row . cells[commandfielddindex]。控件[控件索引];在我们的例子中,CommandField使用了LinkButton,在最左端,commandFieldIndex的值是0。因为除了删除按钮之外没有其他控件,所以controlIndex的值也是0。

在引用CommandField中的delete按钮后,我们可以获得GridView当前数据列的一些产品信息。最后,我们为删除按钮设置OnClientClick属性的JavaScript值,它包含产品的名称。因为我们用单引号标记了传入确认(字符串)的字符串参数,所以我们必须过滤可能出现在产品名称中的单引号。具体来说,我们可以将产品名称中包含的单引号转义成“/”。

完成这些更改后,单击GridView中的删除按钮,显示一条定制的确认消息(参见图4)。如果用户在弹出的确认窗口中单击取消,回发将被取消,从而阻止删除操作的发生。

注意:在我们的代码中,我们也可以将这种技术用于DetailsView的CommandField。但是,对于DetailsView,您需要为数据绑定事件提供一个处理程序,因为它没有行数据绑定事件。

//files.jb51.net/file_images/article/201605/20160507144723124.png

图4:单击GridView中的删除按钮,显示一个定制的确认窗口。

使用TemplateFields。

使用CommandField的一个缺点是它的Buttons必须通过索引来访问,这将导致对象被转换为相应的button类型(button、LinkButton或ImageButton)。使用“神奇的数字”和硬编码的类型会导致只有在运行时才会发现的错误。例如,如果您或其他开发人员在将来的某个时候添加了一个新按钮(如编辑按钮)或更改了CommandFields的ButtonType属性,则现有代码将会顺利编译,但当访问页面时,可能会引发异常或意外错误,这直接由您编写的代码和所做的更改决定。

另一种方法是使用模板字段,而不是GridView或DetailsView的命令字段。模板字段可以包含项目模板,并且可以在项目模板下设置链接按钮或按钮。ImageButton就像CommandField中的那个一样。此外,可以声明这些按钮的OnClientClick属性,如FormView中所示,或者我们可以使用以下模式在代码中的适当数据绑定事件处理程序中访问它,并且controlID是按钮ID的属性值。虽然这种方法仍然需要硬编码转换,但它不再需要索引,并且可以在不运行错误的情况下更改接口。

button type obj=(button type)e . row . find control(' controlID ');摘要

JavaScript confirm(sting)方法是表单提交过程中经常使用的技术。执行时,此方法将显示一个模态客户端窗口,其中有两个按钮,一个是确定,一个是取消。如果用户单击确定,确认(字符串)方法将返回真,否则将返回假。这个函数,以及在表单提交事件处理程序中返回false会导致浏览器取消表单提交的函数,可以用来在删除记录时显示确认窗口。

通过设置按钮控件的OnClientClick属性,这个confirm(string)方法可以与按钮控件的客户端的onclick事件处理程序相结合。当在模板中使用删除按钮时——无论是在窗体视图模板中,还是在DetailsView或GridView中的TemplateField中——正如我们在教程中看到的,我们可以通过显示声明或代码来访问它。

编程快乐!

作者简介

斯科特米切尔,六本关于ASP/ASP的书的作者。NET,是4GuysFromRolla.com的创始人,自1998年以来一直使用微软的网络技术。Scott是一名独立的技术顾问、培训师和作家,最近完成了一部即将由Sams出版社出版的新作,24小时内精通ASP.NET 2.0。他的联系电子邮件是[emailprotected],也可以通过他的博客http://scottonwriting.net/.联系到他

更多资讯
游戏推荐
更多+