Autouzupełnianie tekstu w polu tekstowym ASP.NET MVC

By | 6 listopada 2015

W ASP.NET WebForms możliwość podpowiadania użytkownikowi wyników podczas wpisywania tekstu jest wbudowany, a w MVC trzeba sobie radzić samemu. To nie znaczy, że w MVC jest gorzej. To znaczy, że w MVC masz większą możliwość zapanowania nad kodem. Aby wprowadzić możliwość autouzupełniania tekstu w polu tekstowym podczas wpisywania, musimy dodać bardzo popularną bibliotekę jQuery i jej rozszerzenie jQuery UI.

Aby dodać obsługę jQuery, musimy dodać do widoków ładowanie biblioteki javascript’owej. Ja osobiście korzystam w swoich projektach z CDN’ów, które są udostępniane przez twórców jQuery. Oczywiście równie dobrze można pobrać plik js i css na swój serwer i z niego serwować klientowi bibliotekę, choć w moim przypadku szybciej pliki biblioteki ładują się z CDN’a.

Do strony w części <head> dodajemy następujące wpisy:

<link href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet">

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>

Dzięki nim będziemy mogli wykonać kod javascript’owy na textbox’ie. Warto je dodać w widoku _Layout.cshtml który jest takim jakby szablonem dla innych widoków, ale jeżeli go nie używasz, to możesz ominąć tę uwagę. Następnie dodajemy pole tekstowe w którym chcemy mieć możliwość uzyskania podpowiedzi:

@Html.TextBox("TestTextBox", null, new { id = "testTextBox" }) // za pomocą wbudowanego helpera ASP.NET MVC


<input type=text name="TestTextBox" id="testTextBox"> // tak jak w czystym html

Gdy już mamy pola tekstowe, musimy dodać kod javascript, który doda funkcjonalność autocomplete:

<script>
 $(function () {
 $("#testTextBox").autocomplete({ source: '@Url.Action("GetTestList")', minLength: 1 });
 });
 </script>

$(„#testTextBox”) – szukamy elementu o podanym id

.autocomplete( – wykonujemy jQuery’ową funkcję

{ source: ‚@Url.Action(„GetTestList”)’ – podajemy skąd ma czerpać dane funkcja autocomplete, czyli z funkcji GetTestList, która będzie znajdować się w kontrolerze

minLength: 1 – określamy jak szybko funkcja ma zacząć podpowiadać, w tym przypadku po wpisaniu jednego znaku

Gdy już mamy ogarnięty widok w 100%, musimy zająć się funkcją z kontrolera, która będzie dostarczać wyniki podczas wpisywania. Funkcja będzie zwracać wyniki w formie listy w formacie JSON (jeżeli nie wiesz co to za format, na wikipedii jest to świetnie wyjaśnione).

 

 public JsonResult GetCustomer(string term)
 {
 var customers = db.CustomerSet.Where(x => x.Code.StartsWith(term)).Select(y => y.Code).ToList();

 return Json(customers, JsonRequestBehavior.AllowGet);
 }

W skrócie wygląda to tak: Wykonujemy select na tabeli w bazie danych z odpowiednim wyrażeniem. Wynik zostaje przekonwertowany do formatu JSON i zwracany jako wynik funkcji.

autouzupełnianie tekstu

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *