Question

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

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

Answer 1

ASP.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>

这将强制ASP.NET按照您在服务器控件中定义ID的方式设置ID。

Answer 2

使用System.Collections;

中的代码

ArrayList arraylist1 = new ArrayList（）;

ArrayList arraylist2 = new ArrayList（）;

protected void Page_Load（object sender，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]);
    }
}

}

在asp.net

2 个答案: