Использование Metro CSS 3 Проверка формы в MVC

Question

Я хочу использовать средство проверки формы от Metro CSS 3 в моем приложении MVC 5.

Мой код выглядит следующим образом:

@using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form" })) 
{ 
    @Html.AntiForgeryToken() 
    <h4>@WebApplication.Resources.Account.AccountRegisterPageHeader</h4> 
    <hr /> 
    @*@Html.ValidationSummary("", new { @class = "text-danger" })*@ 
    <div class="form-group"> 
     @Html.ValidationMessageFor(model => model.FirstName) 
     @Html.LabelFor(m => m.FirstName, new {@class = "col-md-2 control-label"}) 
     <div class="col-md-10"> 
      @Html.TextBoxFor(m => m.FirstName, new {@class = "form-control"}) 
     </div> 
    </div> 
    <div class="form-group"> 
     @Html.LabelFor(m => m.Password, new { @class = "col-md-2 control-label" }) 
     <div class="col-md-10"> 
      @Html.PasswordFor(m => m.Password, new { @class = "form-control" }) 
     </div> 
    </div> 
    <div class="form-group"> 
     @Html.LabelFor(m => m.ConfirmPassword, new { @class = "col-md-2 control-label" }) 
     <div class="col-md-10"> 
      @Html.PasswordFor(m => m.ConfirmPassword, new { @class = "form-control" }) 
     </div> 
    </div> 
    <div class="form-group"> 
     <div class="col-md-offset-2 col-md-10"> 
      <input type="submit" class="btn btn-default" value="Register" /> 
     </div> 
    </div> 
} 

Кусок кода от CSS метро выглядит следующим образом:

<div class="input-control text"> 
    <input 
     data-validate-func="minlength" 
     data-validate-arg="6" 
     data-validate-hint="This field must contains min 6 symbols!" 
     type="text"> 
    <span class="input-state-error mif-warning"></span> 
    <span class="input-state-success mif-checkmark"></span> 
</div> 

Как я могу использовать @ Html.LabelFor, @ Html.ValidationMessageFor () и т. Д.?

Answer 1

<form data-role="validator" data-hint-mode="hint" data-hint-easing="easeOutBounce"> 

      <div class="row cells2 "> 
       <div class="cell"> 

         <label class="block">Min length control (hint)</label> 
          <div class="input-control text"> 
           @Html.TextBoxFor(model => model.Title,new {data_validate_func="minlength",data_validate_arg="30", data_validate_hint="Min length 6 sym !" ,data_validate_hint_position="left"}) 
           @*<input type="text" data-validate-func="minlength" data-validate-arg="6" data-validate-hint="Min length 6 sym !" data-validate-hint-position="top">*@ 
           <span class="input-state-error mif-warning"></span> 
           <span class="input-state-success mif-checkmark"></span> 
          </div> 
         <div> 
          <input type="submit"/> 
         </div> 




       </div>