使用WebAPI 2和AngularJS

时间:2015-06-02 09:09:07

标签: javascript angularjs validation asp.net-web-api model-validation

我对使用WebAPI 2和AngularJS的主题表单验证/模型验证感到有些困惑。在AngularJS中,我在我的视图中使用表单验证如下:

<div class="form-group-sm has-feedback" ng-class="myForm.name.$error.required ? 'has-error' : 'has-success'">
   <label class="control-label" for="name-id">Name</label>
      <input type="text" 
             class="form-control" 
             placeholder="Name" 
             name="name" 
             id="name-id"
             ng-model="selected.name" 
             ng-required="true" 
             popover-placement="bottom" 
             popover-animation="true" 
             popover="Field must contains at least 4 letters." 
             popover-trigger="focus"
             />

仅当输入字段少于4个字母时,才会显示弹出消息。替代我默认定义了这个错误:

<div class="error" ng-show="myForm.name.$dirty && myForm.name.$invalid">
   <div class="error" ng-show="myForm.name.$error.required">Field must contains at least 4 letters.</div>
</div>

我还使用引导类has-errorhas-success作为相应的消息颜色。

目前在我的WebAPI 2中我使用模型验证如下:

//Model
public int Id { get; set; }
[Required]
[MaxLength(20, ErrorMessage="Field must contains at least 5 letters.")]
public string name { get; set; }

在我的Ctrl中我使用了ModelState方法。

//Controller
[HttpPost]
public HttpResponseMessage PostPerson(Person item)
{
  if (ModelState.IsValid)
  {
    item = _rep.Add(item);
    var response = Request.CreateResponse<Person>(HttpStatusCode.Created, item);
    string uri = Url.Link("DefaultApi", new { id = item.Id });
    response.Headers.Location = new Uri(uri);

    return response;
  }

  throw new HttpResponseException(HttpStatusCode.BadRequest);
}

我故意在WebApi的错误消息中使用了不同的数字,以在视图中显示WebApi的消息。我的问题是,什么是好的做法?要在客户端或服务器端定义消息并在客户端返回消息?如何将模型Person中的错误消息发送到客户端的视图?在控制器中定义ModelState是否合适?我读过一些文章,使用过滤器,例如ValidateModelAttribute : FilterAttribute比在控制器中定义ModelState更好..但为什么?

0 个答案:

没有答案