ASP.Net Core MVC: Client Side DropDownList validation using jQuery

I’ll demonstrate using an example how to use jQuery to do client side validation for DropDownList in ASP.Net Core MVC in this article.
Model class and Data Annotation attributes will be used to execute Client Side Validations.

Model:

The property Gender is all that the following Model class consists of. The following Data Annotation attributes are added to the property to perform validations.
1. The attribute for Required Data Annotation.
The Entity Data Model (EDM), LINQ to SQL, and other data models can all use the Data Annotations properties.

The property Error Message with a string value has been defined for the Required Data Annotation. As the name implies, the user will see this string value if the validation is unsuccessful.

using System.ComponentModel.DataAnnotations;
 
namespace DropDownList_Validation_MVC_Core.Models
{
    public class PersonModel
    {
        [Required(ErrorMessage = "Gender is required.")]
        public string Gender { get; set; }
    }
}

Controller:

There are two Action methods in the Controller.
GET operation handling action method
The View is the only thing returned in this Action method.

Procedure for handling the POST operation
When the form is submitted, the object of the PersonModel class is delivered to this function, which handles the POST action.
Model State is used to determine the current status of the provided Model. In a ViewBag object, the value of the Gender field is set if the Model’s IsValid property returns true.

public class HomeController : Controller
{
    public IActionResult Index()
    {
        return View();
    }
 
    [HttpPost]
    public IActionResult Index(PersonModel person)
    {
        if (ModelState.IsValid)
        {
            ViewBag.Gender = person.Gender;
        }
 
        return View();
    }
}

View:

The Person Model class is declared as the View’s Model in the View’s first line.

The Form

The View is made up of an HTML Form that was produced with HTML.The BeginForm method takes the following inputs.
ASP.NET Action Name property. The name in this instance is Index.
The name of the controller is asp-controller. The name in this instance is Home.
method – It determines the GET or POST form method. It will be set to POST in this instance.

The form consists of a SPAN, a Submit Button, and an HTML DropDownList with three selections.
The Gender property is used to set the value of the DropDownList’s asp-for Tag Helper attribute. This denotes that the Gender attribute will be subject to validation.
The SPAN has the asp-validation-for Tag Helper attribute applied to it, and in this instance, the value of that attribute is set to the Gender property, indicating that it will be used to display the Validation message for the Gender property.

The Form is submitted when the Submit button is pressed, and the Controller receives the Gender value.

Client-Side Validations Enabled
Data annotations and model class validations are often carried out on the server side.
You must inherit the ensuing script files if you want to allow client-side validations.
1. jquery.js
2. jquery.validate.unobtrusive.js

3. jquery.validate.js

The Client-Side validations using Data Annotations are enabled after the aforementioned files are automatically inherited.

displaying the value submitted
If the Model is valid, the ModelState.IsValid property underneath the Form is verified, and the value of the ViewBag object using Razor syntax is displayed.

@model DropDownList_Validation_MVC_Core.Models.PersonModel
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport"content="width=device-width" />
    <title>Index</title>
    <style type="text/css">
        body { font-family: Arial; font-size: 10pt; }
        .error { color: red; }
    </style>
</head>
<body>
    <form method="post" asp-controller="Home" asp-action="Index">
        <table>
            <tr>
                <td>
                    <select asp-for="Gender">
                        <option value="">Please select</option>
                        <option value="M">Male</option>
                        <option value="F">Female</option>
                    </select>
                </td>
                <td><span asp-validation-for="Gender" class="error"></span></td>
            </tr>
            <tr>
                <td><input type="submit" value="Submit" /></td>
                <td></td>
            </tr>
        </table>
    </form>
    <hr/>
    @if (ViewData.ModelState.IsValid)
    {
        @ViewBag.Gender;
    }
    <!--OPTIONAL: Add the following scripts for enabling Client Side validation.-->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.12/jquery.validate.unobtrusive.js"></script>
</body>
</html>

Submit a Comment

Your email address will not be published. Required fields are marked *

Subscribe

Select Categories