Postback ohne AutoPostBack

Question

Ich habe ein WebForm mit zwei Dropdown-Listen, wobei der Inhalt der zweiten von der ersten abhängt.

Also, wenn der Benutzer die Kategorie ändert, muss die zweiten Dropdown-Fenster mit der Liste der Unterkategorien gefüllt werden.

Das klingt wie ein typischer Job für AutoPostBack.
Allerdings gibt es ein kleines Problem mit AutoPostBack: Wenn die Liste nicht offen gelassen wird, und der Benutzer die Tastatur verwendet, um die Auswahl zu treffen, geschieht das Postback direkt nach dem ersten Tastendruck. Dies verhindert, dass der Benutzer die Liste mit dem Pfeil nach unten scrollen oder den Namen der Kategorie eingeben kann.

Dies geschieht in Chrome und IE und Opera, aber nicht in Firefox. Firefox löst das Ereignis onchange nur aus, wenn das Steuerelement verlassen wird (Tabbing zum nächsten Steuerelement), genau wie wenn die Liste geöffnet wurde, und das möchte ich auch von den anderen Browsern.

Irgendwelche Lösungen, wie ich das erreichen kann?

Ich habe versucht, das AutoPostBack Attribut zu entfernen und onblur zu verwenden, aber anscheinend funktioniert die Seite mit AutoPostBack anders als ohne, weil die Browser anfangen, sich über Javascriptfehler zu beschweren.

Jetzt sind wir alle so gern jsFiddle, here's one. Es tut eigentlich nichts, aber es kann das Problem demonstrieren. Klicken Sie auf das erste Dropdown und dann erneut auf, um die Liste zu schließen. (Dies geschieht, wenn Sie mit der Tabulatortaste durch das Formular navigieren: Dropdown-Listen öffnen sich nicht.) Geben Sie nun einen Buchstaben oder den Abwärtspfeil ein. Firefox ändert die aktuelle Auswahl und wartet darauf, dass Sie etwas anderes tun, aber Chrome und IE und Opera versuchen alle, das Formular sofort zu senden, mit drastischen Ergebnissen.

Also, wie kann ich das vermeiden? Beachten Sie, dass ein einfaches Ändern der Fiddle möglicherweise nicht ausreicht, sondern in eine ASP.NET-Lösung übersetzt werden muss.

Answer 1

Hier ist, wie ich es tun würde, indem Sie Ajax verwenden und vermeiden Sie die Verwendung von AutoPostback alle zusammen, um meine Unterkategorie zu füllen.

Erstellen Sie ein Objekt, das das JSON-Objekt der Auswahlliste darstellt, das zurückgesendet werden soll.

public class SelectItem 
    { 
     public string Id { get; set; } 
     public string Text { get; set; } 
    } 

Erstellen Sie dann ein Pagemethod:

[WebMethod] 
    public static List<SelectItem> GetSubCategories(string Id) 
    { 
     // Returning dummy data for demo purposes 
     var subCats = new List<SelectItem>(); 

     if (Id == "1") 
     { 
      subCats.Add(new SelectItem { Id = "1", Text = "1 Subs"}); 
     } 
     else if (Id == "2") 
     { 
      subCats.Add(new SelectItem { Id = "2", Text = "2 Subs"}); 
     } 

     return subCats; 
    } 

ein Skript-Manager hinzufügen und EnablePageMethods d

<asp:ScriptManager runat="server" EnablePageMethods="true"> 
</asp:ScriptManager> 

Ihre Dropdown-Listen ändern verwenden ClientIDMode="Static"

<asp:DropDownList Id="ddlCategory" runat="server" ClientIDMode="Static"> 
    <asp:ListItem Value ="1" Text ="One"></asp:ListItem> 
    <asp:ListItem Value ="2" Text ="Two"></asp:ListItem> 
</asp:DropDownList> 

<asp:DropDownList Id="ddlSubCategory" runat="server" ClientIDMode="Static"> 
</asp:DropDownList> 

Dann verwenden Sie die folgende jQuery:

<script type="text/javascript"> 
    $(function() { 

     var $cat = $('#ddlCategory'); 

     $cat.click(function() { 

      var catId = $cat.val(); 

      $.ajax({ 
       type: "POST", 
       url: "Default.aspx/GetSubCategories", 
       data: "{ Id: " + catId + " }", 
       contentType: "application/json; charset=utf-8", 
       dataType: "json", 
       success: function (msg) { 

        var subs = msg.d; 
        // empty selection 
        var $ddlSubCategory = $('#ddlSubCategory'); 
        $ddlSubCategory.empty(); 

        $.each(subs, function (index, sub) { 
         $ddlSubCategory.append($('<option/>', { 
          value: sub.Id, 
          text: sub.Text 
         })); 
        }); 

       } 
      }); 
     }); 

    }); 

</script>