Create a Custom Remote Attribute in MVC

Introduction

In this example we will create a custom attribute that will validate the customer email id and mobile number uniqueness while inserting a new customer in the database. There are the following Customer table scripts that we will work on in this article.

I am inserting the following sample data:

Use the following procedure and create a remote custom attribute in MVC.

Step 1

Now open Visual Studio and go to "File" -> "New" -> "Project..." and under the web tab select ASP.NET web application and provide a meaningful name. In this case I am giving “CustomRemoteAttributeDemo” and click on the Ok button.

Step 2

Select MVC from the template tab and click on OK.

Step 3

By default a MVC 5 project with some default code appears in Solution Explorer. Delete that if you want or leave it as it is. Now go to the Models folder and right-click on that then select add and select ADO.NET Entity Data Model and provide a meaningful name say EmployeeDb and click Ok.

Step 4

Select "EF Designer from database" in the Entity Data Model Wizard then click "Next". Create a connection string and provide a meaningful name such as “EmployeeDbContext” and click "Next".

Step 5

Select the tblEmployee table and in Namespace write the Models as namespace and click on "Finish".

Step 6

Now our tblEmployee entity is ready. Change the name to Employee and build the project once so that all the code compiles correctly.

Step 7

Now go to the controller folder and right-click on it and select Add then select New Scaffolded Items as follows.

Step 8

The following dialog box appears. Select "MVC5 controller with views using Entity Framework" and click "Add".

Step 9

Then for "Model Class" select Employee and for the "Data context class" select "EmployeeDbContext" and leave the rest as defaults and click on "Add".

Note: Remote attribute only works when JavaScript is enabled. If the end user disables JavaScript on his/her machine then the validation does not work. This is because RemoteAttribute requires JavaScript to make an asynchronous AJAX call to the server-side validation method. As a result, the user will be able to submit the form, bypassing the validation in place. This's why it is always important to have server-side validation.

Step 10

By default the controller and related view has been generated by MVC. Run the project and navigate to create the action method. Here if we insert the same mobile number and email id then it is also accepting that we need to remove by creating a custom attributes. The custom attribute will be used in the entire project so it will be best if we place it in a separate folder called common. Create a common folder and one class says “CustomRemoteAttribute”(you can give it a meaningful name) inside that folder.

For creating a remote attributes in MVC we need to inherit the RemoteAttribute class with it available inside the using System.Web.Mvc; namespace. So do this first like: