W tym przykładzie będziemy posiłkować się technologią jaką jest Ajax
Jest to już bardziej złożony przykład.
Stworzymy listę osób, którą w łatwy sposób będziemy mogli filtrować, właśnie z pomocą Ajaxa – w ten sposób, aby uniknąć ciągłego odświeżania strony.
W Modelu tworzymy klasę Person wraz z właściwościami : Name, Surname, Age oraz Listę wypełnioną danymi.
Pamiętaj, że nazwa namespace w każdym projekcie jest inna – uzależniona jest od nazwy projektu.
C#
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
namespace AjaxDemo.Models { public class Person { public int PersonId { get; set; } public string FirstName { get; set; } public string LastName { get; set; } // W ten sposób tworzymy listę z której będziemy mogli skorzystać // jest to statyczna metoda typu IEnumerable klasy Person , o nazwie GetPersonList, ktora zwraca wypelniony danymi obiekt o nazwie person public static IEnumerable<Person> GetPersonList() { var persons = new List<Person> { new Person() {FirstName="Jan",LastName="Kowalski" }, new Person() {FirstName="Krzysztof",LastName="Nowak" }, new Person() {FirstName="Mariusz",LastName="Brzęczyszczykiewicz" }, new Person() {FirstName="Janusz",LastName="Marecki" }, new Person() {FirstName="Katarzyna",LastName="Złotkowska" }, new Person() {FirstName="Julian",LastName="Lubosiński" }, new Person() {FirstName="Grzegorz",LastName="Rogowski" }, new Person() {FirstName="Bartłomiej",LastName="Zasiński" }, new Person() {FirstName="Karol",LastName="Cichoń" }, new Person() {FirstName="Jan",LastName="Deweloperski" }, new Person() {FirstName="Michał",LastName="Kleczkowy" }, new Person() {FirstName="Karol",LastName="Świtała" }, }; return persons; } |
Kontroler wygląda w następujący sposób:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
namespace AjaxDemo.Controllers { public class HomeController : Controller { // searchQuery - to nazwa zmiennej ktora bedzie przechowywala tekst, ktroy wpiszemy w celu filtrowania public ActionResult Index(string searchQuery) { IEnumerable<Person> personList; if (searchQuery != null) { // zapytanie Linq, ktore bedzie filtrowalo dane ( w naszym przypadku listę osob) na podstawie wprwadzonego searchQuery personList = Person.GetPersonList().Where(p => p.FirstName.Contains(searchQuery) || p.LastName.Contains(searchQuery) || searchQuery == p.FirstName + " " + p.LastName).ToArray(); } else // Jezeli zapytanie bedzie puste zwrocimy cala tablice naszych danych personList = Person.GetPersonList().ToArray(); if (Request.IsAjaxRequest()) // jezeli zapytanie bedzie typu ajax zwracamy widok czastkowy - w naszym przypadku bedzie tam wyswietlana lista , gdzie musimy rowniez przekazac obiekt { return PartialView("_PersonList", personList); } return View(personList); } public ActionResult PersonSuggestion(string term) { var personList = Person.GetPersonList().Where(p => p.FirstName.Contains(term) || p.LastName.Contains(term)); return Json(personList, JsonRequestBehavior.AllowGet); } } } |
Teraz pokażę jak wyglądają poszczególne widoki.
Widok cząstkowy, którego zadaniem jest wyświetlenie listy. Pamiętajmy o tym, że musimy zadeklarować widok silnie typowany.
C#
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
@model IEnumerable<AjaxDemo.Models.Person> <div> <div class="col-lg-3" id="personlist-section"> <table class="table"> <tr> <th> Imie </th> <th> Nazwisko </th> <th></th> </tr> @foreach (var item in Model) { <tr> <td> @Html.DisplayFor(modelItem => item.FirstName) </td> <td> @Html.DisplayFor(modelItem => item.LastName) </td> </tr> } </table> </div> </div> |
Widok główny, zawierający Ajaxa.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
@model IEnumerable<AjaxDemo.Models.Person> @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <link href="~/Content/themes/south-street/jquery.ui.all.css" rel="stylesheet" /> <title>Index</title> </head> <body> <div class="col-lg-3"> </div> <form id="search-form" method="get" data-ajax="true" data-ajax-target="#personlist-section" data-ajax-update="#personlist-section"> <input id="SearchQuery" name="searchQuery" data-autocomplate-source="@Url.Action("PersonSuggestions")" placeholder="Wprowadz" /> <input type="submit" value="Filtruj" /> </form> <br /> @*Odwołanie się do widoku cząstowego*@ @Html.Partial("_PersonList") @*Pamietajmy, o tym, że aby korzystać z poniższy bibliotek należy je doinstalować do projektu, w tym celu klikamy prawym klawiszem myszy na nazwe projektu w Solution Explorer, wybieramy Manage Nuget Packages Wyszukujemy i instalujemy następujące biblioteki JQuery JQuery UI i JQuery Unobtrusive Ajax *@ <script src="~/scripts/jquery-2.1.4.js"></script> <script src="~/scripts/jquery-ui-1.11.4.js"></script> <script src="~/scripts/jquery.unobtrusive-ajax.js"></script> <script> var setupAutoComplite = function () { var $input = $("#SearchQuery"); var options = { source: $input.attr("date-autocomplete-source"), select: function (event, ui) { var $input = $("#SearchQuery"); $input.val(ui.item.label); var $form = $input.parents("from:first"); $form.submit(); } }; $input.autocomplete(options); }; setupAutoComplite(); </script> </body> </html> |
Efekt jest interesujący, polecam sprawdzić, można go wykorzystać w swoim projekcie, szczególnie jeżeli potrzebujemy filtrować niektóre dane.
tutaj przykład z filtrowaniem ( bez przeładowywania strony)
