Question

我在asp.net Web应用程序中有一个用户控件。控件输出基于当前登录用户自定义的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>

ID和类属性都是格式化和其他脚本编写所必需的。该控件用作选择器，页面的其余部分应对用户选择的项目做出反应。

我要做的是将点击事件添加到列表项。当用户点击列表中的某个项目时，我想要捕获用户在列表中选择的项目（这是否需要回发？）和在后面的代码中执行某些操作（＆lt;这是关键）。

我更像是一个中间层，db层开发人员和UI开发不是我的力量所以请在这方面考虑我一个新手。我不知道如何继续或将什么注入输出字符串以启用此功能。任何和所有的帮助将不胜感激！

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

您可能不一定需要使用回发，但如果你愿意，你需要使用名为delegates的东西在这里查看：link

即使您不使用它们，它们也很有用，并且允许您向用户控件添加“自定义”事件。

修改
以下是您可以使用的一些代码：
首先定义委托类型。将代理想象为函数指针。你将在你的代码隐藏中解决这个问题：

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>导致回发。传统上，由于原生<select>事件，您会使用<option>和onclick，但由于您要渲染<ul>和<li> s 您可能希望使用<asp:LinkButton runat="server">来包装它们，以便触发事件，而不是<a href="#">，因此您可以为该LinkButton说OnClick，在那种情况下，您可以调用您的ItemChange方法来触发控件的事件，并传递您可以在事件的EventArgs中发送的项目的ID。

我肯定会建议您阅读我发给您的链接，并记住，除非控件有runat="server"，否则您的服务器将无法处理。

**更新*：这是更多代码。

我的ASPX代码 请注意，WebUserControl1是我的用户控件，MyClick是ASPX.cs代码中定义的方法。

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

我的ASCX代码 请注意，CommandArgument用于指定单击哪个项目。此外，您可以将此用作数据库ID或某些此类值，我只使用一个简单的整数序号。

<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() + "!"; }

<强>最后

这是我在ascx.cs代码中创建的自定义事件Args类：

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控件的事件，从中收集一些信息，并在用户控件上触发自定义事件。

将单击事件添加到用户控件

2 个答案: