Walidacja danych to bardzo szeroki temat. Sprawdzamy poprawność danych zarówno po stronie klienta (JavaScript) jak i serwera. Występuje ona we wszystkich warstwach systemu. Dzisiaj napiszemy metodę po stronie serwera, która będzie weryfikowała dane. W przeciwieństwie jednak do klasycznego podejścia, nie będziemy przeładowywać całej strony od nowa. Wywołanie będzie Ajaxowe czyli w tle (asynchroniczne). Użytkownik wpisując jakieś dane do formularza, spowoduje tym samym wysyłanie w tle żądania do serwera, który dokona weryfikacji.
Zacznijmy od naszej metody po stronie serwera:
public JsonResult Validate(string login) { if (string.IsNullOrEmpty(login)) return Json("Login nie moze byc pusty", JsonRequestBehavior.AllowGet); if (string.Equals(login, "piotr", StringComparison.OrdinalIgnoreCase)) return Json("Login zajety.", JsonRequestBehavior.AllowGet); return Json(true, JsonRequestBehavior.AllowGet); }
Jak widać, jest to zwykła metoda serwisowa, zwracająca JSON. Jeśli dane są nieprawidłowe to zwracamy komunikat błędu. W przeciwnym razie zwracamy TRUE. Oczywiście zawsze jest to format JSON.
Następnie zdefiniujemy nasz model:
public class Person { [Remote("Validate","Home")] public string Login { get; set; } public string Password { get; set; } }
Atrybut Remote jest kluczowy tutaj. To za pomocą niego określamy, która metoda i w jakim kontrolerze będzie wywoływana. Wskazujemy tutaj po prostu, że Validate będzie wykonany w tle, gdy użytkownik wpisuje jakiś tekst. Tak naprawdę, całą robotę wykona za nas jquery. Pamiętajmy, aby zwrócić wspomniany model w jakieś akcji:
public ActionResult Create() { return View(new Person()); }
Widok z kolei nie różni się niczym od klasycznego:
@using (Html.BeginForm ()) { @Html.AntiForgeryToken() @Html.ValidationSummary(true) <fieldset> <div class = "editor-label"> @Html.LabelFor(model => model.Login) </div> <div class = "editor-field"> @Html.EditorFor(model => model.Login) @Html.ValidationMessageFor(model => model.Login) </div> <p> <input type="submit" value="Create" /> </p> </fieldset> }
Pamiętajmy również, aby dołączyć odpowiednią bibliotekę jQuery:
@Scripts.Render("~/bundles/jqueryval")
Zaglądając do kodu HTML, przekonamy się, że odpowiednie atrybuty został dodane:
<form action="/Home/Create" method="post"><input name="__RequestVerificationToken" type="hidden" value="Vii8pmoVPcEaAPbTlWVrUsJXFWfjoiUMEbvQPGK-9pvGuetx2RVKnchLsBtkaZ7btU7xFSNoMFLCcRiP8znCSqe9cnpYkD9v38fw-W21X7o1" /> <fieldset> <div class = "editor-label"> <label for="Login">Login</label> </div> <div class = "editor-field"> <input class="text-box single-line" data-val="true" data-val-remote="'Login' is invalid." data-val-remote-additionalfields="*.Login" data-val-remote-url="/Home/Validate" id="Login" name="Login" type="text" value="" /> <span class="field-validation-valid" data-valmsg-for="Login" data-valmsg-replace="true"></span> </div> <p> <input type="submit" value="Create" /> </p> </fieldset> </form>
Pozostaje już tylko uruchomić solucję i przetestować stronę:
Z logów widać wyraźnie, że wpisując kolejne znaki, nowe zapytania są wysyłane do serwera z zaktualizowanym parametrem login. W przypadku błędu, informacja zostanie odpowiednio wyświetlona. Wszystko dzięki atrybutowi Remote oraz jQuery. Jak widać, jest to bardzo proste do zrealizowania.
Bardzo przydatne! Dzięki.
Na pewno się przyda, thx! 🙂
Mega