使用ajax进行自定义用户注册不起作用（ASP.NET MVC4）

Question

I created custom user registration using SimpleCrypto library . It works fine on its own page (controller UserController , action Registration , view Registration ). Then I would like to make this registration in modal window on main page using ajax.

I created partial view _Registration.cshtml

@model TaskManager.Models.RegisterUserModel

<div class="modal fade" id="registrationModal">
  <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h2 class="modal-title">Registration</h2>
        </div>

        @using (Html.BeginForm("Registration", "User", FormMethod.Post, new { @class = "registration-form", id = "registration-form" }))
        {
            @Html.AntiForgeryToken()
            @Html.ValidationSummary(true)

            <div class="modal-body">
                 <div class="form-group">
                    @Html.LabelFor(u => u.Name)
                    @Html.TextBoxFor(u => u.Name, new { @class = "form-control" })
                    @Html.ValidationMessageFor(u => u.Name, null, new { @class = "error" })
                </div>

                <div class="form-group">
                    @Html.LabelFor(u => u.Email)
                    @Html.TextBoxFor(u => u.Email, new { @class = "form-control" })
                    @Html.ValidationMessageFor(u => u.Email, null, new { @class = "error" })
                </div>

                <div class="form-group">
                    @Html.LabelFor(u => u.Password)
                    @Html.PasswordFor(u => u.Password, new { @class = "form-control" })
                    @Html.ValidationMessageFor(u => u.Password, null, new { @class = "error" })
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <input type="submit" class="btn btn-primary" value="Register">
            </div>
        }

    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

and added it on home page

<a href="#" data-toggle="modal" data-target="#registrationModal">registration</a>
@Html.Partial("~/Views/User/_Registration.cshtml")

it's my .js file

/* -------------- DOM READY -------------- */
$(document).ready(function () {
"use strict";

var $body = $("body");

var ajaxRegistration = function () {
    var $form = $(this);

    var options = {
        url: $form.attr("action"),
        type: $form.attr("method"),
        data: $form.serialize()
    };

    console.log(options);
    $.ajax(options).done(function (data) {
        console.log("ok");
    })
   .fail(function () {
       console.log("error");
   });

    return false;
};
$("#registration-form").submit(ajaxRegistration);
});

And it's my UserController

namespace TaskManager.Controllers
{
    public class UserController : Controller
    {
        TaskManagerDbContext _db = new TaskManagerDbContext();

        [HttpGet]
        [AjaxAction]
        public ActionResult Registration()
        {
            var registerUser = new RegisterUserModel();
            return PartialView("_Registration", registerUser);
        }

        [HttpPost]
        [AjaxAction]
        public ActionResult Registration(RegisterUserModel registerUser)
        {            
            if (ModelState.IsValid)
            {
                if (!IsUserExist(registerUser.Email))
                {    

                    var crypto = new SimpleCrypto.PBKDF2();

                    var encrpPass = crypto.Compute(registerUser.Password);

                    var newUser = _db.Users.Create();

                    newUser.Name = registerUser.Name;
                    newUser.Email = registerUser.Email;
                    newUser.Type = UserType.User.ToString();

                    newUser.Password = encrpPass;
                    newUser.PasswordSalt = crypto.Salt;

                    _db.Users.Add(newUser);
                    _db.SaveChanges();

                    return RedirectToAction("Index", "Task");

                }
                else
                {
                    ModelState.AddModelError("", "User already exists");
                }
            }
            else
            {
                ModelState.AddModelError("", "Data is incorrect");
            }

            return PartialView("_Registration", registerUser);
        }

        private bool IsUserExist(string email)
        {
            bool IsValid = false;

            var user = _db.Users.FirstOrDefault(u => u.Email == email);

            if (user != null)
            {
                IsValid = true;
            }

            return IsValid;
        }

        protected override void Dispose(bool disposing)
        {
            if (_db != null)
            {
                _db.Dispose();
            }
            base.Dispose(disposing);
        }
    }
}

It works and adds user in database and shows errors in modal window if any field of form is not valid (empty or incorrect data).
But at the same time there are some problems I can't fix.

First of all, if ModelState.IsValid is not true or if IsUserExist(registerUser.Email) return true, I don't get any errors in my form, ModelState.AddModelError("", "User already exists"); and ModelState.AddModelError("", "Неправильные данные"); don't work.

And the second one, if user was registered successfully, redirect return RedirectToAction("Index", "Task"); doesn't work, I don't know why.

How to fix these bugs?

Answer 1

One possible (and rather simple) option: in your controller you do smt like

           if (ModelState.IsValid)
            {
                if (!IsUserExist(registerUser.Email))
                { 
                    // bad here
                    //return RedirectToAction("Index", "Task");
                    return new HttpStatusCodeResult(HttpStatusCode.OK); //at least
                }
                else
                {
                  return new HttpStatusCodeResult(HttpStatusCode.InternalServerError, "User already exists");
                }
            }
            else
            {
               return new HttpStatusCodeResult(HttpStatusCode.InternalServerError, "Data is incorrect");
            }

And then in js say the following. I use these 2 options, success and error, so you can remove methods done and fail.

var options = {
        url: $form.attr("action"),
        type: $form.attr("method"),
        data: $form.serialize()
        success: function() {/*redirect here*/},
        error: function (e) {
            alert(e.statusText); /* show the error */
        }
    };

As for redirecting. Again, ajax does not expect to be redirected. That's why you need to redirect manually when you get a successful case.