how to validate in modal

Question

I have a modal that returns login view . I want to check if user does not exist return the view with some error . I tried using

ModelState.AddModelError()

But the modal close and view is opened. this is my code:

 public IActionResult Login(LoginViewModel login)
    {
        if (!ModelState.IsValid)
            return View();
        var user = _userServies.getUserByEmailandPass(login.Email, login.Password);
        if (user == null)
        {
            ModelState.AddModelError("Email","email or password is wrong");
            return view();
        }
        return Redirect("/");
    }

Answer 1

Login modal form data via ajax in ASP.NET Core 3.1

Use jQuery to send ajax and perform modal actions dynamically.

Here are codes of controller.

    [HttpPost]
    public IActionResult Login(LoginViewModel login)
    {
        if (ModelState.IsValid)
        {
            //var user = _userServies.getUserByEmailandPass(login.Email, login.Password);
            //if (user == null)
            if (login.Email.Equals(login.Password))
            {
                ModelState.AddModelError("Email", "email or password is wrong");
            }
        }else
            ModelState.AddModelError("Email", "email or password invalid");

        return PartialView("_LoginModalPartial", login);
    }

Here are codes of _LoginModalPartial.cshtml.

@model LoginViewModel
@{
    Layout = "_Layout";
}

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#login">
    Login
</button>

<div id="modal-placeholder">
    <!-- Modal -->
    <div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="addContactLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addContactLabel">Login</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form asp-action="Login">
                        <input name="IsValid" type="hidden" value="@ViewData.ModelState.IsValid.ToString()" />

                        <div class="form-group">
                            <label asp-for="Email"></label>
                            <input asp-for="Email" class="form-control" />
                            <span asp-validation-for="Email" class="text-danger"></span>
                        </div>
                        <div class="form-group">
                            <label asp-for="Password"></label>
                            <input asp-for="Password" class="form-control" />
                            <span asp-validation-for="Password" class="text-danger"></span>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" data-save="modal">Login</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>

<script>    
    $(function () {

        $('button[data-save="modal"]').click(function (event) {

            var form = $(this).parents('.modal').find('form');
            var actionUrl = form.attr('action');
            var dataToSend = form.serialize();

            $.post(actionUrl, dataToSend).done(function (data) {

                var placeholderElement = $('#modal-placeholder');
                var newBody = $('.modal-body', data);

                // find IsValid input field and check it's value
                // if it's valid then hide modal window

                var isValid = newBody.find('[name="IsValid"]').val() == 'True';

                if (isValid) {
                    placeholderElement.find('.modal').modal('hide');
                    location.href = "/";
                } else {
                    placeholderElement.find('.modal-body').replaceWith(newBody);
                }

            });

        });

    });


</script>