确认 AutoPostBack DropDownLists
尽管通常在单击按钮时使用确认对话框,但是还可以在更改下拉列表时使用它们。例如,您可能具有一个当特定的 DropDownList Web 控件发生更改时会自动回发的网页。(DropDownList Web 控件具有一个 AutoPostBack 属性,如果设置为 True,只要 DropDownList 的选定项目发生更改就会导致窗体回发。)
直观地讲,您可能认为对 DropDownList 添加确认对话框与对 Button Web 控件添加这种对话框相同。也就是说,简单地将 DropDownList 的客户端 onchange 属性更改为如下内容:return confirm(...);。使用:
DropDownListID.Attributes("onchange") = "return confirm(...);"
遗憾的是,这并不会按期望工作,因为 AutoPostBackDropDownList 的 onchange 属性将设置为会导致回发的 JavaScript,即对客户端 __doPostBack 函数的调用。当您自己借助编程方式设置 onchange 属性时,最后的结果是呈现的客户端 onchange 事件处理程序同时具有您的代码和对 __doPostBack 的调用:
<select onchange="return confirm(...);__doPostBack(...);"> ... </select>
记住,我们确实希望发生的情况是,如果确认返回 true,就调用 __doPostBack 函数,因为之后页面将会被回发。通过利用 Attributes 集合将 onchange 事件设置为:if (confirm(...)),我们可以完成这一操作,而该代码会生成以下标记,该标记正是我们所希望的:
<select onchange="if (confirm(...)) __doPostBack(...);"> ... </select>
乍看起来,这似乎会具有所期望的效果。如果用户从下拉列表中选择不同的项目,将会出现一个确认框。如果用户单击“OK”,该窗体将回发;如果用户单击“Cancel”,该窗体回发会暂停。尽管问题在于下拉列表维持用户选定的项目以启动下拉列表的 onchange 事件。例如,设想下拉列表加载正在进行选择的项目 x,然后用户选择项目 y。这将会触发下拉列表客户端 onchange 事件,它将会显示确认对话框。现在,设想用户点击“Cancel”- 下拉列表将仍然选择项目 y。我们希望的是将选择转回到项目 x。
要实现此目的,我们需要做两件事情:
1. |
编写一个“记住”选定下拉列表项目的 JavaScript 函数。 |
2. |
在下拉列表的客户端 onchange 事件中,如果用户单击“Cancel”,您需要将下拉列表转换回“已记住的”值。 |
步骤 1 必须为下拉列表和函数(当页面加载时运行,并且记录下拉列表的值)创建全局脚本变量。步骤 2 要求为下拉列表的客户端 onchange 属性更改为如下所示内容:
if (!confirm(...)) resetDDLIndex(); else __doPostBack();
其中 resetDDLIndex 是 JavaScript 函数,它将下拉列表选定的值返回到“已记住的”值。用于此目的的客户端脚本应该如下所示:
<select id="ddlID" onchange="if (!confirm(...)) resetDDLIndex(); else __doPostBack(...);"> ... </select> <script language="JavaScript"> var savedDDLID = document.getElementById("ddlID").value; function resetDDLIndex() { document.getElementById("ddlID").value = savedDDLID; } </script>
通过在 ClientSidePage 类中创建 helper 方法,这个必要的脚本可以轻松地生成。
Public Sub ConfirmOnChange(ByVal ddl As DropDownList, ByVal message As String) 'Register the script block If Not IsStartupScriptRegistered("CSP-ddl-onchange") Then RegisterStartupScript("CSP-ddl-onchange", _ "<script language=""JavaScript"">" & _ "var CSP_savedDDLID = " & _ document.getElementById('" & _ ddl.ClientID & "').value;" & vbCrLf & _ "function resetDDLIndex() {" & vbCrLf & _ " document.getElementById('" & " & _ " ddl.ClientID & "').value = CSP_savedDDLID;" & vbCrLf & _ "}" & vbCrLf & _ "</script>") End If ddl.Attributes("onchange") = _ "if (!confirm('" & message.Replace("'", "\'") & _ "')) resetDDLIndex(); else " End Sub
要使用这段代码,简单地调用网页上每个 AutoPostBackDropDownList 的该方法,当网页上的选定项目发生更改时要在该网页上显示对话框。
原文:http://www.microsoft.com/china/msdn/library/webservices/asp.net/WorkwithClientSideScript.mspx?mfr=true