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

我已要求将VB6应用程序转换为WebForms环境(C# .NET v4.5)。当点击保存按钮时，现有应用程序会显示多条确认消息。向用户显示多条确认消息的最佳方式

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

他们希望保留这个功能，但我与垃圾邮件与他们为了节省通过点击（潜在）10+的问题，用户的这种做法感到不舒服。更不用说现代浏览器允许用户禁用多个弹出窗口。

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

来源

2015-01-16 Sam Banks

好的，在与团队讨论之后，我们决定使用模态对话框显示带有相应复选框的警告消息的动态列表。在“提交”按钮将继续该过程之前，用户必须确认每条警告都可以。 –

一旦你完成了解决方案，你可以回答自己的问题。它可以帮助有相似要求的未来用户。 –

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

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

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

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

来源

2015-01-20 19:57:58

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

来源

2015-01-16 04:02:22

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

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

回答

相关问题