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

Best way to present multiple confirmation messages to user

本文关键字：消息 最佳 方式 确认 用户 显示      更新时间：2023-09-26

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

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

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

那么，有没有人对这种情况有更"最佳实践"的方法呢？

您可以使用 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>

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

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();
    }
});
相关文章：