將項目從一個列表框拖放到asp.net中的另一個列表框

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

呈現HTML時，ASP.NET可能會更改您的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（）;

受保護的void Page_Load（對象發送者，EventArgs e）

{

}

// btn1_Click事件用於將單個或多個項目從Listbox1移動到Listbox2

受保護的無效btn1_Click（對象發送者，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

受保護的無效btn2_Click（對象發送者，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

受保護的無效btn3_Click（對象發送者，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事件用於將所有項目從列表框2移動到列表框1

受保護的無效btn4_Click（對象發送者，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]);
    }
}

}