Wie die Rückkehr aus einer Json-label/Wert-paar von C# - Controller-Aktion für jQuery AutoComplete

Brauche ich zum erstellen eines jQuery-Autocomplete-textbox, bekommt eine Liste mit Namen aus der DB, und wenn ausgewählt, sendet der Benutzer auf die entsprechende Seite verlinken.

Ich versuche, etwas zu tun, genau wie dieser post: Brand einer controller-action von einem jQuery-Autocomplete-Auswahl

Die Lösung macht Sinn, und die klicken und die Umleitung funktioniert, aber ich weiß nicht, wie die Rückkehr der mehr als nur eine string-Liste von Namen.

Aktuellen controller-code (Codeausschnitt):

        List<string> Names = new List<string>();
        foreach (Child c in listfromDB)
        {
            Names.Add(c.Name);
            //childNames.Add(new KeyValuePair<string, int>(c.Name, c.ID));
        }
        return Json(Names);

Den KeyValuePair schien nicht zu funktionieren. Wie erstelle ich ein object-array statt?

Mein jQuery-code:

$(document).ready(function () {
$("#find-child-box").autocomplete({
source: function (request, response) {
    //define a function to call your Action (assuming UserController)
    $.ajax({
        url: '/Admin/AutoCompleteMyChildren', type: "POST", dataType: "json",

        //query will be the param used by your action method
        data: { query: request.term },
        success: function (data) {
            response($.map(data, function (item) {
                return { label: item, value: item };
            }))
        }
    })
},
minLength: 1, //require at least one character from the user
select: function(event, ui) {
alert('mom');
    window.location.href = ui.item.value;
}
}); 
});
  • Was willst du den zurück, wenn nicht eine Liste<string>?
  • Ich möchte Json zurückgeben, dass die Autocomplete-plugin akzeptiert, so dass ich ein string (Name) und leiten den Benutzer auf der Basis der ID (int).
InformationsquelleAutor scojomodena | 2012-09-27
  1. 7

    Eigentlich, AutoVervollständigen funktioniert gut mit einer Quelle, die gibt nur ein array von strings. Dies sollte funktionieren gut für Sie, ohne änderungen an Ihren controller-action:

    JavaScript:

    $(document).ready(function () {
    $("#find-child-box").autocomplete({
        source: function (request, response) {
            //define a function to call your Action (assuming UserController)
            $.ajax({
                url: '/Admin/AutoCompleteMyChildren', 
                type: "POST", 
                dataType: "json",
                //query will be the param used by your action method
                data: { query: request.term },
                success: response
            });
        },
        minLength: 1, //require at least one character from the user
        select: function(event, ui) {
            alert(ui.item.ID);
            window.location.href = ui.item.value;
        }
    }); 
});

    Überprüfen Sie die Registerkarte übersicht des jQueryUI AutoVervollständigen, um zu sehen, welche Art von Daten das widget erwartet.

    Pro Ihren Kommentar:

    Als @Alex deutet an, Sie haben Sie zu ändern, die Daten der controller-Aktion. Könnten Sie das richtige Objekt-array mit so etwas wie:

    return Json(listfromDB.Select(c => new { label = c.Name, ID = c.ID }));

    Sollte erzeugt JSON so Aussehen:

    [{ label: 'Scott', ID: '1234' }, ...]

    Die AutoVervollständigen verwenden können, richtig. Dann, zu jeder Zeit ui.item zur Verfügung innerhalb des autocomplete-Ereignis-Handler (select zum Beispiel), Sie sollten in der Lage sein, um Zugriff ui.item.ID.

    • ja, das ist wahr, allerdings möchte ich nicht verwenden Sie die Zeichenfolge für das markieren, aber die id. Das bedeutet, dass ich nicht mehr nur ein string-array. Also, warum brauche ich, um die Aktion zu ändern, und bekommen die jQuery-um den Namen zu übernehmen / ID pair.
    • Okay, das macht mehr Sinn. Ich werde aktualisieren, meine Antwort kurz.
    • Bitte lassen Sie mich wissen, wenn das update hilft.
    • Der controller-code macht Sinn, aber der "Erfolg" nicht auch gefeuert zu werden, jetzt. Ich habe überprüft, dass der controller gibt 3 Punkte. Was muss ich ändern, auf der jQuery-Seite der Dinge, damit es funktioniert?
    • Hmm, gibt es irgendwelche JavaScript-Fehler auf der Seite? Was ist, wenn Sie success: function (data) { console.log('success'); response(data); }, sehen Sie die Nachricht protokolliert?
    • Süß! Das hat geklappt. Für einige Grund, die zusätzlichen Dinge, die es tut, verursacht es zu brechen. Ich entfernte den bisherigen success Teil mit success: function (data) { response(data); } - und es funktionierte! Ich dachte, es würde die Anzeige der ID, sowie name, aber das ist es nicht. Danke!

    InformationsquelleAutor Andrew Whitaker
  2. 1

    Versuchen, erstellen einer Liste, in der Ihre Kind geben

    List<Child> children = new List<Child>();

 foreach (Child c in listfromDB)
{

      children.Add(c);

}

 return Json(children);

    Werden Sie wahrscheinlich benötigen, ot revist Ihr aus dem Ende-code als Json wird anders sein.

    Wenn Sie nicht möchten, dass alle Eigenschaften des Kindes aus der DB , dann erstellen Sie eine benutzerdefinierte Klasse, und fügen Sie, was Sie wollen.

    class CustomChild{

   public string Name {get; set;}
   public int ID { get; set ;}


}

List<CustomChild> children = new List<CustomChild>();

 foreach (Child c in listfromDB)
{

      children.Add(new CustomChild{ Name = c.Name, ID = c.ID} );

}

    Möglicherweise müssen Sie massage die syntax, um es zu arbeiten, oder fügen Sie einige Referenzen. Ich ermutige Sie, schauen Sie in LINQ.

    • Ich Tat wie Sie vorgeschlagen, aber der jQuery code ist nicht mehr ausgelöst. Muss ich zum ändern der Antwort-Funktion irgendwie? Danke.
    • Habe ich erwähnt, dass Sie möglicherweise anpassen müssen, um die front-end-code, aber ich mispelled front von....
    • Chrome dev tool net panel Nd Konsole, um zu sehen, was der json aussieht und warum die JavaScript-Funktion wird nicht gefeuert .
    • In der JavaScript-Sie müssen auf die Eigenschaft der einzelnen Datenelemente....
    InformationsquelleAutor Alex
Schreibe einen Kommentar