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

Question

I've been asked to convert a VB6 application to a WebForms environment (C# .NET v4.5) . 我被要求将VB6应用程序转换为WebForms环境(C# .NET v4.5) 。 The existing application presents multiple confirmation messages when the Save button is clicked. 单击“保存”按钮时，现有应用程序会显示多条确认消息。

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

They want to preserve this functionality but I'm uncomfortable with this approach of spamming the user with (potentially) 10+ questions that they have to click through in order to save. 他们想保留此功能，但是我对这种向用户发送（可能）要保存的10多个问题向用户发送垃圾邮件的方法感到不满意。 Not to mention that modern browsers allow users to disable multiple popups. 更不用说现代浏览器允许用户禁用多个弹出窗口。

So does anyone have a more 'best practice' approach to this scenario? 那么，有人针对这种情况有更“最佳实践”的方法吗？

Answer 1

You can use ASP.Net <asp:ValidationSummery> control for your purpose. 您可以根据需要使用ASP.Net <asp:ValidationSummery>控件。 Please find below code for reference. 请找到以下代码以供参考。

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

In case anyone else comes across this requirement, here is the solution I came up with. 万一其他人遇到此要求，这是我想出的解决方案。 It's a bit rough and I need to do further work on cleaning it up, but it might provide a starting point for someone in the future. 这有点粗糙，我需要做进一步的清理工作，但这可能为将来的某个人提供一个起点。

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

It is a simple <UL> that is built up using JQuery as a result of validation checks run when a button is clicked. 这是一个简单的<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>

Each list item consists of a message and a checkbox. 每个列表项均包含一条消息和一个复选框。 The message text is clickable and takes the user to the target control so that they can check/edit a value as required. 消息文本是可单击的，并将用户带到目标控件，以便他们可以根据需要检查/编辑值。

The checkbox allows the user to register that they have confirmed the warning. 复选框允许用户注册他们已确认警告。

The user's confirmations are remembered so that they don't have to re-confirm if the dialog is closed & re-opened. 记住用户的确认，因此，如果对话框已关闭并重新打开，则无需重新确认。

The page will not submit to the server unless all checkboxes have been clicked. 除非已选中所有复选框，否则该页面不会提交给服务器。

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

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

问题描述

2 个解决方案

解决方案1
0 2015-01-16 04:02:22

解决方案2
0 已采纳 2015-01-20 19:57:58

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

问题描述

2 个解决方案

解决方案1 0 2015-01-16 04:02:22

解决方案2 0 已采纳 2015-01-20 19:57:58

解决方案1
0 2015-01-16 04:02:22

解决方案2
0 已采纳 2015-01-20 19:57:58