仅当 .aspx 表单上存在某些条件时才引发 jQuery-UI 确认对话框

Question

让我的 jQuery-UI 确认对话框按我需要的方式工作时遇到问题。我在 Visual Studio 中有一个 .aspx 表单，后面带有 C# 代码。我想要求用户确认提交按钮，但前提是在 RadioButtonList 控件中选择了特定单选按钮并且整数值（来自后面代码的公共 int 属性）> 0。

这是我的确认对话框的代码：

//Confirm Replace Bill Info dialog
var replConfirmed = false;
function ConfirmReplaceDialog(obj, title, dialogText) {
    var rbl = document.getElementsByName("<%= rbReplaceAppend.ClientID %>");
    var infoID = parseInt("<%= infoID %>");
    //Raise this dialog only if "Replace" is selected and there is existing info
    if (rbl[0].checked && infoID > 0) {
        if (!replConfirmed) {
            //add the dialog div to the page
            $('body').append(String.Format("<div id='confirmReplaceDialog' title='{0}'><p>{1}</p></div>", title, dialogText));
            //create the dialog
            $('#confirmReplaceDialog').dialog({
                modal: true,
                resizable: false,
                draggable: false,
                close: function(event, ui) { 
                    $('body').find('#confirmReplaceDialog').remove();
                },
                buttons: {
                    'Yes, replace info': function() {
                        $(this).dialog('close');
                        replConfirmed = true;
                        if (obj) obj.click();
                    },
                    'No, cancel': function() {
                        $(this).dialog('close');
                    }
                }
            });
        }

        return replConfirmed;
    }

    //if "Replace" is not selected (i.e. "Append" is selected), always return true
    return true;
}

这是 .aspx 页面的部分（发布整个内容太长了）应该调用对话框：

<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <asp:RadioButtonList ID="rbReplaceAppend" runat="server" Font-Size="X-Small" RepeatDirection="Horizontal">
                <asp:ListItem Selected="True">Replace</asp:ListItem>
                <asp:ListItem>Append</asp:ListItem>
            </asp:RadioButtonList>
        </td>
        <td rowspan="2">
            <asp:Label ID="lblReplaceAppend" runat="server" CssClass="instructions" Text="(select 'Replace' to replace the information here with the Bill Request info, or 'Append' to add the Bill Request info to information already present)"></asp:Label>
        </td>
    </tr>
    <tr>
        <td>
            <asp:Button ID="btnGetReqInfo" runat="server" Text="Get Request Info" OnClick="btnGetReqInfo_Click" OnClientClick="return ConfirmReplaceDialog(this, 'Please confirm information replacement', 'Warning: you are replacing existing information. Are you sure you wish to do this (cannot be undone)?');" />
        </td>
    </tr>
</table>

发生的事情是我的对话框从未被引发——OnClick 事件总是触发并提交表单。

有什么想法吗？

更新（根据要求）： 以下是浏览器看到的相同部分的代码：

Javascript：

//Confirm Replace Bill Info dialog
var replConfirmed = false;
function ConfirmReplaceDialog(obj, title, dialogText) {
    var rbl = document.getElementsByName('ctl00_mainContent_rblReplaceAppend');
    var infoID = parseInt('10');
    //Raise this dialog only if "Replace" is selected and there is existing info
    if (rbl[0].checked && infoID > 0) {
        alert('conditions exist for confirmation');
        if (!replConfirmed) {
            //add the dialog div to the page
            $('body').append(String.Format("<div id='confirmReplaceDialog' title='{0}'><p>{1}</p></div>", title, dialogText));

            //create the dialog
            $('#confirmReplaceDialog').dialog({
                modal: true,
                resizable: false,
                draggable: false,
                close: function(event, ui) { 
                    $('body').find('#confirmReplaceDialog').remove();
                },
                buttons: {
                    'Yes, replace info': function() {
                        $(this).dialog('close');
                        replConfirmed = true;
                        if (obj) obj.click();
                    },
                    'No, cancel': function() {
                        $(this).dialog('close');
                    }
                }
            });
        }

        return replConfirmed;
    }

    //if "Replace" is not selected (i.e. "Append" is selected), always return true
    return true;
}

.aspx：

<table border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td>
      <table id="ctl00_mainContent_rblReplaceAppend" border="0" style="font-size:X-Small;">
        <tr>
          <td><input id="ctl00_mainContent_rblReplaceAppend_0" type="radio" name="ctl00$mainContent$rblReplaceAppend" value="Replace" checked="checked" /><label for="ctl00_mainContent_rblReplaceAppend_0">Replace</label></td>
          <td><input id="ctl00_mainContent_rblReplaceAppend_1" type="radio" name="ctl00$mainContent$rblReplaceAppend" value="Append" /><label for="ctl00_mainContent_rblReplaceAppend_1">Append</label></td>
        </tr>
      </table>
    </td>
    <td rowspan="2">
      <span id="ctl00_mainContent_lblReplaceAppend" class="instructions">(select 'Replace' to replace the information here with the Bill Request info, or 'Append' to add the Bill Request info to information already present)</span>
    </td>
  </tr>
  <tr>
    <td>
      <input type="submit" name="ctl00$mainContent$btnGetReqInfo" value="Get Request Info" onclick="return ConfirmReplaceDialog(this, 'Please confirm information replacement', 'Warning: you are replacing existing information. Are you sure you wish to do this (cannot be undone)?');WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$mainContent$btnGetReqInfo&quot;, &quot;&quot;, true, &quot;valGetRequest&quot;, &quot;&quot;, false, false))" id="ctl00_mainContent_btnGetReqInfo" />
    </td>
  </tr>
</table>

Answer 1

我刚刚找到了答案 - 无论出于何种原因，我都必须在此处使用 UniqueID 而不是 ClientID（我需要了解它们的区别是什么，以及何时适合使用它们）。将document.getElementsByName('<%= rblReplaceAppend.ClientID %>') 替换为document.getElementsByName('<%= rblReplaceAppend.UniqueID %>') 后，它可以正常工作。