Show error "Email already exists" in registration form

Question

How to show error "Email already exists" in registration form?

I try to add error to model state - but error aren't displayed.

For action which check email i have method which returns JsonResult. Maybe here is a problem why error not displayed?

        [AllowAnonymous]
    public JsonResult EmailValidation(string email)
    {
        if (ModelState.IsValid)
        {
            var user = _service.FindByEmail(email);
            if (user == null)
            {
                return Json(new {result = true, message = "Email is validated"}, JsonRequestBehavior.AllowGet);
            }
            ModelState.AddModelError(string.Empty, "Your Email already exists");
            return Json(new {result = false, message = "Email already exists"}, JsonRequestBehavior.AllowGet);
        }
        return Json(new {result = false, message = "Input Email"}, JsonRequestBehavior.AllowGet);
    }

<form id="emailValidationForm">
            @Html.ValidationSummary(true)
            <div class="form-group text-center">
                <p><button type="button" class="btn btn-facebook" title="Join with the Facebook"><i class="fa fa-facebook"></i>&nbsp;&nbsp;Join with the Facebook</button></p>
                <p><button type="button" class="btn btn-linkedin" title="Join with the LinkedIn"><i class="fa fa-linkedin"></i>&nbsp;&nbsp;Join with the LinkedIn</button></p>
                <p><button type="button" class="btn btn-googleplus" title="Join with the Google+"><i class="fa fa-google-plus"></i>&nbsp;&nbsp;Join with the Google+</button></p>
                <p>or</p>
                <div class="input-group margin-bottom-5">
                    <span class="input-group-addon"><i class="fa fa-user"></i></span>
                    @Html.TextBoxFor(m => m.Email, new {@class="form-control", @placeholder="Enter your Email",@data_toggle="tooltip"})
                    @*<input type="text" name="Email" placeholder="Enter your Email" class="form-control" data-toggle="tooltip">*@
                </div>
                @Html.ValidationMessageFor(m => m.Email, null, new { @class = "text-danger" })
            </div>
            <div class="text-right">
                <button type="submit" class="btn btn-primary" title="Validate email">Join</button>    
            </div>
        </form>

Answer 1

I would guess that it is because you are returning a JSON result, but your code to display the error messages is using razor. Maybe you could return the view instead.

Answer 2

I resolve my problem using this answer https://stackoverflow.com/a/2759898/2167382 I just return my view as Json and it works fine.

public string RenderRazorViewToString(string viewName, object model)
{
  ViewData.Model = model;
  using (var sw = new StringWriter())
  {
    var viewResult = ViewEngines.Engines.FindPartialView(ControllerContext,
                                                             viewName);
    var viewContext = new ViewContext(ControllerContext, viewResult.View,
                                 ViewData, TempData, sw);
    viewResult.View.Render(viewContext, sw);
    viewResult.ViewEngine.ReleaseView(ControllerContext, viewResult.View);
    return sw.GetStringBuilder().ToString();
  }
}

Answer 3

If we talk about MVC 5 the best solution is here: How to check if user already exists on client-side in ASP.NET MVC 5?

Simply, clearly and smart!