向用户显示多条确认消息的最佳方式答案

【问题标题】：Best way to present multiple confirmation messages to user向用户显示多条确认消息的最佳方式
【发布时间】：2015-01-16 02:34:01
【问题描述】：

我被要求将VB6 应用程序转换为WebForms 环境(C# .NET v4.5)。单击“保存”按钮时，现有应用程序会显示多条确认消息。

EG. "You have entered X, which is less than Y. Are you sure?"

他们希望保留此功能，但我对这种向用户发送（可能）10 多个问题的垃圾邮件方式感到不舒服，他们必须点击这些问题才能保存。更不用说现代浏览器允许用户禁用多个弹出窗口。

那么对于这种情况，是否有人有更“最佳实践”的方法？

【问题讨论】：

好的，在与团队讨论后，我们决定使用模式对话框显示警告消息的动态列表以及随附的复选框。在“提交”按钮继续该过程之前，用户必须确认他们对每个警告都没有问题。
完成解决方案后，您可以回答自己的问题。它可以帮助未来有类似需求的用户。

标签： javascript c# asp.net webforms

【解决方案1】：

您可以使用 ASP.Net <asp:ValidationSummery> 控件来实现您的目的。请找到以下代码以供参考。

<!DOCTYPE html>
<html>
<body>

<form runat="server">
<table>
<tr>
<td>
<table bgcolor="#b0c4de" cellspacing="10">
   <tr>
     <td align="right">Name:</td>
     <td><asp:TextBox id="txt_name" runat="server"/></td>
     <td>
     <asp:RequiredFieldValidator
     ControlToValidate="txt_name" 
     ErrorMessage="Please Enter Name"
     Text="*" 
     runat="server"/>
     </td>
   </tr>
   <tr>
     <td align="right">Travel Type:</td>
     <td>
     <asp:RadioButtonList id="rlist_type" 
     RepeatLayout="Flow"
     runat="server">
     <asp:ListItem>Bus</asp:ListItem>
     <asp:ListItem>Train</asp:ListItem>
     <asp:ListItem>Flight</asp:ListItem>
     </asp:RadioButtonList>
     </td>
     <td>
     <asp:RequiredFieldValidator
     ControlToValidate="rlist_type"
     ErrorMessage="Please Select Travel Type"
     InitialValue=""
     Text="*"
     runat="server"/>
     </td>
   </tr>
   <tr>
     <td></td>
     <td><asp:Button id="b1" Text="Submit" runat="server"/></td>
     <td></td>
   </tr>
</table>
</td>
</tr>
</table>
<asp:ValidationSummary
ShowMessageBox="true"
ShowSummary="false"
HeaderText="You must enter a value in the following fields:"
EnableClientScript="true"
runat="server"/>
</form>

</body>
</html>

【讨论】：

感谢您的回复，但我们已经在对必填字段等使用验证控件。我们需要一些要求用户确认或取消操作的东西。如果他们确认，则保存操作将继续。

【解决方案2】：

如果其他人遇到此要求，这是我想出的解决方案。这有点粗糙，我需要做进一步的工作来清理它，但它可能会为将来的某个人提供一个起点。

http://jsfiddle.net/Sam_Banks/df3cewg7/

这是一个简单的<UL>，它是使用JQuery 作为单击按钮时运行的验证检查的结果而构建的。

<div>
    <label for="txtCaseOne">First Input</label>
    <input id="txtCaseOne" type="text" />
</div>
<div>
    <label for="txtCaseTwo">Second Input</label>
    <input id="txtCaseTwo" type="text" />
</div>
<div>
    <input type="button" id="btnSubmit" value="OK" />
</div>
<div class="confirmationContainer">
    <div class="confirmationWindow">
        <ul class="warnings"></ul>
    </div>
</div>

每个列表项由一条消息和一个复选框组成。消息文本是可点击的，并将用户带到目标控件，以便他们可以根据需要检查/编辑值。

该复选框允许用户注册他们已确认警告。

记住用户的确认，这样他们就不必重新确认对话框是否关闭和重新打开。

除非选中所有复选框，否则页面不会提交到服务器。

function submitFinalApproval() {
    var unconfirmed = $('.confirmationWindow').find('input:checkbox:not(:checked)');

    if (unconfirmed.length > 0) {
        alert("You cannot submit for Final Approval until all warnings are confirmed.");
        return false;
    }

    alert("Submitting");
    $('.confirmationWindow').dialog('close');
}

function cancelFinalApproval() {
    $('.confirmationWindow').dialog('close');
}

function saveCheckedWarnings() {
    $('.confirmationContainer').removeData();

    var checkedWarnings = $('.confirmationWindow input:checked');

    checkedWarnings.each(function () {
        var warning = $(this).parent().siblings('span').text();
        $('.confirmationContainer').data(warning, "true");
    });
}

function selectWarning(target) {
    $('.confirmationWindow').dialog('close');
    target.focus().select();
}

function appendWarning(message, target) {
    var label = $('<span>');
    label.text(message);
    label.on('click', function () {
        selectWarning(target);
    });

    var checkboxLabel = $('<label>');
    if ($('.confirmationContainer').data(message)) {
        checkboxLabel.append($('<input type="checkbox" checked="checked" />'));
    } else {
        checkboxLabel.append($('<input type="checkbox" />'));
    }
    checkboxLabel.append('OK');

    $('.warnings')
        .append($('<li>')
        .append(label)
        .append(checkboxLabel));
}

$('#btnSubmit').click(function () {

    //if page passes error validation

    $('.warnings').empty();

    // If warning condition 1 fails
    appendWarning("Please note that Condition 1 is odd. Would you like to continue?", $('#txtCaseOne'));
    // If warning condition 2 fails
    appendWarning("Condition 2 set to Fizz while Buzz. Are you sure?", $('#txtCaseTwo'));
    // If warning condition 3 fails
    appendWarning("Condition 3. Are you sure?", $('#txtCaseTwo'));

    $('.confirmationWindow').dialog('open');

    return false;
});

$('.confirmationWindow').dialog({
    autoOpen: false,
    modal: true,
    dialogClass: 'noDialogTitle',
    buttons: {
        "Submit for Final Approval": submitFinalApproval,
        Cancel: cancelFinalApproval
    },
    close: function () {
        saveCheckedWarnings();
    }
});

【讨论】：