Сделайте контейнер сводки проверки видимым, когда сводка проверки станет видимой

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

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

(p.s. Я использую jQuery, чтобы облегчить жизнь)

Снимите Visible="false" с панели asp: мы сделаем все это на стороне клиента.

<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() с таким результатом.

(см. этот вопрос StackOverflow где я получил идею)

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

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

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

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

Answer 2

Старый вопрос, но все равно.

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

Свойство 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форум

Answer 3

У меня была похожая проблема, когда у меня был набор 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