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

Question

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

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

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

那么有人对这种情况有更 'best practice' 的方法吗？

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

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

每个列表项都包含一条消息和一个复选框。消息文本是可单击的，并将用户带到目标控件，以便他们可以 check/edit 所需的值。

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

系统会记住用户的确认，这样他们就不必在对话框关闭和重新打开时再次确认。

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

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();
    }
});

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

Best way to present multiple confirmation messages to user

javascript

c#

asp.net

webforms