ASP.NET中，使用两个ListBox双击实现左右移动

Posted 2023-04-13

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ASP.NET中，使用两个ListBox双击实现左右移动相关的知识，希望对你有一定的参考价值。

ASP.NET中，使用两个ListBox实现左右移动，就是双击左边ListBox里的值，右边ListBox中的Item就增加该值，同事左边那个ListBox中双击的值消失。具体代码我已经写好。关键我写的是通过按钮点击来实现该功能的。但是我需要是通过双击来实现同样的过程！一以下是我所开发功能中的部分代码：
// 从左边的listbox选中的项向右边的listbox添加
protected void btnAdd_Click(object sender, EventArgs e)

if (lbLeft.SelectedIndex <= -1)//判断是否有选中的项，如果没有，则弹出对话框并返回

Response.Write("<script>alert('请选择要添加关注的人员！');</script>");
return;

int index = 0;
for (int i = 0; i < this.lbLeft.Items.Count; i++)

if ((this.lbLeft.Items[i].Selected) && (this.lbRight.Items.FindByValue(this.lbLeft.Items[i].Value) == null))

ListItem item = lbLeft.Items[i];
this.lbLeft.Items.Remove(item);
index--;
this.lbRight.Items.Add(item);

// 从右边将选中的删除
protected void btnDel_Click(object sender, EventArgs e)

if (lbRight.SelectedIndex <= -1)//判断是否有选中的项，如果没有，则弹出对话框并返回

Response.Write("<script>alert('请选择要删除关注的人员！');</script>");
return;

int total = this.lbRight.Items.Count;
int index = 0;
for (int i = 0; i < total; i++)

ListItem item = this.lbRight.Items[index];
if (this.lbRight.Items[index].Selected)

this.lbRight.Items.Remove(item);
index--; //listbox删除一行后，后面的一行将自动移上去
this.lbLeft.Items.Add(item);

index++;

呵呵！我解决了。和你们写的不一样。可能是太累了头发昏的原因。迷茫了。就那么简单的问题。唉。看来以后还是要注意适当休息。我是这么弄的，在页面上加了个label 然后CS里面这样做的：
protected void Page_Load(object sender, EventArgs e)

if (!this.IsPostBack)

dbBind();
dbBind2();

if (Request.Params["lbLeftHidden"] != null && (string)Request.Params["lbLeftHidden"] == "doubleclicked")

doubleLeft();

if (Request.Params["lbRightHidden"] != null && (string)Request.Params["lbRightHidden"] == "doubleclicked")

doubleRight();

不过还是谢谢你们了，毕竟你们很热情的帮忙了！

首先你的代码和楼上的，都可以实现你的目的，但是这是通过页面不断提交来实现的，页面不断刷新，对用户的影响是很大的，用户看到你的页面不断在闪，体验很差，而且如果网络延迟比较大，这个刷新的速度也很慢

一般你的这个要求，最好使用javascript来实现，我按你的想法，做了一个页面，你可以试试，这个页面上有按钮，也可以通过双击实现，代码如下：
只有aspx页面的代码，没有cs代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Top.aspx.cs" Inherits="FFCS.EIS.WorkFlow.Top" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<script type="text/javascript">
function Sw(flg)
var source, target;
switch (flg)
case 1:
case 2:
source = document.getElementById("l1");
target = document.getElementById("l2");
break;
case 3:
case 4:
source = document.getElementById("l2");
target = document.getElementById("l1");
break;

for (var i = source.options.length - 1; i >= 0; i--)
var opn = source.options[i];
if (flg == 1 || flg == 4 || opn.selected)
AddOption(target, opn.innerText, opn.value);
opn.parentNode.removeChild(opn);

function AddOption(lst, txt, val)
var oOption = document.createElement("OPTION");
lst.options.add(oOption);
oOption.innerText = txt;
oOption.value = val;
return oOption;

</script>
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td style="width:100px; text-align:center;">
<asp:ListBox ID="l1" runat="server" ondblclick="Sw(2);">
<asp:ListItem Text="1"></asp:ListItem>
<asp:ListItem Text="2"></asp:ListItem>
<asp:ListItem Text="3"></asp:ListItem>
</asp:ListBox>
</td>
<td style="vertical-align:middle;">
<input type="button" value=">|" onclick="Sw(1);" /><br />
<input type="button" value=">" onclick="Sw(2);" /><br /><br />
<input type="button" value="<" onclick="Sw(3);" /><br />
<input type="button" value="|<" onclick="Sw(4);" /><br />
</td>
<td style="width:100px; text-align:center;">
<asp:ListBox ID="l2" runat="server" ondblclick="Sw(3);">
</asp:ListBox>
</td>
</tr>
</table>
</div>
</form>
</body>
</html> 参考技术A 首先,把你的代码集合到一个方法中:
protected void initListBox()

if (ListBox1.SelectedIndex <= -1)//判断是否有选中的项，如果没有，则弹出对话框并返回

Response.Write("<script>alert('请选择要添加关注的人员！');</script>");
return;

int index = 0;
for (int i = 0; i < this.ListBox1.Items.Count; i++)

if ((this.ListBox1.Items[i].Selected) && (this.ListBox2.Items.FindByValue(this.ListBox1.Items[i].Value) == null))

ListItem item = ListBox1.Items[i];
this.ListBox1.Items.Remove(item);
index--;
this.ListBox2.Items.Add(item);

if (ListBox2.SelectedIndex <= -1)//判断是否有选中的项，如果没有，则弹出对话框并返回

Response.Write("<script>alert('请选择要删除关注的人员！');</script>");
return;

int total = this.ListBox2.Items.Count;
for (int i = 0; i < total; i++)

ListItem item = this.ListBox2.Items[index];
if (this.ListBox2.Items[index].Selected)

this.ListBox2.Items.Remove(item);
index--; //listbox删除一行后，后面的一行将自动移上去
this.ListBox1.Items.Add(item);

index++;

然后在page_load里加:
if (!IsPostBack)

initListBox();
ListBox1.Attributes.Add("ondblclick", "ChangeItem('" + ListBox1.ClientID + "','" + ListBox2.ClientID + "')");
ListBox2.Attributes.Add("ondblclick", "ChangeItem('" + ListBox2.ClientID + "','" + ListBox1.ClientID + "')");

最后在aspx里加JS处理方法:
<script>
function ChangeItem(l1,l2)

var cc = document.getElementById(l1).options[window.document.getElementById(l1).selectedIndex].value;
var dd = document.getElementById(l1).options[window.document.getElementById(l1).selectedIndex].text;
//alert(dd + ":" + cc);
document.getElementById(l1).options.remove(window.document.getElementById(l1).selectedIndex);
var op = new Option(dd,cc,false,false);
document.getElementById(l2).options.add(op);

</script>
我已经调试过,完全符合你的要求本回答被提问者采纳参考技术B 首先,把你的代码集合到一个方法中:
protected
void
initListBox()

if
(ListBox1.SelectedIndex
<=
-1)//判断是否有选中的项，如果没有，则弹出对话框并返回

Response.Write("<script>alert('请选择要添加关注的人员!');</script>");
return;

int
index
=
0;
for
(int
i
=
0;
i
<
this.ListBox1.Items.Count;
i++)

if
((this.ListBox1.Items[i].Selected)
&&
(this.ListBox2.Items.FindByValue(this.ListBox1.Items[i].Value)
==
null))

ListItem
item
=
ListBox1.Items[i];
this.ListBox1.Items.Remove(item);
index--;
this.ListBox2.Items.Add(item);

if
(ListBox2.SelectedIndex
<=
-1)//判断是否有选中的项，如果没有，则弹出对话框并返回

Response.Write("<script>alert('请选择要删除关注的人员!');</script>");
return;

int
total
=
this.ListBox2.Items.Count;
for
(int
i
=
0;
i
<
total;
i++)

ListItem
item
=
this.ListBox2.Items[index];
if
(this.ListBox2.Items[index].Selected)

this.ListBox2.Items.Remove(item);
index--;
//listbox删除一行后，后面的一行将自动移上去
this.ListBox1.Items.Add(item);

index++;

然后在page_load里加:
if
(!IsPostBack)

initListBox();
ListBox1.Attributes.Add("ondblclick",
"ChangeItem('"
+
ListBox1.ClientID
+
"','"
+
ListBox2.ClientID
+
"')");
ListBox2.Attributes.Add("ondblclick",
"ChangeItem('"
+
ListBox2.ClientID
+
"','"
+
ListBox1.ClientID
+
"')");

最后在aspx里加JS处理方法:
<script>
function
ChangeItem(l1,l2)

var
cc
=
document.getElementById(l1).options[window.document.getElementById(l1).selectedIndex].value;
var
dd
=
document.getElementById(l1).options[window.document.getElementById(l1).selectedIndex].text;
//alert(dd
+
":"
+
cc);
document.getElementById(l1).options.remove(window.document.getElementById(l1).selectedIndex);
var
op
=
new
Option(dd,cc,false,false);
document.getElementById(l2).options.add(op);

</script>
我已经调试过,完全符合你的要求参考技术C 我来补充一下：在JS方法里加个判断就更好了if(document.getElementById(l1).selectedIndex > -1)，如果不加这个判断，如果listbox没有选中项会出现脚本错误

从 DoubleClick、Web 应用程序而非 Windows 窗体上的 ListBox 获取选定值

【中文标题】从 DoubleClick、Web 应用程序而非 Windows 窗体上的 ListBox 获取选定值【英文标题】：Getting Selected Value from ListBox on DoubleClick, Web App, Not Windows Forms 【发布时间】：2020-12-16 15:46:29 【问题描述】：

我有一个带有 C# 代码的 ASP.Net 网站。我试图从 asp.net 列表框中双击获取选定的值。我看到的所有解决方案都是针对 Windows 窗体的，实际上是否存在 Doubleclick 事件。 ListBox 的 System.Web.UI.WebControls 版本没有这样的运气。

需要双击来触发后面代码中的一个方法，该方法允许我读取所选值。

有很多关于这方面的帖子，但它们不适用于 System.Web.UI.WebControls.ListBox。

以下是代码示例：

.aspx 页面：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="XXX-AddressBook.aspx.cs" EnableViewState="true" Inherits="VRV_AddressBook" %>

<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

    <%-- <meta http-equiv="X-UA-Compatible" content="IE=7, chrome=1"/>--%>
    <meta http-equiv="x-ua-compatible" content="IE=edge" />
    <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Pragma" content="no-cache">

<style>
</style>

<script type="text/javascript">
</SCRIPT>

    <title> Address Book</title>
</head>
<form id="frmAddressBook" runat="server">
<div>
<asp:ListBox ID="lstbxddNames" runat="server"  Rows="17" SelectionMode="Multiple"></asp:ListBox>
</div>
</form>

</body>
</html>

来自.aspx.cs页面的Proposed Method，由于Web App版本没有双击动作，无法触发：

private void lstbxddNames_DoubleClick(object sender, System.EventArgs e)

    if (lstbxddNames.Items.Count > 0)
    
        for (int i = 0; i < lstbxddNames.Items.Count; i++)
        
            if (lstbxddNames.Items[i].Selected)
            

                string Test = lstbxddNames.Items[i].Value.ToString();

这是我加载 ListBox 的方式：

DataTable dt_UserRS = new DataTable();

然后我从 SQL 查询中加载数据表的内容（代码未显示）

    if (Choice.ToUpper() == "GLOBAL")
    
        lstbxddNames.DataSource = dt_UserRS;
        lstbxddNames.DataTextField = "Name";
        lstbxddNames.DataValueField = "Email";
        lstbxddNames.DataBind();

这是我正在使用的解决方案。我实际上在发布之前尝试过这个，但是我把它放在了 PageLoad 中的错误位置（我把它错误地放在了 if (!IsPostBack) 部分）。

  protected void Page_Load(object sender, EventArgs e)
        

            if (Request["__EVENTARGUMENT"] != null && Request["__EVENTARGUMENT"] == "lstdbclick")
            
                lstbxddNames_DoubleClick(lstbxddNames.SelectedValue.ToString());

              //  string TEST = lstbxddNames.SelectedValue.ToString();
            
            lstbxddNames.Attributes.Add("ondblclick", ClientScript.GetPostBackEventReference(lstbxddNames, "lstdbclick"));

            if (!IsPostBack)
            
                ViewState["ViewStateId"] = System.Guid.NewGuid().ToString(); //PART OF PAGE REFRESH DETECTION
                Session["SessionId"] = ViewState["ViewStateId"].ToString();

确保它也能命中方法：

private void lstbxddNames_DoubleClick(string Value)

    if (!String.IsNullOrEmpty(Value))
    

        string Test = Value;

这里发生了什么？我不明白的一件事是为什么要添加属性？如果我可以检测到带有事件参数的双击，为什么要添加属性？

【问题讨论】：

双击什么？听起来是javascript 的好候选人双击列表框中的项目。我不擅长 Javascript，因此使用 C# 解决方案。如果您可以为我制作 Javascript 解决方案白痴证明，我将欢迎您的帮助！向我提供列表框的html 标记，我可以做到。 "需要双击来触发后面代码中的方法..." 您不需要需要 dbl-clk 来触发方法。只需单击一下即可。它是一个多选列表框。如果用户选择了多个项目，第一次单击将在选择其余项目之前触发。 【参考方案1】：

在您的列表框循环中，您可以将双击事件连接到每个项目。例如

 item.Attributes.Add("ondblclick", "functionCall();");

【讨论】：

不确定我是否理解。 Listbox 循环必须通过双击触发才能启动代码。 ListBox 没有“双击”操作。供参考：docs.microsoft.com/en-us/dotnet/api/… Jobesk- 你的意思是当我填充列表框时？你是说我可以添加那个属性吗？（即使 DoubleClick 没有原生操作？）您想在列表框本身或其项目上创建双击操作？两种方式都可以，只需在运行时相应地添加属性即可。它的项目。如何在运行时添加属性以及在代码中的什么位置添加它？

以上是关于ASP.NET中，使用两个ListBox双击实现左右移动的主要内容，如果未能解决你的问题，请参考以下文章

关于ASP.NET中ListBox的SelectIndex问题!

asp.net中我不想按ctrl键多选listbox项

在 asp.net webform 中比较和删除列表框中的项目

C# ASP.Net - ListBox - onSelectedIndexChanged 导致错误

vb.net如何在listbox中增加双击事件?

在 Javascript 中以自然方式添加后，我无法在 asp.net 中获取 Listbox 的值