Несколько элементов управления ASP.Net на одной странице

Question

Мы создали пользовательский элемент управления для ASP.Net. В любой момент страница профиля пользователя может содержать от одного до бесконечности этих элементов управления. Файл Control.ascx содержит довольно много JavaScript. Когда элемент управления отображается в .Net для HTML, вы замечаете, что он печатает javascript для каждого элемента управления.

Это было ожидаемо. Я хотел бы уменьшить объем вывода HTML сервером для увеличения времени загрузки страницы. Обычно вы можете просто переместить javascript во внешний файл, а затем вам потребуется только один дополнительный HTTP-запрос, который будет использоваться для всех элементов управления.

Но как насчет случаев в javascript, где у нас есть что-то вроде

document.getElementById('<%= txtTextBox.ClientID %>');

Как javascript узнает, с каким пользовательским элементом управления работать? Кто-нибудь сделал что-то подобное, или решение смотрит мне в лицо?

Answer 1

Написать функции, которые принимают идентификаторы, поместить их в mysite.js и ссылаться на файл следующим образом:

<script type="text/javascript" src="/mysite.js"></script>

Затем, когда вы делаете ваши звонки в ваших элементах управления, сделайте это так:

<div onClick="DoMyFunctionThatIWant('<%= txtTextBox.ClientID %>')">...</div>

Тогда ваша функция в js выглядит примерно так:

function DoMyFunctionThatIWant(domId)
{
   var obj = document.getElementById(domId);
}

Answer 2

Написать клиентский компонент Microsoft AJAX.

Для этого нужно многое сделать:

• Написать класс компонента в файле JavaScript.
• Зарегистрируйте этот файл сценария, внедрив IScriptControl в коде класса.
• Создайте экземпляр клиентского компонента, реализовав GetScriptDescriptors для кода класса.
• Взять в дескриптор параметры clientID в качестве параметров, чтобы класс клиентского компонента (написанный на js) знал идентификаторы клиента.

Класс компонента может делать все, что вы хотите, потому что он знает все clientIds вашего пользовательского элемента управления. В любом случае это работает для нескольких экземпляров одного и того же пользовательского элемента управления. В качестве ловушки это несколько громоздко для реализации. Но это очень чисто.

Answer 3

Вот решение:

• Создайте внешний файл JavaScript и скопируйте в него весь код.
• Для каждого элемента в пользовательском контроле, на который должен ссылаться javascript, создайте новый объект.
• Вернувшись в файл ascx usercontrol, возьмите id каждого usercontrol и сделайте его членом Object, а значение этого элемента равным id элемента в usercontrol, к которому относится Object. Сделайте это на нагрузке.
• Теперь в каждой функции найдите нужный элемент, получив этот идентификатор из объекта, используя идентификатор своего элемента управления в качестве ключа.

Мое реальное полное решение было немного другим. Каждый пользовательский элемент управления содержит Telerik Radgrid. Обработчики событий на стороне клиента для radgrid имеют вид

radGrid_eventOccurred(sender, args) {

, где sender - объект grid.

Таким образом, вместо использования идентификатора usercontrols в качестве ключа в моем коде, я использовал сетку.

Скажем, мне нужно обновлять текстовое поле внутри пользовательского контроля всякий раз, когда я нажимаю на строку в сетке. Теперь я могу сделать что-то вроде этого:

function radGrid_rowClick(sender, args) {
    var text = /*Get the text of the clicked row*/;

    var textBox = textBoxesObject[sender];
    textBox.set_value(text);
}

Answer 4

У вас есть возможность использовать jQuery? Функциональность селектора css чрезвычайно мощна для таких сценариев. Например:

<div class="action" id="1">Node 1</div>
<div class="action" id="2">Node 2</div>
<div class="action" id="3">Node 3</div>
<div class="action" id="4">Node 4</div>
<div class="action" id="5">Node 5</div>

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
    $('.action').click(function() {
        var $t = $(this);       //---here is your contextual node
        alert($t.attr('id'));   //---this alerts the id value of your node
    });
</script>