JQuery / ASP.NET вопросы новичка о <asp: Button>

Question

Привет всем, возникла проблема с получением кнопок asp для взаимодействия с JQuery. Я в основном пытаюсь скрыть div, который содержит форму и заменить его на изображение обработки. Это прекрасно работает для меня, когда я использую кнопку ввода HTML в качестве триггера, но когда я использую aspButton, ничего не происходит.

Это работает (идентификатор кнопки HTML 'btnSubmit'):

<script>
    $('#btnSubmit').click(function () {
        $('#form1').fadeOut('fast', function () {
            $('#processing').fadeIn('fast', function () {
            });
        });
    });
</script>

Это не так (идентификатор кнопки ASP - «btnSubmitASP»):

<script>
    $('#btnSubmitASP').click(function () {
        $('#form1').fadeOut('fast', function () {
            $('#processing').fadeIn('fast', function () {
            });
        });
    });
</script>

Есть идеи, что за хитрость заставляет кнопку asp сделать это?

Спасибо

Answer 1

Идентификатор сервера ASP.net для элемента управления отличается от идентификатора HTML. (ASP.net называет это идентификатором клиента). Вы можете получить идентификатор клиента следующим образом:

$('#<%= this.btnSubmitASP.ClientID %>').click( /* etc */ );

Answer 2

Если вы используете asp.net 4.0, вы можете установить свойство ClientIDMode кнопки = 'Static'.Это остановит время выполнения от взлома с идентификатором.

Answer 3

Попробуйте это:

<script>
    $('<%=btnSubmitASP.ClientID%>').click(function () {
        $('#form1').fadeOut('fast', function () {
            $('#processing').fadeIn('fast', function () {
            });
        });
    });
</script>

Пояснение: ASP.NET переименовывает все свои элементы управления, когда они отправляются клиенту. Следовательно, кнопка ASP.NET не имеет идентификатора клиента на стороне клиента «btnSubmitASP». Приведенный выше код вызывает серверный элемент управления на стороне сервера и получает его идентификатор клиента для использования в коде jQuery.

В качестве альтернативы, вы можете использовать селекторы jQuery:

<script>
    $("[id$='_btnSubmitASP']").click(function () {
        $('#form1').fadeOut('fast', function () {
            $('#processing').fadeIn('fast', function () {
            });
        });
    });
</script>

Это будет искать элементы управления, чей идентификатор клиента оканчивается на "_btnSubmitASP".

Answer 4

Другой альтернативой использованию ClientId является назначение уникального класса кнопке ASP :. Ваш селектор будет выглядеть так:

<asp:button runat="server" CssClass="submitbutton">/<asp:button>

<script>
        $("submitbutton").click(function () {
            $('#form1').fadeOut('fast', function () {
                $('#processing').fadeIn('fast', function () {
                });
            });
        });
 </script>

Answer 5

Для кнопок ASP.NET вы должны использовать свойство OnClientClick, так как оно встроено в кнопки на стороне клиента, добавленные к кнопке, для выполнения ее функции обратной отправки. Пример:

<asp:Button ID="btnSubmitASP" runat="server"
    OnClientClick="yourJqueryFunction();" />

Если вы вернете false в OnClientClick, вы предотвратите поведение кнопки по умолчанию, предотвращающее PostBack. Если вы ничего не сделаете или вернете истину, произойдет PostBack. При использовании этого метода вам не нужно знать имя вашего Button, чтобы прикрепить код скрипта.

Чтобы ваш код работал, вам нужно получить ClientID встроенного элемента управления для создания вашего скрипта, поэтому измените следующую строку, чтобы использовать ClientID свойство Button:

$('#<%= btnSubmitASP.ClientID %>').click(function () {   

Вам необходимо получить ClientID, потому что ASP.NET добавляет имя к пространству имен и предотвращает дублирование имен. Если вы посмотрите на ASP.NET Button, вы заметите, что к свойствам name и ID добавлено гораздо больше, например:

<input type="submit" name="ctl00$ContentPlaceHolder1$btnSubmitASP" value="Test"
    id="ctl00_ContentPlaceHolder1_btnSubmitASP" />

Answer 6

Если ваша кнопка ASP: содержит runat="server", тогда .NET изменит значение идентификатора до того, как он попадет в DOM, поэтому ваш <input>, вероятно, будет выглядеть как

<input id="ctl00_ContentPlaceHolder1_btnSubmitASP" />

Поэтомуваш селектор jQuery $('#btnSubmitASP') больше не действителен, потому что идентификатор изменился.

Используйте Firebug или щелкните правой кнопкой мыши -> Просмотр источника, чтобы подтвердить фактическое значение идентификатора.

Answer 7

Ваш контроллер кнопок - runat = "server", так что это означает, что .NET изменит идентификатор контроллера перед его отображением в HTML.

jQuery пытается использовать этот идентификатор, чтобы делать с ним все, что вы хотите,Но идентификатор больше не тот.

Используйте вместо этого класс на своей кнопке.Я знаю, что это не так быстро, как ID, но это лучший способ сделать это, потому что .NET не изменит ваш класс CSS.

Answer 8

Мои знания jQuery очень скудны, но я могу дать вам один совет: помните, что jQuery выполняется на стороне клиента, а кнопка ASP отображается на сервере и возвращается в ответе.

Дважды проверьте HTML-разметку для кнопки, когда ваша страница возвращается с сервера, и убедитесь, что она структурирована так, как вы ожидаете.Возможно, атрибут ID установлен не так, как ожидалось, например.