asp.net mvc 项目在使用 Ajax.BeginForm 时不显示带有自定义注释的错误消息

Question

\\ please am trying to build a project that when a user fill in newsletter form, the form should validate the input especally if the email already exit. the problem am having with this is that, when i insert the data with an existing email. the custom annotation does not display the error for the user, and it runs success ajax method, instead of display the error to the user. When i debug with break points every thing code runs expeceted output especially the error message for custom annotation appear. i findout that it works with @Html.BeginForm(), but not with @Ajax.BeginForm()

// custom annotation code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel.DataAnnotations;
using System.Web.Mvc;
using LiveShows.LiveClass;

namespace LiveShows
{
    public class CheckEmailAttribute : ValidationAttribute, IClientValidatable
    {
        public CheckEmailAttribute() :base("{0} Email Already Exit")
        {

        }
        protected override ValidationResult IsValid(object value, ValidationContext validationContext) 
        {
            if(value != null)
            {
                var email = value.ToString();

                DetailInfo details = new DetailInfo();
                bool EmailExit = details.CheckEmailIfExist(email);
                if (EmailExit == true)
                {
                  // var ErrorMessage = FormatErrorMessage(validationContext.DisplayName);
                    return new ValidationResult("Email exist");
                }
                else
                {
                    return ValidationResult.Success;
                }
            }
            else
            {
                return new ValidationResult("Field Required");
            }

            //base.IsValid(value, validationContext);

    }
        public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
        {
            var rule = new ModelClientValidationRule();
            rule.ErrorMessage =
            FormatErrorMessage(metadata.GetDisplayName());

            rule.ValidationType = "checkemail";
            yield return rule;
        }


    }
}
// model code 
   public class EmailFeedsVm
    {
        public int id { get; set; }

        [Required (ErrorMessage ="Your Name is Required")]
        public string DisplayName { get; set; }

        [CheckEmail (ErrorMessage ="Email Already Exist")]
        [Required (ErrorMessage ="Email field is Required")]
        public string Email { get; set; }
        public string DateJoined { get; set; }
    }
// controller code with actiom

[HttpPost]
        public ActionResult NewsLetters(Vmclass.RegisterFeeds fd)
        {
            if (ModelState.IsValid) {
                var feeds = new LiveClass.RegistrationTasks();
                bool RegFeeds = feeds.RegisterEmailFeed(
                    fd.EmailFeeds.DisplayName, fd.EmailFeeds.Email);
                if (RegFeeds == true)
                {
                    return View(fd);
                }
                else
                {
                    return View(fd);
                }
            }
            return View(fd);

        } 
// javascript code 
var EmailMsg = '<h4>Thank You for Joining Us</h4> <p>We will Send You the most Exclusive Events</p>';

function hideLoader(){
    loadingUI.attr("style","none")
}

function Success()
{
    // hideLoader();
    Mymodal.modal('show');
    $("#msgHeading").text("Status");
    $("#status").html('<img src="../img/com/ok.png" />');
    $("#Content").html(EmailMsg);

}
function failure() {
    //    hideLoader();
    Mymodal.modal('show');
    msgHeading.text("Status");
    $("#status").html('<img src="../img/com/Cancel.png" />');
    $("#Content").text("Registration Failed");

}
// view code
   <p id="loading" style="display:none">Loading</p>
            @using (Ajax.BeginForm("NewsLetters", "Home", new AjaxOptions {

                HttpMethod="post",
                OnFailure = "failure",
                OnSuccess = "Success",

               LoadingElementId = "loader",


            }, new { id = "getEmail" }))
            {
                @Html.AntiForgeryToken()
                @Html.ValidationSummary()
                    <div class="form-group">
                        @Html.LabelFor(a => a.EmailFeeds.DisplayName, "Name", new { @class = "form-label" })
                        @Html.TextBoxFor(a => a.EmailFeeds.DisplayName, "Email",new {@class = "form-control" })
                        @Html.ValidationMessageFor(a => a.EmailFeeds.DisplayName)
                    </div>
                    <div class="form-group">
                      @Html.LabelFor(a => a.EmailFeeds.Email, new { @class = "form-label" })
                        @Html.TextBoxFor(a => a.EmailFeeds.Email, new { @class = "form-control" })
                        @Html.ValidationMessageFor(a=>a.EmailFeeds.Email)
                    </div>
                    <button class="btn btn-blue" id="sendEmail" type="submit" >  <img style="display:none" src="../img/ajax-img/smLoader.gif"  id="imgBtn" height="25" /> Done! </button>
            }
            </div>
           <div id="notify">
               <div class="notify">
                   <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal-label">
                       <div class="modal-dialog" role="document">
                           <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>
                                   <h4 class="modal-title" id="myModal-label"> <span id="msgHeading"></span> </h4>
                               </div>
                               <div class="modal-body">

                                   <div id="status">
                                   </div>
                                   <div id="Content">
                                   </div>

                               </div>
                               <div class="modal-footer">
                                   <div id="msgfooter"></div>
                                   <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

                               </div>
                           </div>
                       </div>
                   </div>
               </div>
       </div>

i also see this error in my watch tab

Answer 1

With your current code, Even if the ModelState.IsValid returns false, the action method returns a view result. For the ajax call, this is a 200 OK response, hence going to the success handler.

There is no point in returning a view when it is an ajax form submit. What you can do is, if it is an ajax submit, return a JSON response with all the model validation errors and in your success handler check this JSON and display appropriate error messages to the user.

[HttpPost]
public ActionResult NewsLetters(Vmclass.RegisterFeeds fd)
{
   var list = new List<string>();
   if (!ModelState.IsValid)
   {
      var errors = ViewData.ModelState.Values
                         .SelectMany(f => f.Errors
                                          .Select(x => new {Error = x.ErrorMessage,
                                                  Exception =x.Exception})).ToList();
      return Json(new {Status="error",Errors = errors});

   }
  // to do : Your existing code to save
  return Json(new {Status="success"});
}

Now in your success handle check the

function Success(result) {
    if(result.Status==="error")
    {
      $.each(result.Errors, function(a, b) {
       alert(b.Error);
      });
    }
    else
    {
        $("#status").html("Succesfully saved")
    }
}

Here i am simply alerting each of the errors. You can update that part to display errors in a list and append that to the DOM.

If you want the same action method to work with ajax form submission and not ajax submission, you can conditionally return a json response/view result. The Request.IsAjaxRequest() method will come handy here

if(Request.IsAjaxRequest())
{
   return Json(new {Status="error",Errors = errors});
}
else
{
   return View(fd);
}