从服务器端验证在ASP.Net MVC中显示成功验证消息

时间:2016-03-09 18:35:10

标签: c# jquery asp.net-mvc jquery-validate unobtrusive-validation

如果我的服务器端验证通过,我想显示一条消息,我将其从服务器传回客户端。错误消息是可能的(在ASP.Net MVC中定义为属性的属性),我可以显示成功消息吗?也许我可以使用JQuery validate插件来执行此操作?

离。我从该位置进行查找以获得一个城市,我希望将该城市作为字符串传回城市,以将其显示为验证成功消息。

这是我的代码。

    [Required()]
    [MaxLength(5)]
    [MinLength(5, ErrorMessage = "Can't find location")]
    [Display(Name = "Zip code")]
    [Remote("CheckLocation", "Account", AreaReference.UseCurrent, ErrorMessage = "Invalid zipcode")]
    public string Location { get; set; }


    [HttpGet]
    [AllowAnonymous]
    public JsonResult CheckLocation(int Location)
    {
        var city = getLocation(Location);
        if (city != null)
        {
            // pass the city back with the JSon object, but how do I display it???
            return Json(true, JsonRequestBehavior.AllowGet);
        }
        return Json(false, JsonRequestBehavior.AllowGet);
    }

编辑 这是我尝试过的。我现在使用jQuery Validate而不是我的c#属性上的远程属性。这工作正常,但如何在远程定义成功属性并将该成功消息传递给验证消息?然后将颜色更改为绿色而不是红色?

$('#Location').rules("add", {
  required: true,
  minlength: 5,
  maxlength: 5,
  messages: {
    required: "Required input",
    minlength: jQuery.validator.format("Please, {0} characters are necessary"),
    maxlength: jQuery.validator.format("Please, {0} characters are necessary")
  },
  remote: {
    url: "CheckLocation",
    type: "post",
    data: {
      Location: function() {
        return $('#Location').val();
      }
    }
  }
});

编辑2 我真的想要显示来自服务器的成功消息(例如,当输入zip时显示城市),所以我认为我可以在远程调用和回调中使用成功回调操作消息颜色并使元素有效。我认为如果JSon响应中有一个字符串,validate会将其设置为false吗?

像这样的东西。

        [HttpGet]
    [AllowAnonymous]
    public JsonResult CheckLocation(int Location)
    {
        var city = getLocation(Location);
        if (city != null)
        {
            return Json(city); // this will be text like "London"
        }
        return Json(false);
    }
$('#Location').rules("add", {
  required: true,
  //minlength: 5,
  maxlength: 5,
  messages: {
    required: "Required input",
    minlength: jQuery.validator.format("Please, {0} characters are necessary"),
    maxlength: jQuery.validator.format("Please, {0} characters are necessary")
  },
  remote: {
    url: "CheckLocation",
    type: "post",
    data: {
      Location: function() {
        return $('#Location').val();
      }
    },
    success: function(data) {
      // change the color from red to green for the message
      // make the invalid element valid so it passes submition
    }
  }
});

3 个答案:

答案 0 :(得分:1)

验证通过时,.validate()方法的

The success option用于控制消息元素。默认情况下,验证通过时会隐藏错误消息。使用success时,您可以修改此行为并在验证通过时显示图标,消息等。但是,此选项不会从您的服务器检索邮件。

jQuery Validate是客户端代码,只有一个内置方法将从服务器获取响应,这是remote方法。但是,此处的问题是您只能传递true传递验证,false验证失败...如果您传递字符串,则会将其转换为错误消息和验证失败

AFAIK,没有内置方法可以执行您想要的操作。也许您可以编写一个自定义success函数,该函数使用.ajax()从服务器检索邮件。

<强>摘要

  1. 插件通常不会显示成功消息。 success选项是强制它显示消息的一种方法。但是,这个问题是您无法将值传递给此选项。它只是在字段有效时控制错误消息对象的一种方法。

  2. remote方法外,插件通常不与服务器通信。这个问题是您只能通过true来通过验证。如果传递字符串,验证将失败(,字符串将成为验证错误消息)。

  3. 编辑以回应OP:

      

    但是如何在远程定义成功属性并将该成功消息传递给验证消息?

    您只能使用the success option来正确操作错误元素。但是,我不认为您能够达到既定目标,因为似乎没有办法将字段的值传递给success选项。否则,您可以使用.ajax()中的success来检索您的邮件。

      

    然后将颜色更改为绿色而不是红色?

    这是通过定义validerror类的CSS属性自动完成的。您还可以使用.addClass()选项中的success来应用自定义类。

    IMO,使用jQuery Validate插件无法实现您的整个目标。但是,您应该彻底审核the documentation以确保自己。

      

    我认为如果JSon响应中有字符串,validate会将其设置为false吗?

    是的,正如我在回答中所说的那样。如果服务器响应是true以外的任何,则验证将设置为失败。

答案 1 :(得分:0)

你能做的就是这个

使用ajax调用自定义操作方法而不是远程数据注释

    var url = "/MyController/CheckLocation/";

$.ajax({
    url: url,
    data: { zipcode: _zipcode },
    cache: false,
    type: "POST",
    dataType: "json"
}).done(function (obgcity) {

     //If objcity is null then display error else display city
    }
});

答案 2 :(得分:0)

我希望下面的代码可以帮助您。

public ActionResult CheckLocation(int Location)
    {
        var city = getLocation(Location);
        if (city != null)
        {
            // city is string type, example: string city="Mumbai";
            return Json(new {Status=true, City = city}, JsonRequestBehavior.AllowGet);
        }
        return Json(new { Status=false, City=""}, JsonRequestBehavior.AllowGet);
    }

现在正如Sparky在上面的消息中提到的,使用ajax调用你的动作或方法并编写自定义成功函数

 var locationId = 20;
 $.ajax({
    url: "MyController/CheckLocation",
    data: { Location: locationId},
    cache: false,
    type: "GET",
    dataType: "json",
    success: function (data) {
             if(data.Status == true)
             {
                 alert(data.City); 
                // instead of alert you can create custom message alert box,
                // or if you want to display city name or whatever message
                // you can try $("#cityId").Html("<p>this is city</p>");   
             }        
    },
    error: function (xhr, ajaxOptions, thrownError) {
        alert("Ajax Failed!!!");
     }
});