Добавление событий кликов в пользовательский элемент управления

Question

У меня есть пользовательский элемент управления в веб-приложении asp.net. Элемент управления выводит список html, который настраивается на основе текущего пользователя. Элементы списка создаются из поиска базы данных, а пользовательский элемент управления форматируется для отображения в виде выпадающего списка на странице.

Само управление просто и выглядит следующим образом:

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="item-lector.ascx.vb" Inherits="includes_usercontrols_item_selector" %> 
<!--Item Selector--> 
<div id="item-selector"> 
<%=Me.Output%> 
</div> 

код позади файла динамически заполняет «выход» элемент управления свойством поэтому окончательные разметки выглядят следующим образом:

<div id="item-selector"> 
<h1>Item 1 - Item 1</h1> 
<a href="#" class="changeItem itemArrow">Change item</a> 
<ul id="changeItemMenu" class="dropDownMenu">  
<li><a href="#">Item 1</a></li>  
<li><a href="#">Item 2</a></li>  
<li><a href="#">Item 3</a></li>  
<li><a href="#">Item 4</a></li>  
<li><a href="#">Item 5</a></li>  
<li><a href="#">Item 6</a></li>  
<li><a href="#">Item 7</a></li>  
<li><a href="#">Item 8</a></li>  
<li><a href="#">Item 9</a></li>  
<li><a href="#">Item 10</a></li>  
</ul> 
</div> 

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

То, что я пытаюсь сделать, - это добавить события щелчка к элементам списка. Когда пользователь нажимает на один из элементов в списке, я хочу, чтобы захватить какой элемент пользователь выбирает в списке (требуется ли это для обратной передачи?) И что-то с ним делать в коде за (< это ключ) ,

Я скорее разработчик среднего уровня и db, а разработка пользовательского интерфейса - не моя сила, поэтому, пожалуйста, рассмотрите меня в этом отношении новичок. Я не уверен, как это сделать или что вводить в выходную строку, чтобы включить это. Любая помощь будет оценена по достоинству!

Answer 1

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="item-lector.ascx.vb" Inherits="includes_usercontrols_item_selector" %> 
<!--Item Selector--> 
<div id="item-selector"> 
<%=Me.Output%> 
</div> 
<!-- add this code here after the </div> --> 
<script type="text/javascript"> 
    function createFunc(i){ return function(){ alert("You clicked element " + (i + 1) + " in the list"); return false; } } 
    var els = document.getElementById('changeItemMenu').getElementsByTagName('a'); 
    for(var i = 0; i < els.length; i++) 
     els[i].onclick = createFunc(i); 
</script> 

В этом коде мы добавим события, применяющим непосредственно атрибут onclick, лучший способ, чтобы добавить событие будет использовать function like this one или целая библиотека, как JQuery или YUI или что-то вам нравится.

Answer 2

Возможно, вам не обязательно использовать postbacks, , но если вы хотите, вам нужно использовать что-то под названием delegates.
проверить его здесь: link

Даже если вы не используете их, они полезны, и позволит Вам добавлять «пользовательские» события в свой пользовательский элемент управления.

---

Edit:
Вот код, вы можете использовать:
Сначала вы определите свой тип делегата. Подумайте о делегате, как о указателе функции. Вы definte это в код-за:

public delegate void OnChangeDelegate(object sender, EventArgs e); 

Тогда вы будете определять фактическое событие, чтобы быть типа OnChangeDelegate типа.

public event OnChangeDelegate Change; 

Затем нужно создать метод (или два), которые "пожары" Ваше событие:
(это в вашем ASCX.CS-файл)

public void ItemChange(object sender, EventArgs e) 
{ 
    if (sender != null && sender is LinkButton) 
    { 
     string idx = ((LinkButton)sender).CommandArgument; 
     FireMyChangeEvent(sender, idx); 
} 

Также

private void FireMyChangeEvent(object sender, string index) 
{ 
    if (MyItemChange != null) 
    { 
     EventArgs e = new EventArgs(); 

     Change(sender, new ItemSelectorEventArgs(index)); 
    } 
} 

Так где-нибудь в вашем коде, вы можете передать дескриптор управления и некоторые дополнительные вещи в EventArgs объект.

Теперь сложная часть получает ваш <li> s, чтобы вызвать обратную передачу. Традиционно, вы будете использовать <select> и <option> потому, что родное onclick события, но так как вы рендеринг <ul> и <li> s Вы можете обернуть их с <asp:LinkButton runat="server"> так что вы получите стрельбы события, вместо <a href="#">, поэтому вы можете сказать OnClick для этого LinkButton, и в этом случае вы можете просто вызвать свой метод ItemChange для запуска события вашего элемента управления и передать идентификатор элемента, который вы можете отправить в EventArgs вашего события.

Я бы определенно рекомендовал прочитать ссылку, которую я вам отправил, и помнить, что если у элемента управления нет runat="server", на вашем сервере не будет никакого дескриптора.

** Обновить *: Вот еще код.

MY ASPX код Здесь следует отметить, что WebUserControl1 мой пользовательский элемент управления и MyClick является метод, определенный в ASPX.cs коде.

<ul> 
    <uc1:WebUserControl1 ID="WebUserControl11" runat="server" OnChange="MyClick"/> 
</ul> 

Мой ASCX Код Здесь следует отметить, что CommandArgument используется для указания, какой элемент будет нажата. Кроме того, вы можете использовать это для идентификатора базы данных или некоторого такого значения, я просто использую простой целочисленный порядковый номер.

<li><asp:LinkButton ID="lb1" runat="server" OnClick="ItemChange" CommandArgument="1">item1</asp:LinkButton></li> 
<li><asp:LinkButton ID="lb2" runat="server" OnClick="ItemChange" CommandArgument="2">item2</asp:LinkButton></li> 
<li><asp:LinkButton ID="lb3" runat="server" OnClick="ItemChange" CommandArgument="3">item3</asp:LinkButton></li> 

В APX.CS кодекса
Отметим здесь, что lblResult простой

<asp:Label ID="lblResult" runat="server" /> 

Я использовал это только для целей отображения

protected void MyClick(object sender, EventArgs e) 
{ 
    int myitem = ((WebUserControl1.ItemSelectorEventArgs)e).ItemSelected; 

    lblResult.Text = "You clicked Item " + myitem.ToString() + "!"; 
} 

Наконец

Это класс Пользовательские Args событий я создал в моем ascx.cs код:

public class ItemSelectorEventArgs : EventArgs 
{ 

    public int ItemSelected 
    { 
     get; 
     set; 
    } 

    public ItemSelectorEventArgs(string indexSelected) 
    { 
     int tryGetANumber; 

     if (int.TryParse(indexSelected, out tryGetANumber)) 
     { 
      this.ItemSelected = tryGetANumber; 
     } 
     else 
     { 
      this.ItemSelected = -1; 
     } 

    } 
} 

Запомнить
Вы улавливать события в HTML-элементов управления внутри элемента управления пользователя, собирая некоторую информацию от них , и запуск пользовательского события в пользовательском элементе управления.