在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> 

後面的代碼綁定列表1 ListBox控件

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「靜」，像這樣：

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

這將迫使ASP.NET設置ID您在服務器控件定義的方式。

Answer 2

使用系統。集合;

在後面

ArrayList的arraylist1 =新的ArrayList碼（）;

ArrayList arraylist2 = new ArrayList（）;

保護無效的Page_Load（對象發件人，EventArgs的）

{

}

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

保護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

保護無效btn2_Click（對象發件人，EventArgs的）

{

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的）

{

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

}