GridView 中 DropDownList 弹出确认对话框_c#下拉框切换可以弹出confim吗-CSDN博客

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

msdn中有篇文章有这个方法：
确认 AutoPostBack DropDownLists
尽管通常在单击按钮时使用确认对话框，但是还可以在更改下拉列表时使用它们。例如，您可能具有一个当特定的 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 的调用：

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

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

要实现此目的，我们需要做两件事情：

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

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

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

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

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

<select id="ddlID"
οnchange="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 的该方法，当网页上的选定项目发生更改时要在该网页上显示对话框。

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

后来看了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>