Validation à distance dans ASP.NET MVC sans utiliser jQuery

Dans ce blog, nous allons implémenter la validation à distance en faisant un appel ajax au serveur sans utiliser jQuery ; nous y parviendrons en utilisant du JavaScript vanille.

A quoi sert la validation à distance ?

Voici une explication: Souvent, les entrées de l’utilisateur doivent être comparées à une base de données pour voir si elle existe déjà. Nous devons valider l’entrée côté client. Nous devons y parvenir sans publier l’intégralité du formulaire sur le serveur. Dans un tel scénario, un appel au serveur est nécessaire pour confirmer l’unicité des données saisies. Un nom d’utilisateur, par exemple, doit être unique lors de la création d’un nouvel utilisateur.

Validation à distance

ASP.NET MVC 3 fournit le mécanisme pour effectuer validation à distance. La validation à distance d’ASP.NET MVC dépend fortement des bibliothèques jQuery et jQuery.Validate. La validation à distance effectue un appel ajax au serveur à l’aide de jQuery.

Commençons par le modèle.

Voici mon modèle utilisateur ayant des propriétés d’identifiant, de nom d’utilisateur et de mot de passe.

namespace ASP.Net_MVC.Models
{
   [Table("Users")]
    public class User

    {
        [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
        [Key]
        public int Id { get; set; }

        [Required(ErrorMessage = "This username is required.")]
        public string UserName { get; set; }

        [Required(ErrorMessage = "This password is required.")]
        public string Password { get; set; }
    }
}

CheckExistingUser La méthode d’action est appelée lorsqu’un utilisateur clique sur un bouton de création.

namespace ASP.Net_MVC.Controllers
{
    public class UserController : Controller
    {
        EmployeeContext _userService = new EmployeeContext();

        // GET: User
        public ActionResult Create()
        {
            return View();
        }

        [HttpPost]
        public ActionResult Create(User user)
        {

                if (ModelState.IsValid)
                {
                    _userService.Users.Add(user);
                    _userService.SaveChanges();
                    return RedirectToAction("Index");
                }
            return View(user);
        }

        [AcceptVerbs("GET", "POST")]
        public ActionResult CheckExistingUser(string userName)
        {
            if (!_userService.Users.Any(u => u.UserName == userName))
            {
                return HttpNotFound();
            }

            return new HttpStatusCodeResult(200, $"A user {userName} already exists.");
        }

Créer.cshtml (Afficher)

Lors de la soumission du formulaire, JavaScript lors de la soumission événement est appelé, qui à son tour appelle une fonction JavaScript validateForm(). Nous intégrons une URL à un méthode d’action en spécifiant les noms d’action et de contrôleur dans la méthode Url.Action().

@model ASP.Net_MVC.Models.User

@{
    ViewBag.Title = "Create User";
}


<form asp-controller="User" asp-action="Create" id="form-submit" method="post" 
      onsubmit="return validateForm('@Url.Action("CheckExistingUser","User", null)', event)">

    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>Create User</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.UserName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.UserName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.UserName, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Password, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Password, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Password, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="error-div">
            <label id="errormessage" class="text-danger"></label>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
</form>

    <div>
        @Html.ActionLink("Back to List", "Index")
    </div>

Fonction JavaScript pour valider l’utilisateur

Dans la fonction JavaScript validateForm(), nous divisons l’URL et obtenons la méthode d’action. Nous divisons l’URL car elle peut être réutilisée pour d’autres méthodes d’action. Nous pourrions obtenir d’autres éléments DOM spécifiques à chaque méthode d’action et réutiliser le même appel ajax pour envoyer les champs à la méthode d’action et vérifier l’unicité des données. De la méthode d’action du contrôleur, nous recevons une réponse, et sur cette base, nous affichons le message d’erreur de validation à l’utilisateur ou soumettons le formulaire.

Si cette méthode renvoie le code de réponse 404 NotFound, le nom d’utilisateur n’existe pas et le formulaire est soumis ; sinon, la méthode renvoie le code de réponse 200 OK, un utilisateur existe déjà. Le formulaire soumis appelle la méthode create, qui ajoute l’utilisateur à la base de données.

Noter: Le nom du paramètre (userName) doit correspondre au nom du paramètre dans la chaîne de requête ajoutée de l’URL en JavaScript.

function validateForm(url, event) {
    event.preventDefault();

    let splits = url.split('/');
    let action = splits[splits.length - 1];

    if (action.includes("CheckExistingUser")) {
        console.log(action);
        let userName = document.getElementById("UserName").value
        url += `?userName=${userName}`
    }
    var xhttp = new XMLHttpRequest();
    xhttp.open("GET", url, true);
    xhttp.send();
    xhttp.onreadystatechange = function (event) {
        if (this.readyState == 4 && this.status == 200) {

            document.getElementById("errormessage").innerHTML = this.statusText;
        }
        else if (this.readyState == 4 && this.status == 404) {
            document.querySelector("#form-submit").submit();
        }
   };
}

Le même appel ajax est étendu pour inclure des méthodes d’action supplémentaires. Nous pouvons également vérifier plusieurs champs d’un formulaire en les récupérant du DOM et en les transmettant via une URL.

function validateForm(url, event) {
    event.preventDefault();

    let splits = url.split('/');
    let action = splits[splits.length - 1];

    if (action.includes("CheckExistingUser")) {
        let userName = document.getElementById("UserName").value
        let pswd = document.getElementById("Password").value
        url += `?userName=${userName}&password=${pswd}`
    }
    else if (action.includes("CheckExistingEmployee")) {
        let employeeId = document.getElementById("EmployeeId").value
        let email = document.getElementById("Email").value
        url += `?EmployeeId=${employeeId}&Email=${email}`
    }
    else {}
    var xhttp = new XMLHttpRequest();
    xhttp.open("GET", url, true);
    xhttp.send();
    xhttp.onreadystatechange = function (event) {
        if (this.readyState == 4 && this.status == 200) 
        {
            document.getElementById("errormessage").innerHTML = this.statusText;
        }
        else if (this.readyState == 4 && this.status == 404) {
            document.querySelector("#form-submit").submit();
        }
    };
}

Pour le scénario ci-dessus, la méthode d’action du contrôleur ressemblera à ceci :

[AcceptVerbs("GET", "POST")]
public IActionResult CheckExistingEmployee(int EmployeeId, string Email)
{
if (!_employeeService.Employees.Any(u => u.EmployeeId == EmployeeId && u.Email == Email))
{
return HttpNotFound();
}
return new HttpStatusCodeResult(200, $"Employee {Email} already exists.");
}

J’espère que vous trouverez ce blog utile. (En écrivant 20 à 25 lignes de JavaScript, nous avons évité l’utilisation des bibliothèques de validation jQuery et jQuery)