MVC3 TextArea Client Validation하기

오늘 같은 회사의 직원이 client validation을 하는것을 보고 나도 해 봤다.

하나 발견한건 MS의 버그?

TestArea는 client validation이 안먹는다 즉 서버까지 간다는 말씀.

아 어의상실

아무튼 내가 만든 코드를 보겠다. 

Step 1 : 두개의 모델을 만든다.

public class Person
	{
 
		public string Name { get; set; }
		public Address Address { get; set; }
 
	}
	public class Address
	{
		[Required]
		[DataType(DataType.MultilineText)]
		public string Address1 { get; set; }
		public string Address2 { get; set; } 

}

위의 Address클래스에 Address1속성에 Annotation을 준다 간단하게 Required만 두번째로 DataTaype특성을 줬는데
이 기능은 Address1에 해당하는 Text박스를 TextArea처럼 MultiLne을 갖는 Text박스로 만들기 위해서다.

Step2 : HomeController Index 메서드를 아래와 같이 작성한다.  

[HttpGet]
		public ActionResult Index()
		{
			ViewBag.Message = "Welcome to ASP.NET MVC!";
 
			return View(new Person());
		}
 
		[HttpPost]
		public ActionResult Index(Person person)
		{
 
			if (ModelState.IsValid)
			{
 
			}
			return View();
  

} 

처음요청이 들어왔을때 빈객체 Person을 리턴한다.


Steop3 : View를 아래와 같이 작성한다.

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
 
@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Person</legend>
 
        <div class="editor-label">
            @Html.LabelFor(model => model.Name)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Name)
            @Html.ValidationMessageFor(model => model.Name)
        </div>
		<div class="editor-field">
            @Html.EditorFor(model => model.Address.Address1)
            @Html.ValidationMessageFor(model => model.Address.Address1)
        </div>
		<div class="editor-field">
            @Html.EditorFor(model => model.Address.Address2)
            @Html.ValidationMessageFor(model => model.Address.Address2)
        </div>
        <p>
            <input type="submit" value="Save" />
        </p>
    </fieldset>
}



주위할점은 클라이언트의 스크립트를 사용하려면 web.config에 생기는 아래의 부분이 모두 true가 되어야한다.

<appSettings>   
    <add key="ClientValidationEnabled" value="true"/>
    <add key="UnobtrusiveJavaScriptEnabled" value="true"/>
  </appSettings > 


위와같이 하면 클라이언트단에서 서버에 가지 않고 validation이 된다.