JoshのSpace~~~~~

                                                                                                             剣は凶器、剣術は殺人術、どんな綺麗事やお題目を口にしてもそれが真実。
                                                                                                                                                                             -----緋村剣心

博客园 首页 新随笔 联系 订阅 管理

确认 AutoPostBack DropDownLists

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

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

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

遗憾的是,这并不会按期望工作,因为 AutoPostBackDropDownListonchange 属性将设置为会导致回发的 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

posted on 2006-04-17 14:45  Josh  阅读(331)  评论(0编辑  收藏  举报