Сделать контейнер сводки валидации видимым, когда резюме проверки становится видимым

Question

У меня есть следующая разметка. errorPanel был впервые использован для отображения сообщений об исключениях на стороне сервера и отлично работает. Теперь я хотел бы включить мою сводку проверки в тот же самый номер errorPanel.

<asp:Panel ID="errorPanel" runat="server" CssClass="error" Visible="false"> 
    <div style="float: right;"> 
     <a href="#" class="error-close" style="font-size: 10px">Close</a></div> 
    <asp:Label ID="errorLabel" runat="server"></asp:Label> 
    <asp:ValidationSummary ID="validationSummary" runat="server" EnableClientScript="true" /> 
</asp:Panel> 
<fieldset> 
    <legend>Create New Role</legend><asp:Label ID="newRoleNameLabel" runat="server" AssociatedControlID="newRoleNameText">Role Name:</asp:Label> 
    <asp:TextBox ID="newRoleNameText" runat="server" Width="100px"></asp:TextBox> 
    <asp:RequiredFieldValidator ID="newRoleNameRequired" runat="server" EnableClientScript="true" ControlToValidate="newRoleNameText" Display="Dynamic" ErrorMessage="Please enter a role name.">*</asp:RequiredFieldValidator> 
    <asp:Button ID="createButton" runat="server" Text="Create" OnClick="createButton_Click" /> 
</fieldset> 

Моя проблема сейчас в том, что требуется проверка происходит на сторону клиента, и я хочу сохранить, так что я не имею возможностей на стороне сервера, чтобы сделать errorPanel видимыми для того, чтобы сделать резюме проверки видимым.

Я вижу, что у меня есть два варианта: сделайте валидацию на стороне сервера и используйте мой код, чтобы сделать панель видимой, или как-нибудь подключите код клиента, и поймайте там событие, когда сводка должна быть видимой, а затем также видны errorPanel. Как я могу обойти последний?

Answer 1

Вот такой подход, который на самом деле не рекомендуется, но мне было весело писать его, и это может привести к каким-то замысловатым идеям!

(постскриптум Я использую JQuery, чтобы сделать жизнь проще)

Возьмите Visible="false" с вашего жерех: панель, мы будем делать все это на стороне клиента.

<asp:Panel ID="errorPanel" runat="server" CssClass="error"> 

Теперь, при готовке документа, мы скроем панель и испортим код проверки ASP.NET.

$(document).ready(function() { 
    // This is more like it! 
    $("#<% =errorPanel.ClientID %>").hide(); 
    eval('ValidatorCommonOnSubmit = ' + ValidatorCommonOnSubmit.toString().replace('return result;', 'myValidatorHook(result); return result;')); 
}); 

Это Eval берет функцию ValidatorCommonOnSubmit(), который генерируется с помощью валидаторов ASP.NET, и изменяет его на месте, так как раз, прежде чем она возвращает результат, он вызывает myValidatorHook() с этим результатом.

(см this StackOverflow question для того, где я получил идею)

Теперь наш крюк:

function myValidatorHook(validated) { 
    if (validated) { 
     $("#<% =errorPanel.ClientID %>").hide(); 
    } 
    else { 
     $("#<% =errorPanel.ClientID %>").show(); 
    } 
} 

Достаточно просто - если валидатор возвращается истинный (страница проверяет), скрыть панель; если он вернул false (страница не проверялась), покажите его.

Использование на свой страх и риск! Если JavaScript, сгенерированный валидаторами ASP.NET, изменится, это будет очень неприятно, но я проверил его в ASP.NET 2.0, 3.5 и 4.0, и он работал одинаково во всех трех.

Answer 2

У меня была аналогичная проблема, когда у меня содержалось div вокруг набора полей проверки ASP, я хотел показать контейнер, если была ошибка, чтобы показать.

Я использовал jQuery, чтобы скрыть контейнер в соответствии с ответом Carson63000, но затем использовал jQuery, чтобы посмотреть на видимость ошибок и показать контейнер снова, если что-то было видно.

jQuery(function() { 
    jQuery(".checkout-validation").hide(); 
    var show = false; 
    jQuery(".checkout-validation span").each(function() { 
     if (jQuery(this).css('display') != 'none' && jQuery(this).css('visibility') != 'hidden') { 
      show = true; 
     } 
    }); 
    if (show == true) { 
     jQuery(".checkout-validation").show(); 
    } 
}); 

Единственное уточнение другое разъяснение, я хотел бы добавить, что стандартные поля проверки устанавливаются visibility: hidden по умолчанию и Display="Dynamic" валидация являются display: none

Answer 3

Старый вопрос, но в любом случае.

Я нашел одно простое и чистое решение.Нет серверной части, не требуется JavaScript. Вы можете просто поместить свой контент в errorPanel в HeaderText of ValidationSummary Control. Как сказал на MSDN site:

Свойство HeaderText не HTML закодирован. Таким образом, HTML теги могут быть включены в HeaderText .

Ваш пример:

<asp:ValidationSummary ID="validationSummary" runat="server" EnableClientScript="true" CssClass="error" 
HeaderText='<div style="float: right;"><a href="#" class="error-close" style="font-size: 10px">Close</a></div><span ID="errorLabel" runat="server"></span>'/> 
<fieldset> 
... 

И PLBlum также прибили его на Microsoft asp.net forum: