Пользовательская регистрация пользователя с помощью ajax не работает (ASP.NET MVC4)

Question

Я создал пользовательскую регистрацию пользователя, используя SimpleCrypto library. Он отлично работает на своей странице (контроллер UserController, действие Registration, вид Registration). Затем я хотел бы сделать эту регистрацию в модальном окне на главной странице с помощью ajax.

Я создал частичный вид _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 --> 

и добавить его на домашней странице

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

это мои .js файл

/* -------------- 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); 
}); 

И это мой 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); 
     } 
    } 
} 

Он работает и добавляет пользователь в базе данных и показывает ошибки в модальном окне, если какое-то поле формы не является допустимым (пустым или неверными данными).
Но в то же время есть некоторые проблемы, которые я не могу исправить.

Прежде всего, если ModelState.IsValid это не так или если IsUserExist(registerUser.Email) возвращение правда, я не получаю никаких ошибок в моей форме, ModelState.AddModelError("", "User already exists"); и ModelState.AddModelError("", "Неправильные данные"); не работают.

И второй, если пользователь был успешно зарегистрирован, перенаправление return RedirectToAction("Index", "Task"); не работает, я не знаю почему.

Как исправить эти ошибки?

Answer 1

Одним из возможных (и довольно простой) вариант: в вашем контроллере вы СМТ как

  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"); 
      } 

А потом в JS сказать следующее. Я использую эти 2 варианта, успех и ошибку, поэтому вы можете удалить сделанные методы и выйти из строя.

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 */ 
     } 
    }; 

Что касается перенаправления. Опять же, ajax не ожидает перенаправления. Вот почему вам нужно перенаправить вручную, когда вы получите успешный случай.