Webforms: dynamisch in JavaScript-Option zu einer Dropdown-Liste hinzufügen

Question

Ich entwickle eine asp.net Webforms-Anwendung. Meine Seite besteht aus 2 Dropdown-Listen.
Bei jeder Auswahl auf ddl1, möchte ich dynamisch über Javascript das ausgewählte Element von ddl1 zu ddl2 hinzufügen. Beim ersten Laden der Seite besteht ddl1 standardmäßig aus 3 Elementen (a, b, c) und ddl2 besteht nur aus einem Element (a).

<script> 
function ddl1_handler() 
{ 
    var ddl2 = document.getElementById("ddl2"); 
    var newOption = document.createElement("option"); 
    newOption.text = document.getElementById("ddl1").value; 
    newOption.value = document.getElementById("ddl1").value; 
    ddl2.add(option); 
} 
</script> 

<asp:DropDownList ID="ddl1" runat="server" ClientIDMode="Static" onChange="ddl1_handler()"> 
</asp:DropDownList> 
<asp:DropDownList ID="ddl2" runat="server" ClientIDMode="Static"> 
</asp:DropDownList> 
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click"/> 

Das ist mein code_behind Code:

private List<string> choices = new List<string>() { "a", "b", "c"}; 

protected override void Render(HtmlTextWriter writer) 
{ 
    foreach (var choice in choices) 
    { 
     Page.ClientScript.RegisterForEventValidation(ddl2.UniqueID, choice); 
    } 
    base.Render(writer); 
} 

protected void Page_Load(object sender, EventArgs e) 
{ 
    if (!this.IsPostBack) 
    { 
     this.ddl1.Items.Clear(); 
     foreach (var choice in choices) 
     { 
     this.ddl1.Items.Add(new ListItem(){ Text = choice, Value = choice}); 
     } 

     this.ddl2.Items.Clear(); 
     this.ddl2.Items.Add(new ListItem(){ Text = choices.First(), Value = choices.First()}); 
    } 
} 

protected void Button1_Click(object sender, EventArgs e) 
{ 
     var selectedValue = this.ddl2.selectedValue; 

} 

Mit dem folgenden Code, wenn ich zum ersten Mal meiner Seite laden, mein DDL1 besteht aus a, b, c und meine DDL2 ist aus a. Ich wähle dann b auf meinem ddl1, dieses Element wird zu meinem ddl2 hinzugefügt. Ich wähle dieses Element auf meiner ddl2 und klicke dann auf meine Schaltfläche. Aber wenn ich auf meinem button1_click-Handler ankomme, ist mein ausgewählter Wert immer noch ein, ich verstehe nicht.

Answer 1

Die Elemente, die in den clientseitigen Code eingefügt werden, werden in Code-behind nicht beibehalten. Sie könnten eine mechanism involving hidden fields einrichten, um den Wert zurück zu bekommen, aber ich denke, die einfachste Lösung ist, das Element in Code-Behind hinzuzufügen und ein UpdatePanel zu verwenden, um die gesamte Seite nicht zu aktualisieren.

Hier ist, wie es verwendet werden könnte, das zeigt, wie das Update von einer Steuer innerhalb oder außerhalb der Platte ausgelöst werden: ChildrenAsTriggers des Update

<asp:ScriptManager ID="scriptManager1" runat="server"> 
</asp:ScriptManager> 
... 
<asp:UpdatePanel runat="server" UpdateMode="Conditional"> 
    <ContentTemplate> 
     <asp:DropDownList ID="ddl1" runat="server" AutoPostBack="true" onselectedindexchanged="ddl_SelectedIndexChanged" /> 
     <asp:DropDownList ID="ddl2" runat="server" /> 
    </ContentTemplate> 
    <Triggers> 
     <asp:AsyncPostBackTrigger ControlID="ddl3" EventName="SelectedIndexChanged" /> 
    </Triggers> 
</asp:UpdatePanel> 
<asp:DropDownList ID="ddl3" runat="server" AutoPostBack="true" onselectedindexchanged="ddl_SelectedIndexChanged" /> 

Da die Eigenschaft true ist standardmäßig eine Auswahl In ddl1 wird das Panel aktualisiert. Auf der anderen Seite wird ddl3 einen ähnlichen Effekt haben, weil es als Auslöser des UpdatePanels registriert ist.

protected void ddl_SelectedIndexChanged(object sender, EventArgs e) 
{ 
    DropDownList ddl = sender as DropDownList; 
    ListItem item = ddl.SelectedItem; 
    ddl2.Items.Add(new ListItem(item.Text, item.Value)); 
    ddl.Focus(); 
} 

Bitte beachten Sie, dass ClientIDMode="Static" wurde, seit es mit Update gut mischte nicht entfernt:

Die folgenden Ereignishandler konnten sowohl durch ddl1 und ddl3 verwendet werden.

Ich habe die ScriptManager-Deklaration als Erinnerung in das Markup aufgenommen, da dies bei der Verwendung von UpdatePanels erforderlich ist.