Jeżeli rozpocząłeś swoją pracę z ASP.NET MVC prędzej czy poźniej spotkasz się z pojęciem Progresywanego Ulepszania oraz Dyskretnego JavaScript. Pomijając użyteczność i wydajność należy wspomnieć o bardzo ważnej korzyści – techniki te pozwalają na napisanie bardziej modułowego kodu JavaScript. W poniższym artykule skupię się wyłączenie na kontrolce autouzupełniania w aplikacji ASP.NET MVC
Rozpoczęcie pracyW pierwszym kroku skupimy się na autouzupełnianiu w akcji – zaczniemy od wprowadzenia tekstu:
<label for=“somevalue“>Some value:</label><input type=“text“ id=“somevalue“ name=“somevalue“ />
Po dodaniu referencji do skryptu oraz pliku css dla jQuery UI możemy dopisać poniższy skrypt do naszego widoku:
$(document).ready(function () {
$(“#somevalue“).autocomplete({
source: “@Url.Action(“Autocomplete“)
});
})
Powyższy skrypt identyfikuje wprowadzany tekst przez ID a następnie wywołuje funkcję autouzupełniania w celu podpięcia rezultatów do wskazanego elementu DOM (Document Object Model). Przekazujemy URL, aby zidentyfikować źródło danych. W tym celu przygotowałem prostą akcję, która jako wynik zwraca dane w postaci JSON. Zwróć uwagę, że na widoku skorzystałem z Url.Action do połączenia URL z akcją w tabeli routingów – należy unikać hard-codowania URL ponieważ prowadzi to do powstawania duplikatów w tabeli routingów oraz czyni proces zmiany routingów jeszcze trudniejszym.
public ActionResult Autocomplete(string term)
{
var items = new[] {"Audi", "Ferrari", "Porsche", "Audi Sport", "BMW"};
var filteredItems = items.Where(
item => item.IndexOf(term, StringComparison.InvariantCultureIgnoreCase) >= 0
);
return Json(filteredItems, JsonRequestBehavior.AllowGet);
}
A tak przedstawia się efekt złożenia wszystkich powyższych komponetów:
Czy jest więc coś złego w takim rozwiąznaiu? Hmm...takie rozwiązanie działa, ale zostało przygotowane w taki sposób, że nie nadaję się do użycia w innych projektach. Dyskretne autouzupełnianie
Teraz, gdy mamy już działające autouzupełnianie , możemy przejść do kolejnego kroku. Przeniesiemy skrypt do osobnego pliku oraz wyczyścimy naszą stronę HTML (zmniejszymy jej rozmiar oraz poprawimy cache'owlaność skryptu). Wyzywanie, z którym się zmierzymy w tym kroku to wskazanie naszemu skryptowi z którym elementem ma współpracować oraz URL dla każdego elementu. Jeden ze sposobów to wskazanie, przy użyciu CSS, elementów, które potrzebują takiego zachowania a następnie taka modyfikacja skryptu, aby rozpoznawał te elementy przez klasę a nie identyfikator. To jednak nie rozwiąże problemu z URL (czyli lokalizacją naszej metody). Użyjemy podejścia opisanego w tym artykule: https://blogs.msdn.microsoft.com/stuartleeks/2012/04/23/asp-net-mvc-jquery-ui-autocomplete/
Istotą tego rozwiązania jest dołączenie dodatkowych elementów HTML a następnie utworzenie osobnych skryptów, które będą identyfikowały te elementy oraz implementowały odpowiednie zachowanie. Deklaratywne podejście jest powszechna techniką używana walidacji dostępną od ASP.NET MVC 3. Metodą dodawania dodatkowych informacji są atrybuty, które rozpoczynaja się od "data- i są ignorowane przez przeglądarkę. Dla autouzupełniania dodamy atrybut data-autocomplete-url, aby wskazać URL do pobierania danych autouzupełniania. Widok będzie teraz wyglądał następująco:
<label for=“somevalue“>Some value:</label><input type=“text“ id=“somevalue“ name=“somevalue“ data-autocomplete-url=“@Url.Action(“AutoComplete“)“ />Następny krok to utworzenie osobnego pliku dla skryptu, który doda zachowanie autouzupełniania dla wskazanego elementu:
$(document).ready(function () {
$("*[data-autocomplete-url]")
.each(function () {
$(this).autocomplete({
source: $(this).data("autocomplete-url")
});
});
});
Skrypt ten identyfikuje wszystkie element z atrybutem data-autocomplete-url a następnie wywołuje autocomplete(), aby dodać widget uzupełniania jQuery dla każdego element stosując wartość atrybutu jako źródło danych autouzupełaniania.