2017-03-07 5 views
2

Ich arbeite an meinem AutoComplete-Widget mit Angular JS - Material in C# ASP.NET MVC.Angular Material AutoComplete Keine Ladeoptionen MVC

In diesem Beispiel versuche ich eine AutoComplete von States zu arbeiten. Ich begann mit dieser tutorial, aber müssen die Optionen kommen aus der Datenbank (an dieser Stelle, nur statische Liste der Optionen in der Steuerung).

Hier ist ein link zu meinem aktuellen Code (relevante Dateien).

Wenn ich den Code ausführen, kann ich sehen, dass die Liste der Objekte aus dem Controller richtig durchlaufen - ein Array von 4 Objekten mit jeweils einer ID und einem Namen (wie in meiner Controller-Methode gezeigt). Die Optionen werden jedoch nicht in das Eingabeformular geladen.

Als ich in das Textfeld klicken, erhalte ich eine „Option“, die No states matching "" were found. sagt, wenn ich in ‚a‘ eingeben, ich die „Option“ erhalten, die No states matching "a" were found. sagt Das ist, was ich erwarten würde eigentlich keine war passieren, wenn es übereinstimmende Ergebnisse.

Meine Frage: Wie ändere ich meinen Code, um die Optionen mit dem zu laden, was ich vom Controller ziehe?

Vielen Dank im Voraus!

+0

Hat meine Antwort unten beantwortet? Beantworten Sie Ihre Frage? Brauchst du mehr Hilfe? –

Antwort

0

Hier ist, was ich tat, um das Problem zu beheben:

  1. Changed
  2. Set Variable = Ergebnis POST, kehrte dann die Ergebnisse

Hier ist der Code:

function querySearch(query) { 
    if (query == undefined) { 
    console.log("invalid"); 
    return; 
    } 
    $http({ 
    method: 'POST', 
    url: self.URL_Get + query, 
    searchTerm: query 
    }).then(function(response) { 
    self.states = response.data; 
    }); 
    return self.states; 
} 
+0

Vergessen Sie nicht, Ihre Antwort als "akzeptiert" zu markieren. –

0

Hier ist ein Screenshot der Ergebnisse:

c# angulajs autocomplete angular-material

Hier ist der Schlüssel JavaScript/AngularJS Code:

//TODO: Replace data.json with /Home/GetStates 
$http.get('data.json') 
    .then(function(response) { 
    self.states = response.data.map(function(state) { 
     return { 
     value: state.Name.toLowerCase(), 
     display: state.Name 
     }; 
    }); 
    }); 

Sie benötigen 'data.json' mit '/Home/GetStates' ersetzen Sie, bis Ihr zu nennen Backend MVC JSON RESTful API-Dienst. Beachten Sie, dass ich auch die Funktionen querySearch(query) und createFilterFor(query) an ihrem Platz belassen und self.states=loadStates() in self.states=null geändert habe, da der Dienst $http.get() jetzt die Zustände lädt.

Ich habe Ihren C# MVC Controller-Code getestet und alles sieht gut damit aus.

Hier ist ein funktionierender Plunker, http://plnkr.co/edit/tDC6KcO1O8VSGwVghBo7?p=preview.

Hoffe, das hilft. Lass es mich wissen, wenn du etwas anderes brauchst.