Пользовательский идентификатор веб-элемента управления включает в себя идентификатор ребенка - PullRequest
Новая
       51

Пользовательский идентификатор веб-элемента управления включает в себя идентификатор ребенка

0 голосов
/ 25 октября 2019

Мой пользовательский веб-элемент управления (ascx) 

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="CustomAutoCompleteTextBox.ascx.cs" Inherits="UserControls_CustomAutoCompleteTextBox" ClientIDMode="Static" %>

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

Реализация на веб-странице EquipmentMove 

<%@ Page Language="C#" MasterPageFile="~/SiteMasterPage.master" AutoEventWireup="true" CodeFile="EquipmentMove.aspx.cs" Inherits="Equipment_EquipmentMove" %>

 <Custom:AutoCompleteTextBox runat="server" ID="HardwareSNTextBox1"
            OnCloseFunction="TestOnClosefunction"
            OnFocusFunction="testme"
            OnKeyUpFunction="EquipmentSearchCheckHardwareSNLength"
            PostbackURL="EquipmentMove.aspx/HardwareSNAutoComplete"
            SpellCheck="false" />

Во время выполнения идентификатор клиента элемента управления Custom: AutoCompleteTextBox становится «HardwareSNTextBox1_AutoCompleteTextBox». Результирующая разметка: 

<input name="ctl00$cpBody$HardwareSNTextBox1$AutoCompleteTextBox" type="text" id="ctl00_cpBody_HardwareSNTextBox1_AutoCompleteTextBox" class="ui-autocomplete-input" autocomplete="off">

Если я хочу написать javascript с именем «TestOnClosefunction» на веб-странице EquipmentMove, и я хочу получить доступ к этому элементу управления, но с использованием первоначально введенного идентификатора «HardwareSNTextBox1» ине «HardwareSNTextBox1_AutoCompleteTextBox» это вообще возможно?

Редактировать: Я полагаю, если разработчик, использующий этот пользовательский веб-элемент управления, проверяет разметку для фактического идентификатора при написании своих js, тогда это может сработать. Не очень интуитивно, хотя.

1 Ответ

0 голосов
/ 25 октября 2019

Очень хороший способ - использовать свойство ClientID серверного элемента управления, например, на странице EquipmentMove ASPX: 

<form id="form1" runat="server">
    <div>
        <Custom:AutoCompleteTextBox runat="server" ID="HardwareSNTextBox1" />
        <input type="button" value="Test" onclick="javascript:TestOnClosefunction()" />
    </div>
</form>
<script type="text/javascript">
    function TestOnClosefunction() {
        var textBox = document.getElementById('<%= HardwareSNTextBox1.FindControl("AutoCompleteTextBox").ClientID %>');
        console.log(textBox.value);
    }
</script>

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

Пояснение

Встраивание строки серверного кода и использование свойства ClientID в JavaScript гарантируетВаш серверный элемент управления всегда будет обнаружен независимо от того, какой у него сгенерированный идентификатор.

ОБНОВЛЕНИЕ: Возможно, я должен подчеркнуть, что эта строка:

var textBox = document.getElementById('<%= HardwareSNTextBox1.FindControl("AutoCompleteTextBox").ClientID %>');

становится:

var textBox = document.getElementById('HardwareSNTextBox1_AutoCompleteTextBox');

при запуске страницы. Преимущество по сравнению с жестким кодированием идентификатора в JavaScript состоит в том, что он работает независимо от того, какое значение установлено для свойства элемента управления ClientIDMode.

...