ASP.NET - Unobtrusive Validation

MVC验证

  • Model
public class FeedbackModel
{
    [DisplayName("Name:")]
    [Required]
    public string Name { get; set; }
 
    [DisplayName("Message:")]
    [Required]
    [StringLength(200, MinimumLength = 5)]
    public string Message { get; set; }
}
  • View
@{
    ViewBag.Title = "Feedback";
}
 
@model WebApplication1.Models.FeedbackModel
 
<h2>Feedback</h2>
 
@using (Html.BeginForm())
{
    <div>
        <div class="form-group">
            @Html.LabelFor(x => x.Name)
            @Html.TextBoxFor(x => x.Name, new { @class = "form-control" })
            <span class="label-danger">@Html.ValidationMessageFor(x => x.Name)</span>
        </div>
 
        <div class="form-group">
            @Html.LabelFor(x => x.Message)
            @Html.TextBoxFor(x => x.Message, new { @class = "form-control" })
            <span class="label-danger">@Html.ValidationMessageFor(x => x.Message)</span>
        </div>
 
        <div class="form-group">
            <input type="submit" class="form-control" value="Post" />
        </div>
    </div>
}
@{
    ViewBag.Title = "Message";
}
 
@model string
 
<h2>Message</h2>
 
<div class="panel panel-danger">
    <div class="panel-heading"> <h2 class="panel-title">消息</h2> </div>
    <div class="panel-body">内容: @Model</div>
</div>
  • Controller
[HttpGet]
public ActionResult Feedback()
{
    FeedbackModel model = new FeedbackModel();
    return View(model);
}
 
[HttpPost]
public ActionResult Feedback(FeedbackModel model)
{
    if (!ModelState.IsValid)
    {
        return View(model);
    }
    return View(viewName: "Message", model: "操作已完成!");
}

配置为客户端验证

  • web.config
<appSettings>
  <add key="webpages:Version" value="3.0.0.0" />
  <add key="webpages:Enabled" value="false" />
  <add key="ClientValidationEnabled" value="true" />
  <add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>
  • 网页渲染
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
...
<form action="/Home/Feedback" method="post">
    <div>
        <div class="form-group">
            <label for="Name">Name:</label>
            <input class="form-control" data-val="true" data-val-required="The Name: field is required." id="Name" name="Name" type="text" value="" />
            <span class="label-danger"><span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span></span>
        </div>
 
        <div class="form-group">
            <label for="Message">Message:</label>
            <input class="form-control" data-val="true" data-val-length="The field Message: must be a string with a minimum length of 5 and a maximum length of 200." data-val-length-max="200" data-val-length-min="5" data-val-required="The Message: field is required." id="Message" name="Message" type="text" value="" />
            <span class="label-danger"><span class="field-validation-valid" data-valmsg-for="Message" data-valmsg-replace="true"></span></span>
        </div>
 
        <div class="form-group">
            <input type="submit" class="form-control" value="Post" />
        </div>
    </div>
</form>

演示效果如下,因为是客户端验证,所以不会产生网络请求

MVC client validation!

配置为服务器验证

  • web.config
<appSettings>
  <add key="webpages:Version" value="3.0.0.0" />
  <add key="webpages:Enabled" value="false" />
  <add key="ClientValidationEnabled" value="false" />
  <add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>
  • 网页渲染
<form action="/Home/Feedback" method="post">
    <div>
        <div class="form-group">
            <label for="Name">Name:</label>
            <input class="form-control" id="Name" name="Name" type="text" value="" />
            <span class="label-danger"></span>
        </div>
 
        <div class="form-group">
            <label for="Message">Message:</label>
            <input class="form-control" id="Message" name="Message" type="text" value="" />
            <span class="label-danger"></span>
        </div>
 
        <div class="form-group">
            <input type="submit" class="form-control" value="Post" />
        </div>
    </div>
</form>

演示效果如下,因为是服务器验证,所以会产生网络请求

MVC server validation!