Verwenden von Datenbindung zum Auffüllen eines HtmlSelect mit optgroup Elemente in asp.net

Question

Ich benutze asp.net und habe ein Element auf meiner Seite (mit runat="server"). Normalerweise werde ich nur die DataSource auf einige geladene Daten und DataBind setzen. In diesem Fall haben die Daten jedoch eine Hierarchieebene und ich möchte dies im HTML mit einer optgroup darstellen. Google hat keine Freude gefunden - ist das überhaupt möglich?

Answer 1

Ich habe nach der gleichen Sache gesucht, und es sieht nicht aus wie ASP unterstützt dies nativ. Eine Google-Suche fand jemanden, der eine Bibliothek bei http://www.codeplex.com/SharpPieces empfahl, aber ich habe es nie benutzt und ich weiß nicht, wie gut es ist. Andere Leute reden darüber, einen eigenen Renderer für die optgroup-Unterstützung zu schreiben.

Answer 2

Ich hatte ein ähnliches Problem zu lösen und das ist, wie ich es getan habe. Bevor ich fortfahre, habe ich alle Arten von Refraktormethoden für Listen gefunden, die wahrscheinlich funktionieren. Ich denke jedoch nicht, dass dies der beste Weg für meine Lösung ist. Hier ist, was ich getan habe:

Ich musste auch wissen, welche Option ein Benutzer in der Dropdown-Liste ausgewählt, aber festgestellt, dass Sie Dropdown-Liste mit Optionsgruppen in ASP.net nicht erstellen können. Um dies zu tun, habe ich einfach eine einfache <select> mit <optgroup> 's und <option>' s in jeder Gruppe gebaut. Dann legte ich eine <div> mit einer versteckten Textbox, die runat="server" gesetzt hatte. Ich setze das "onchange" Ereignis auf der Auswahl, um den Textwert der versteckten Textbox auf den Wert zu ändern, den die Option war, die vom Benutzer mit Javascript ausgewählt wurde. Dann, wenn der Post zurück auftritt, hatte der Code hinter Zugriff auf den Wert, den der Benutzer ausgewählt hat, über die verborgene Textbox runat="server". Problem gelöst! Der Code sieht etwa so aus:

-Code im HTML (aspx):

<div id="selectDiv"> 
    <select id="selectItems" onchange="document.getElementById('hiddenselectDiv').getElementsByTagName('input')[0].value = this.options[this.selectedIndex].value;"> 
     <optgroup label="Johannesburg"> 
      <option value="Wilropark">Wilropark</option> 
      <option value="Bryanpark">Bryanpark</option> 
      <option value="Hurlingham">Hurlingham</option> 
      <option value="Midrand ">Midrand </option> 
      <option value="Glenvista">Glenvista</option> 
      <option value="Sunninghill">Sunninghill</option> 
      <option value="Edenvale ">Edenvale </option> 
      <option value="Parkhurst">Parkhurst</option> 
     </optgroup> 
     <optgroup label="Cape Town"> 
      <option value="Tokai">Tokai</option> 
      <option value="Durbanville">Durbanville</option> 
     </optgroup> 
     <optgroup label="Durban"> 
      <option value="Musgrave">Musgrave</option> 
     </optgroup> 
     <optgroup label="Pretoria"> 
      <option value="Hatfield">Hatfield</option> 
     </optgroup> 
    </select> 
</div> 
<div id="hiddenSelectDiv"> 
    <!-- 
    Note: You probably want to set the hidden value to the first item you have seleced when you build the <select> object. 
    --> 
    <input type="hidden" id="selectedItem" value="Wilropark"> 
</div> 

Im Code hinter (C#):

if (!string.IsNullOrEmpty(selectedItem.Value)) 
{ 
    //validation or whatever you want.... 
}