随笔档案

尽管通常在单击按钮时使用确认对话框，但是还可以在更改下拉列表时使用它们。例如，您可能具有一个当特定的 DropDownList Web 控件发生更改时会自动回发的网页。（DropDownList Web 控件具有一个 AutoPostBack 属性，如果设置为 True，只要 DropDownList 的选定项目发生更改就会导致窗体回发。）

直观地讲，您可能认为对 DropDownList 添加确认对话框与对 Button Web 控件添加这种对话框相同。也就是说，简单地将 DropDownList 的客户端 onchange 属性更改为如下内容：return confirm(...);。使用：

DropDownListID.Attributes("onchange") = "return confirm(...);"

遗憾的是，这并不会按期望工作，因为 AutoPostBack DropDownList 的 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

要使用这段代码，简单地调用网页上每个 AutoPostBack DropDownList 的该方法，当网页上的选定项目发生更改时要在该网页上显示对话框。