Question

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

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

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

那么有没有人对这种情况采用更“最佳实践”的方法呢？

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>

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

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

记住用户的确认，以便他们不必重新确认对话是否已关闭＆amp;重新打开。

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

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 个答案: