[Remote] Attribute Validation in ASP.NET Core

This blog is going to explain what Remote Attribute Verification is and how to use it. In this validation, the Controller action is called using the client-side script. This allows you to verify the server-side code without page refresh. This is because the server-side method is called by the jQuery validation method in the ASP.NET core. Let’s look at it step by step.

Step 1: jQuery Library
You have to make sure you have the following jQuery. As I mentioned earlier, the server-side controller action method is called by jQuery validation.

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>

Step 2: Model
Next step I have created a Model called MovieModel. It has two properties, MovieName and ReleaseYear. To demonstrate Remote Attribute Validation, I have added a Remote Attribute just above the MovieName property. Also, I added two parameters to the Remote Attribute, action (IsMovieAvailable) and controller (Home).

using Microsoft.AspNetCore.Mvc;

namespace SampleWebApplication.Models
{
    public class MovieModel
    {
        [Remote(action: "IsMovieAvailable", controller: "Home")]
        public string MovieName { get; set; }        
        public int ReleaseYear { get; set; }
    }
}

Step 3: Controller action method
The following is a controller action method to validate whether the movie name exists in the database or not. Process name The model must be equal to the value you set in the remote attribute. The action method name must be equal to the value that you set in the model’s Remote Attribute. Here I have assigned some movie names to the string list. For example purpose, I initialize some values. For actual use, you need to fetch existing values from the database. Then I check that the input value name is in the list of movie names. If the name already exists, it will return an error message, otherwise it is true.

public ActionResult IsMovieAvailable(string movieName)
{
        // For a demo purpose I have added some values. You should check with the DB values.
        List<string> movieList = new List<string>() {
            "The Lion King",
            "Frozen",
            "Aladdin"
        };

        bool isAvailable = movieList.Contains(movieName);

        if (isAvailable)
        {
            return Json("Movie Name Already Exists..");
        }
        else {
            return Json(true);
        }                
}

Step 4: View
The final step is to view creation. Two text boxes are created here to get the name and release year of the movie. Next to the Movie Name text box, a span tag with the asp-validation-for attribute is added to display the verification error message.

@{
    ViewData["Title"] = "Remote Attribute";
}
@model MovieModel

<form asp-controller="Home" asp-action="Save" method="post">
    <table>
        <tr><td>Movie Name</td>
            <td>
                <input asp-for="MovieName">
                <span asp-validation-for="MovieName" class="text-danger"></span>
            </td>
        </tr>
        <tr><td>ReleaseDate</td><td><input asp-for="ReleaseYear"></td>
        </tr>
        <tr>
            <td><input type="submit" value="Submit"></td>
        </tr>
    </table>
</form>

Output
The following is the output of the above code. Here you can see how Remote Attribute verification works. When the user types the name of the movie Frozen and gets the cursor out of the movie text box it shows a validation error message. When typing the unlisted movie name as Mona, it did not show the error message.

I hope this helps you. Keep coding.