ASP MVC - 表单输入类型和模型绑定问题答案

【问题标题】：ASP MVC - Form input types and model binding issuesASP MVC - 表单输入类型和模型绑定问题
【发布时间】：2017-05-27 21:13:08
【问题描述】：

我正在玩服务器端表单验证、模型绑定和 ModelState，我注意到以下几点：

如果我有“电子邮件”类型的输入并且我插入了无效的电子邮件地址（例如'hello'），模型绑定不起作用 - 值显示为“空”。
但是，如果我插入一个有效的电子邮件地址，一切顺利。

有人可以向我解释为什么会这样吗？提前致谢！

表格：

<form name="contactForm" id="contactF" ng-controller="Contacts"  ng-submit="contactForm.$invalid ? sendMessage() : return;" novalidate>   
    <input type="email" name="email" ng-model="model.EmailAddress" required placeholder="Email"/>
    <div ng-messages="contactForm.email.$error" ng-if="contactForm.email.$touched || contactForm.$submitted">
        <div ng-messages-include="/Helpers/error-messages.html"></div>
    </div>

    <textarea name="message" ng-model="model.message" required placeholder="Escreva a sua mensagem aqui."></textarea>
    <div ng-messages="contactForm.message.$error" ng-if="contactForm.message.$touched || contactForm.$submitted">
        <div ng-messages-include="/Helpers/error-messages.html"></div>
    </div>
    <br />
    <input type="submit" value="Enviar"/>
</form>

型号：

public class HomeContactVM 
{
    [Required(ErrorMessage = "Error message here")]
    public string Name { get; set; }

    [Required(ErrorMessage = "Error msg here.")]
    [EmailAddress(ErrorMessage = "Please use a valid email address.")]
    public string EmailAddress { get; set; }

    [Required(ErrorMessage = "Error msg here.")]
    public string Message { get; set; }
}

动作方法：

[HttpPost]
public JsonResult Contact(HomeContactVM model) 
{
    string message;
    if (ModelState.IsValid) 
    {
        using (SmtpClient client = new SmtpClient()) 
        {
            MailMessage msg = new MailMessage()
            {
                Body = model.Message,
                BodyEncoding = Encoding.UTF8,
                Subject = "New message from " + model.EmailAddress,
                From = new MailAddress(model.EmailAddress),
                Sender = new MailAddress("xxx@gmail.com", "xx")
            };

            int retries = 5;
            bool retry = true;
            while (retry) 
            {
                try 
                {
                    client.Send(msg);
                    message = "Your message was sent.";
                    return Json(message, JsonRequestBehavior.AllowGet);
                }
                catch (Exception) 
                {
                    if (retries > 0) {
                                retries--;
                    }
                    else {
                        retry = false;
                        message = "Something went wrong. Please try again later.";
                        return Json(message, JsonRequestBehavior.AllowGet);
                    }
                }
            }
        }
    }
    message = "Your model is not valid.";
    return Json( message, JsonRequestBehavior.AllowGet);
}

【问题讨论】：

您的模型属性是EmailAddress，但输入名称是email - 其中一个不正确。
您的输入类型是电子邮件，无论如何它是如何通过 html 验证的，它不应该允许提交。，它会向您显示一条消息无效电子邮件，它不会验证的唯一方法是什么时候它是空的，但您的输入是必需的，因此它也将验证为空。这很奇怪
Tieson T - 只是更改了它，问题仍然存在（模型绑定仅在电子邮件地址有效时才有效）； Munzer - 你在谈论客户端验证？它通过了，因为我在 ng-submit 指令中添加了 AngularJS $invalid（我这样做只是为了绕过客户端验证并测试服务器端验证）

标签： asp.net-mvc html

【解决方案1】：

所以，如果有人遇到同样的问题，我发现：问题与 ASP 无关，这是由于 Angular 的默认行为所致。如果输入验证失败，Angular 会将其值设置为 undefined 并且不会将其传递给模型，因此它显示为 null。一种可能的解决方法是设置 ng-model-options="{allowInvalid: true}"

您可以在此处找到有关此行为的更多信息：Angular.js - ngModel value is undefined when ng-pattern is set in directive 和 Get "raw" value from invalid input field

希望这会有所帮助！

【讨论】：