在asp.net中将项目从一个列表框拖放到另一个列表框中

本文关键字：列表 一个 拖放 另一个 net asp 项目 | 更新日期: 2023-09-27 18:14:36

我想在我的表单中使用jquery UI的拖放功能。我绑定了数据库中的第一个lisbox项。我想要的是将项目从列表1拖到列表2。我尝试了下面的代码来实现它，我无法实现。请帮我解决这个问题。

<script type="text/javascript">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  $(function () {
        $("#list1, #list2").sortable({
            connectWith: ".connectedSortable"
        }).disableSelection();
    });
</script>
   <style>
      #list1, #list2 {
      border: 1px solid #eee;
      width: 142px;
      min-height: 20px;
      list-style-type: none;
      margin: 0;
     padding: 5px 0 0 0;
     float: left;
     margin-right: 10px;
    }
   #list1li, #list2 li {
   margin: 0 5px 5px 5px;
   padding: 5px;
   font-size: 1.2em;
   width: 120px;
   }


<asp:ListBox ID="list1" runat="server" Height="300px" Width="250px" class="connectedSortable"></asp:ListBox>
<asp:ListBox ID="list2" runat="server" Height="300px" Width="250px" class="connectedSortable"></asp:ListBox>

绑定list1列表框控件的后面代码

public void BindListbox()
{
    SqlConnection con = new SqlConnection(constr);
    SqlCommand cmd = new SqlCommand();
    cmd.CommandType = CommandType.StoredProcedure;
    cmd.CommandText = "[get_names]";
    cmd.Connection = con;
    try
    {
        con.Open();
        list1.DataSource = cmd.ExecuteReader();
        list1.DataTextField = "Antibiotic";
        list1.DataValueField = "AntibioticId";
        list1.DataBind();
    }
    catch (Exception ex)
    {
        Response.Write("Error occured: " + ex.Message.ToString());
    }
    finally
    {
        con.Close();
        con.Dispose();
    }
}

在asp.net中将项目从一个列表框拖放到另一个列表框中

NET可能会在呈现HTML时更改ListBox的ID。你有两个选择。

修改你的javascript。注意:如果你最终将javascript移到外部文件，这将不起作用。

  $(function () {
        $("#<%= list1.ClientID %>, # <%= list2.ClientID %>").sortable({
            connectWith: ".connectedSortable"
        }).disableSelection();
    });

或者在ListBox上设置以下属性:ClientIDMode="static"，如下所示:

<asp:ListBox ID="list1" runat="server" ClientIDMode="Static" Height="300px" Width="250px" class="connectedSortable"></asp:ListBox>

这将迫使ASPNET以按照在服务器控件中定义的方式设置ID。

using System.Collections;

后面代码中的

保护无效Page_Load(对象发送者，EventArgs e)

{

}

//btn1_Click事件用于将单个或多个项目从Listbox1移动到Listbox2

protected void btn1_Click(object sender, EventArgs e)

{

lbltxt.Visible = false;
if (ListBox1.SelectedIndex >= 0)
{
    for (int i = 0; i < ListBox1.Items.Count; i++)
    {
        if (ListBox1.Items[i].Selected)
        {
            if (!arraylist1.Contains(ListBox1.Items[i]))
            {
                arraylist1.Add(ListBox1.Items[i]);
            }
        }
    }
    for (int i = 0; i < arraylist1.Count; i++)
    {
        if (!ListBox2.Items.Contains(((ListItem)arraylist1[i])))
        {
            ListBox2.Items.Add(((ListItem)arraylist1[i]));
        }
        ListBox1.Items.Remove(((ListItem)arraylist1[i]));
    }
    ListBox2.SelectedIndex = -1;
}
else
{
    lbltxt.Visible = true;
    lbltxt.Text = "Please select atleast one in Listbox1 to move";
}

}

//btn2_Click事件用于将所有项目从Listbox1移动到Listbox2

protected void btn2_Click(object sender, EventArgs e)

{

lbltxt.Visible = false;
while(ListBox1.Items.Count!=0)
{
    for(int i=0;i<ListBox1.Items.Count;i++)
    {
        ListBox2.Items.Add(ListBox1.Items[i]);
        ListBox1.Items.Remove(ListBox1.Items[i]);
    }
}

}

//btn3_Click事件用于将单个或多个项目从Listbox2移动到Listbox1

protected void btn3_Click(object sender, EventArgs e)

{

lbltxt.Visible = false;
if (ListBox2.SelectedIndex >= 0)
{
    for (int i = 0; i < ListBox2.Items.Count; i++)
    {
        if (ListBox2.Items[i].Selected)
        {
            if (!arraylist2.Contains(ListBox2.Items[i]))
            {
                arraylist2.Add(ListBox2.Items[i]);
            }
        }
    }
    for (int i = 0; i < arraylist2.Count; i++)
    {
        if (!ListBox1.Items.Contains(((ListItem)arraylist2[i])))
        {
            ListBox1.Items.Add(((ListItem)arraylist2[i]));
        }
        ListBox2.Items.Remove(((ListItem)arraylist2[i]));
    }
    ListBox1.SelectedIndex = -1;
}
else
{
    lbltxt.Visible = true;
    lbltxt.Text = "Please select atleast one in Listbox2 to move";
}

}

//btn4_Click事件用于将所有项目从Listbox2移动到Listbox1

protected void btn4_Click(object sender, EventArgs e)

{

lbltxt.Visible = false;
while (ListBox2.Items.Count != 0)
{
    for (int i = 0; i < ListBox2.Items.Count; i++)
    {
        ListBox1.Items.Add(ListBox2.Items[i]);
        ListBox2.Items.Remove(ListBox2.Items[i]);
    }
}

}

相关文章：