How to use Remote Attribute in Asp.Net Core

Sometimes it is necessary to check the value of one of the fields when entering information in a form. For example, when registering a user on the site, we want to check the user name or phone number that is not available in the database, and if there is a record in the database with that username or phone number, show the required message to the user. To do this, we can check whether the field is in the database when the data is sent to the server. But in this method, all the form data is sent to the server and if the value sent in the database is available, the user must change and send the data again. However, using the Remote attribute, the entered value can be sent to the server while the user is entering the value of the desired field. In this case, only the desired field (not the entire form) is sent to the server as Ajax. How to use this attribute is as follows.

public class UserDto
{
    [Remote(action: "CheckUsername", controller: "User", areaName: "Admin", HttpMethod = "POST", ErrorMessage = "نام کاربری وارد شده قبلا در سایت ثبت شده است")]
    public string Username { get; set; }
    public string Password { get; set; }
    public string RePassword { get; set; }
}

In the above code we have specified the name of the controller, action and Area that we must create an action in the User controller in the Admin area called CheckUsername that we must return a Json value. If the value of Json is equal to true, it means that the value of the desired field (according to your scenario) is not available in the database and the user can use that username. How to implement the controller is as follows.

[Area("admin")]
public class UserController : Controller
{
    private readonly IUserService _userService;
    public UserController(IUserService userService)
    {
        _userService = userService;
    }
    [HttpPost, ResponseCache(NoStore = true, Location = ResponseCacheLocation.None)]
    public async Task<IActionResult> CheckUsername(string Username)
    {
        bool isValidUsername = await _userService.CheckUsername(Username);
        return Json(isValidUsername);
    }
}

At the CheckUsername action input, the Username field value is sent automatically. The input parameter name must be exactly the same as the field defined in the input form. The CheckUsername method checks the IUserService interface to see if there is a username with that name. If there is a false value will be returned and the false value will be sent as json and the message "Username already entered on the site" will be displayed to the user. You can use the AdditionalFields property if you want to check one or more other fields when reviewing the field. This property is a string type and accepts the names of other Morniaz fields to check. You can submit several fields as follows.

public class UserDto
{
    [Remote(action: "CheckUsername", controller: "User", areaName: "Admin",
        AdditionalFields = "Password,RePassword",
        HttpMethod = "POST", 
        ErrorMessage = "نام کاربری وارد شده قبلا در سایت ثبت شده است")]
    public string Username { get; set; }
    public string Password { get; set; }
    public string RePassword { get; set; }
}

In this case, when sending the username to the CheckUsername action, the value of the Password and RePassword fields will also be sent, and the action input must be changed as follows.

[HttpPost, ResponseCache(NoStore = true, Location = ResponseCacheLocation.None)]
public async Task<IActionResult> CheckUsername(string Username, string Password, string RePassword)
{
    var isValidUsername = await _userService.CheckUsername(Username);
    return Json(isValidUsername);
}

Finally, we need to add JavaScript libraries for client-side validation to the page.

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

;)

Powered by Froala Editor