当前位置:首页 > GridView 中 DropDownList 弹出确认对话框

GridView 中 DropDownList 弹出确认对话框

点击次数:1233  更新日期:2010-12-30
\n

在GridView的模板列中添加DropDownList,希望在触发事件前弹出确认框。


\n

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


\n

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


\n

DropDownListID.Attributes(“onchange”) = “return confirm(…);”


\n

遗憾的是,这并不会按期望工作,因为 AutoPostBack DropDownList 的 onchange 属性将设置为会导致回发的 JavaScript,即对客户端 __doPostBack 函数的调用。当您自己借助编程方式设置 onchange 属性时,最后的结果是呈现的客户端 onchange 事件处理程序同时具有您的代码和对 __doPostBack 的调用:


\n

<select onchange=”return confirm(…);__doPostBack(…);”>

</select>


\n

记住,我们确实希望发生的情况是,如果确认返回 true,就调用 __doPostBack 函数,因为之后页面将会被回发。通过利用 Attributes 集合将 onchange 事件设置为:if (confirm(…)),我们可以完成这一操作,而该代码会生成以下标记,该标记正是我们所希望的:


\n

<select onchange=”if (confirm(…)) __doPostBack(…);”>

</select>


\n

乍看起来,这似乎会具有所期望的效果。如果用户从下拉列表中选择不同的项目,将会出现一个确认框。如果用户单击“OK”,该窗体将回发;如果用户单击“Cancel”,该窗体回发会暂停。尽管问题在于下拉列表维持用户选定的项目以启动下拉列表的 onchange 事件。例如,设想下拉列表加载正在进行选择的项目 x,然后用户选择项目 y。这将会触发下拉列表客户端 onchange 事件,它将会显示确认对话框。现在,设想用户点击“Cancel”- 下拉列表将仍然选择项目 y。我们希望的是将选择转回到项目 x。


\n

要实现此目的,我们需要做两件事情:


\n

编写一个“记住”选定下拉列表项目的 JavaScript 函数。


\n

在下拉列表的客户端 onchange 事件中,如果用户单击“Cancel”,您需要将下拉列表转换回“已记住的”值。


\n

步骤 1 必须为下拉列表和函数(当页面加载时运行,并且记录下拉列表的值)创建全局脚本变量。步骤 2 要求为下拉列表的客户端 onchange 属性更改为如下所示内容:


\n

if (!confirm(…)) resetDDLIndex(); else __doPostBack();


\n

其中 resetDDLIndex 是 JavaScript 函数,它将下拉列表选定的值返回到“已记住的”值。用于此目的的客户端脚本应该如下所示:


\n

<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>


\n

通过在 ClientSidePage 类中创建 helper 方法,这个必要的脚本可以轻松地生成。


\n

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


\n

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


\n

但是我测试后,生成后的代码else后面总多了个分号,运行总是不成功。


\n


\n

后来看了CSDN的一个帖子,这样解决了:
<script language=”javascript”>
var nOldIndices = null;
var fnOldChange = null;
function testConfirm()
{
var obj = event.srcElement;
if(obj.options[obj.options.selectedIndex].value==”RetrieveCode”)
{
return confirm(‘确定回收吗?’)
}
else
return true;
}

function newChange()
{
var ret = testConfirm();
var e = event.srcElement;
var selects = document.all(“gvData”).all.tags(“SELECT”);
var i;
for (i=0; i < selects.length; i++)
{
if (selects[i] == e)
break;
}

var nIndex = i;

if (ret)
{
if(fnOldChange[nIndex] != null)
fnOldChange[nIndex]();
else
nOldIndices[nIndex] = e.selectedIndex;
}
else
{
if (nOldIndices[nIndex] != -1)
e.selectedIndex = nOldIndices[nIndex];
}
}

function window.onload()
{
var selects = document.all(“gvData”).all.tags(“SELECT”);
nOldIndices = new Array(selects.length);
fnOldChange = new Array(selects.length);
for(var i=0; i < nOldIndices.length; i++)
{
fnOldChange[i] = selects[i].onchange;
selects[i].onchange = newChange;
nOldIndices[i] = selects[i].selectedIndex;
}
}
</script> <asp:GridView ID=”gvData” runat=”server” Width=”100%” >
<Columns>
<asp:TemplateField HeaderText=”管理”>
<ItemTemplate>
<asp:DropDownList id=”ddlManage” runat=”server” AutoPostBack=”true” OnSelectedIndexChanged=”ddlManage_SelectedIndexChanged” >
<asp:ListItem Selected=”True” Text=”选择” ></asp:ListItem>
<asp:ListItem Value=”modify” Text=”编辑” ></asp:ListItem>
<asp:ListItem Value=”RetrieveCode” Text=”回收” ></asp:ListItem>
<asp:ListItem Value=”CopyCode” Text=”复制” ></asp:ListItem>
</asp:DropDownList>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>

\n