it-roy-ru.com

Доступ к элементам управления Asp.net с помощью jquery (все параметры)

Как получить доступ к управлению asp.net с помощью jquery

<asp:TextBox runat="server" ID="myTextBox" />

$('#myTextBox') не будет работать.

23
Krishna

<asp:TextBox runat="server" ID="myTextBox" />

Приведенный выше код aspx при отображении на странице изменяется на

<input type="text" id="ctl00_Main_myTextBox" name="ctl00$Main$myTextBox" />

Это связано с тем, что передается основная и управляющая информация, в которой находится элемент управления .net, что немного усложняет написание селектора.

У вас есть несколько вариантов. Это ни в коем случае не является всеобъемлющим, но я попробую.

Опция 1:

$('#<%= myTextBox.ClientID %>')

Используйте ClientID - рекомендуется, но не очень. Я бы постарался не писать ClientID, если бы мог. Основная причина в том, что вы можете использовать его только на страницах .aspx, а не во внешних файлах .js.

Option2:

$('[id$=myTextBox]') // id which ends with the text 'myTextBox'

$('[id*=myTextBox]') // id which contains the text 'myTextBox'

Использование атрибутов селекторов - также рекомендуется, выглядит немного некрасиво, но эффективно.

Я видел несколько вопросов здесь, обеспокоенных производительностью этих селекторов. Это лучший из возможных способов? Нет. 

Но в большинстве случаев вы даже не заметите снижения производительности, если, конечно, ваше дерево DOM невелико.

Option3:

Использование CssClass - настоятельно рекомендуется. Потому что селекторы, использующие классы, чистые и несложные. 

Если вам интересно, CssClass для элементов управления .net такая же, как class для традиционных элементов управления html.

<asp:TextBox runat="server" ID="myTextBox" CssClass="myclass" /> //add CssClass

$('.myclass') //selector

Option4:

Используйте ClientIDMode="Static", представленный в .NET Framework 4.0, для элемента управления, чтобы его идентификатор оставался неизменным. - тоже рекомендуется.

<asp:TextBox runat="server" ID="myTextBox" ClientIDMode="Static"  /> //add ClientIDMode

$('#myTextBox') //use the normal ID selector

Примечание: По своему опыту я видел уродливые селекторы, такие как $('#ctl00_Main_myTextBox'). Это результат прямого копирования вставки идентификатора, отображаемого на странице, и использования его в сценарии. Посмотрите, это будет работать. Но подумайте о что произойдет, если идентификатор элемента управления или главный идентификатор изменится. Очевидно, вам придется повторно посетить эти идентификаторы и изменить их снова. Вместо этого используйте один из приведенных выше вариантов, и это будет рассмотрено.

76
Krishna

В дополнение к ответу krishna вы можете использовать атрибут name вместо того, когда он отображается в HTML с помощью IIS, назначенное значение атрибута name должно совпадать со значением идентификатора:

Пример

<asp:TextBox ID="txtSalesInvoiceDate" runat="server" />

var invDate = $("input[name=txtSalesInvoiceDate]");
1
Ashraf Abusada

В дополнение к ответу @krishna вы можете управлять генерацией идентификатора клиента веб-контроля на уровне страницы, а также на уровне веб-сайта с помощью ClientIDMode="Static" в ASP.NET 4.0. 

На уровне страницы, как показано ниже:

<%@ Page Title="" Language="C#" MasterPageFile="~/Members/Site.Master" AutoEventWireup="true" CodeBehind="Calculator.aspx.cs" 
Inherits="store.Members.Calculator" 
ClientIDMode="Static"
%>

На уровне веб-сайта

Вы можете использовать настройки web.config, как показано ниже 

 <system.web>
    <pages ClientIDMode="Static">
    </pages>

   ...
 </system.web>
0
M.Hassan