Razor 및 Unobtrusive JavaScript를 사용하여 MVC 3 애플리케이션 만들기
사용자 목록 샘플 웹 애플리케이션은 Razor 보기 엔진을 사용하여 ASP.NET MVC 3 애플리케이션을 만드는 것이 얼마나 간단한지 보여 줍니다. 샘플 애플리케이션에서는 ASP.NET MVC 버전 3 및 Visual Studio 2010과 함께 새 Razor 보기 엔진을 사용하여 사용자 만들기, 표시, 편집 및 삭제와 같은 기능을 포함하는 가상의 사용자 목록 웹 사이트를 만드는 방법을 보여 줍니다.
이 자습서에서는 MVC 3 애플리케이션에 ASP.NET 사용자 목록 샘플을 빌드하기 위해 수행된 단계를 설명합니다. C# 및 VB 소스 코드가 포함된 Visual Studio 프로젝트는 다운로드 항목과 함께 사용할 수 있습니다. 이 자습서에 대한 질문이 있는 경우 MVC 포럼에 게시하세요.
개요
빌드할 애플리케이션은 간단한 사용자 목록 웹 사이트입니다. 사용자는 사용자 정보를 입력, 보기 및 업데이트할 수 있습니다.
여기에서 VB 및 C# 완료 프로젝트를 다운로드할 수 있습니다.
웹 애플리케이션 만들기
자습서를 시작하려면 Visual Studio 2010을 열고 ASP.NET MVC 3 웹 애플리케이션 템플릿을 사용하여 새 프로젝트를 만듭니다. 애플리케이션 이름을 "Mvc3Razor"로 지정합니다.
새 ASP.NET MVC 3 프로젝트 대화 상자에서 인터넷 애플리케이션을 선택하고 Razor 보기 엔진을 선택한 다음 확인을 클릭합니다.
이 자습서에서는 ASP.NET 멤버 자격 공급자를 사용하지 않으므로 로그온 및 멤버 자격과 관련된 모든 파일을 삭제할 수 있습니다. 솔루션 탐색기 다음 파일 및 디렉터리를 제거합니다.
- Controllers\AccountController
- Models\AccountModels
- Views\Shared\_LogOnPartial
- Views\Account (및 이 디렉터리의 모든 파일)
_Layout.cshtml 파일을 편집하고 라는 logindisplay 요소 내의 태그를 <div>"로그인 사용 안 함" 메시지로 바꿉니다. 다음 예제에서는 새 태그를 보여 줍니다.
<div id="logindisplay">
Login Disabled
</div>
모델 추가
솔루션 탐색기Models 폴더를 마우스 오른쪽 단추로 클릭하고 추가를 선택한 다음 클래스를 클릭합니다.
클래스 UserModel 이름을 지정합니다. UserModel 파일의 내용을 다음 코드로 바꿉니다.
using System.ComponentModel.DataAnnotations;
using System.Collections.Generic;
namespace Mvc3Razor.Models {
public class UserModel {
[Required]
[StringLength(6, MinimumLength = 3)]
[Display(Name = "User Name")]
[RegularExpression(@"(\S)+", ErrorMessage = "White space is not allowed")]
[ScaffoldColumn(false)]
public string UserName { get; set; }
[Required]
[StringLength(8, MinimumLength = 3)]
[Display(Name = "First Name")]
public string FirstName { get; set; }
[Required]
[StringLength(9, MinimumLength = 2)]
[Display(Name = "Last Name")]
public string LastName { get; set; }
[Required()]
public string City { get; set; }
}
public class Users {
public Users() {
_usrList.Add(new UserModel
{
UserName = "BenM",
FirstName = "Ben",
LastName = "Miller",
City = "Seattle"
});
_usrList.Add(new UserModel
{
UserName = "AnnB",
FirstName = "Ann",
LastName = "Beebe",
City = "Boston"
});
}
public List<UserModel> _usrList = new List<UserModel>();
public void Update(UserModel umToUpdate) {
foreach (UserModel um in _usrList) {
if (um.UserName == umToUpdate.UserName) {
_usrList.Remove(um);
_usrList.Add(umToUpdate);
break;
}
}
}
public void Create(UserModel umToUpdate) {
foreach (UserModel um in _usrList) {
if (um.UserName == umToUpdate.UserName) {
throw new System.InvalidOperationException("Duplicat username: " + um.UserName);
}
}
_usrList.Add(umToUpdate);
}
public void Remove(string usrName) {
foreach (UserModel um in _usrList) {
if (um.UserName == usrName) {
_usrList.Remove(um);
break;
}
}
}
public UserModel GetUser(string uid) {
UserModel usrMdl = null;
foreach (UserModel um in _usrList)
if (um.UserName == uid)
usrMdl = um;
return usrMdl;
}
}
}
클래스는 UserModel 사용자를 나타냅니다. 클래스의 각 멤버는 DataAnnotations 네임스페이스의 Required 특성으로 주석을 추가합니다. DataAnnotations 네임스페이스의 특성은 웹 애플리케이션에 대한 자동 클라이언트 및 서버 쪽 유효성 검사를 제공합니다.
클래스를 HomeController 열고 및 Users 클래스에 using 액세스할 UserModel 수 있도록 지시문을 추가합니다.
using Mvc3Razor.Models;
선언 직후 HomeController 에 다음 주석과 참조를 클래스에 Users 추가합니다.
public class HomeController : Controller {
// The __usrs class is replacement for a real data access strategy.
private static Users _usrs = new Users();
클래스는 Users 이 자습서에서 사용할 간소화된 메모리 내 데이터 저장소입니다. 실제 애플리케이션에서는 데이터베이스를 사용하여 사용자 정보를 저장합니다. 파일의 HomeController 처음 몇 줄은 다음 예제에 나와 있습니다.
using System.Web.Mvc;
using Mvc3Razor.Models;
namespace Mvc3Razor.Controllers {
public class HomeController : Controller {
// The __usrs class is replacement for a real data access strategy.
private static Users _usrs = new Users();
다음 단계에서 사용자 모델을 스캐폴딩 마법사에 사용할 수 있도록 애플리케이션을 빌드합니다.
기본 보기 만들기
다음 단계는 작업 메서드 및 뷰를 추가하여 사용자를 표시하는 것입니다.
기존 Views\Home\Index 파일을 삭제합니다. 사용자를 표시하는 새 인덱스 파일을 만듭니다.
클래스에서 HomeController 메서드의 Index 내용을 다음 코드로 바꿉니다.
return View(_usrs._usrList);
메서드 내부를 마우스 오른쪽 단추로 Index 클릭한 다음 보기 추가를 클릭합니다.
강력한 형식의 보기 만들기 옵션을 선택합니다. 데이터 클래스 보기에서 Mvc3Razor.Models.UserModel을 선택합니다. (데이터 클래스 보기 상자에 Mvc3Razor.Models.UserModel이 표시되지 않으면 프로젝트를 빌드해야 합니다.) 뷰 엔진이 Razor로 설정되어 있는지 확인합니다. 콘텐츠 보기를목록으로 설정한 다음 추가를 클릭합니다.
새 보기는 보기에 전달된 Index 사용자 데이터를 자동으로 스캐폴드합니다. 새로 생성된 Views\Home\Index 파일을 검사합니다. 새로 만들기, 편집, 세부 정보 및 삭제 링크는 작동하지 않지만 페이지의 나머지 부분도 작동합니다. 페이지를 실행합니다. 사용자 목록이 표시됩니다.
Index.cshtml 파일을 열고 편집, 세부 정보 및 삭제에 대한 태그를 다음 코드로 바꿉 ActionLink 니다.
@Html.ActionLink("Edit", "Edit", new { id=item.UserName }) |
@Html.ActionLink("Details", "Details", new { id=item.UserName }) |
@Html.ActionLink("Delete", "Delete", new { id=item.UserName })
사용자 이름은 ID로 사용하여 편집, 세부 정보 및 삭제 링크에서 선택한 레코드를 찾 습니다 .
세부 정보 보기 만들기
다음 단계는 사용자 세부 정보를 표시하기 위해 작업 메서드 및 뷰를 추가하는 Details 것입니다.
홈 컨트롤러에 다음 메서드를 추가합니다 Details .
public ViewResult Details(string id) {
return View(_usrs.GetUser(id));
}
메서드 내부를 마우스 오른쪽 단추로 Details 클릭한 다음 보기 추가를 선택합니다. 데이터 클래스 보기 상자에 Mvc3Razor.Models.UserModel이 포함되어 있는지 확인합니다.콘텐츠 보기를세부 정보로 설정한 다음 추가를 클릭합니다.
애플리케이션을 실행하고 세부 정보 링크를 선택합니다. 자동 스캐폴딩은 모델의 각 속성을 표시합니다.
편집 보기 만들기
홈 컨트롤러에 다음 Edit 메서드를 추가합니다.
public ViewResult Edit(string id) {
return View(_usrs.GetUser(id));
}
[HttpPost]
public ViewResult Edit(UserModel um) {
if (!TryUpdateModel(um)) {
ViewBag.updateError = "Update Failure";
return View(um);
}
// ToDo: add persistent to DB.
_usrs.Update(um);
return View("Details", um);
}
이전 단계에서와 같이 보기를 추가하지만 콘텐츠 보기를편집으로 설정합니다.
애플리케이션을 실행하고 사용자 중 하나의 이름과 성을 편집합니다. 클래스에 UserModel 적용된 제약 조건을 위반 DataAnnotation 하는 경우 양식을 제출할 때 서버 코드에서 생성된 유효성 검사 오류가 표시됩니다. 예를 들어 이름 "Ann"을 "A"로 변경하면 양식을 제출할 때 양식에 다음 오류가 표시됩니다.
The field First Name must be a string with a minimum length of 3 and a maximum length of 8.
이 자습서에서는 사용자 이름을 기본 키로 처리합니다. 따라서 사용자 이름 속성을 변경할 수 없습니다. Edit.cshtml 파일에서 문 바로 뒤의 Html.BeginForm 사용자 이름을 숨겨진 필드로 설정합니다. 이렇게 하면 속성이 모델에 전달됩니다. 다음 코드 조각은 문의 배치를 보여 줍니다.Hidden
<h2>Edit</h2>
@using (Html.BeginForm()) {
@Html.Hidden("UserName", Model.UserName)
사용자 이름에 TextBoxFor 대한 및 ValidationMessageFor 태그를 호출로 DisplayFor 바꿉 있습니다. 메서드는 DisplayFor 속성을 읽기 전용 요소로 표시합니다. 다음 예제에서는 전체 태그를 보여 줍니다. 원래 TextBoxFor 및 ValidationMessageFor 호출은 Razor begin-comment 및 end-comment 문자(@* *@)로 주석 처리됩니다.
<div class="editor-label">
@Html.LabelFor(model => model.UserName)
</div>
<div class="editor-field">
@*
@Html.TextBoxFor(model => model.UserName)
@Html.ValidationMessageFor(model => model.UserName)
*@
@Html.DisplayFor(model => model.UserName)
</div>
Client-Side 유효성 검사 사용
ASP.NET MVC 3에서 클라이언트 쪽 유효성 검사를 사용하도록 설정하려면 두 개의 플래그를 설정해야 하며 3개의 JavaScript 파일을 포함해야 합니다.
애플리케이션의 Web.config 파일을 엽니다. 및 UnobtrusiveJavaScriptEnabled 가 애플리케이션 설정에서 true로 설정되어 있는지 확인 that ClientValidationEnabled 합니다. 루트 Web.config 파일의 다음 조각에는 올바른 설정이 표시됩니다.
<appSettings>
<add key="ClientValidationEnabled" value="true"/>
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>
</appSettings>
true로 설정 UnobtrusiveJavaScriptEnabled 하면 눈에 거슬리지 않는 Ajax 및 눈에 거슬리지 않는 클라이언트 유효성 검사가 가능합니다. 눈에 거슬리지 않는 유효성 검사를 사용하면 유효성 검사 규칙이 HTML5 특성으로 바꿔집니다. HTML5 특성 이름은 소문자, 숫자 및 대시로만 구성됩니다.
를 true로 설정 ClientValidationEnabled 하면 클라이언트 쪽 유효성 검사를 사용할 수 있습니다. 애플리케이션 Web.config 파일에서 이러한 키를 설정하여 전체 애플리케이션에 대해 클라이언트 유효성 검사 및 눈에 거슬리지 않는 JavaScript를 사용하도록 설정합니다. 다음 코드를 사용하여 개별 보기 또는 컨트롤러 메서드에서 이러한 설정을 사용하거나 사용하지 않도록 설정할 수도 있습니다.
HtmlHelper.ClientValidationEnabled = true;
HtmlHelper.UnobtrusiveJavaScriptEnabled = true;
또한 렌더링된 보기에 여러 JavaScript 파일을 포함해야 합니다. 모든 보기에 JavaScript를 포함하는 쉬운 방법은 Views\Shared\_Layout.cshtml 파일에 추가하는 것입니다. <head>_Layout.cshtml 파일의 요소를 다음 코드로 바꿉니다.
<head>
<title>@View.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
</head>
처음 두 jQuery 스크립트는 Microsoft AJAX CDN(Content Delivery Network)에서 호스트됩니다. Microsoft Ajax CDN을 활용하여 애플리케이션의 첫 번째 적중 성능을 크게 향상시킬 수 있습니다.
애플리케이션을 실행하고 편집 링크를 클릭합니다. 브라우저에서 페이지의 원본을 봅니다. 브라우저 원본에는 양식 data-val 의 여러 특성이 표시됩니다(데이터 유효성 검사용). 클라이언트 유효성 검사 및 눈에 거슬리지 않는 JavaScript를 사용하는 경우 클라이언트 유효성 검사 규칙이 있는 입력 필드에는 눈에 거슬리지 않는 클라이언트 유효성 검사를 트리거하는 특성이 포함 data-val="true" 됩니다. 예를 들어 City 모델의 필드는 필수 특성으로 데코레이트되어 다음 예제에 표시된 HTML을 생성합니다.
<div class="editor-field">
<input data-val="true" data-val-required="The City field is required." id="City" name="City" type="text" value="Seattle" />
<span class="field-validation-valid" data-valmsg-for="City" data-valmsg-replace="true"></span>
</div>
각 클라이언트 유효성 검사 규칙에 대해 형식 data-val-rulename="message"이 인 특성이 추가됩니다. 앞부분에 표시된 필드 예제를 City 사용하여 필수 클라이언트 유효성 검사 규칙은 특성과 "도시 필드가 필요합니다"라는 메시지를 생성합니다 data-val-required . 애플리케이션을 실행하고, 사용자 중 하나를 편집하고, 필드를 지웁 수 있습니다 City . 필드 밖으로 탭하면 클라이언트 쪽 유효성 검사 오류 메시지가 표시됩니다.
마찬가지로 클라이언트 유효성 검사 규칙의 각 매개 변수에 대해 형식 data-val-rulename-paramname=paramvalue이 인 특성이 추가됩니다. 예를 들어 속성은 FirstNameStringLength 특성으로 주석을 추가하고 최소 길이 3과 최대 길이 8을 지정합니다. 라는 데이터 유효성 검사 규칙에는 매개 변수 이름과 max 매개 변수 값 8이 있습니다length. 다음은 사용자 중 하나를 편집할 때 필드에 대해 FirstName 생성되는 HTML을 보여줍니다.
<input data-val="true"
data-val-length="The field First Name must be a string with a minimum length of 3 and a maximum length of 8."
data-val-length-max="8"
data-val-length-min="3"
data-val-required="The First Name field is required."
id="FirstName"
name="FirstName"
type="text"
value="Ben" />
눈에 거슬리지 않는 클라이언트 유효성 검사에 대한 자세한 내용은 Brad Wilson의 블로그 에 있는 ASP.NET MVC 3의 눈에 거슬리지 않는 클라이언트 유효성 검사 항목을 참조하세요.
참고
ASP.NET MVC 3 베타에서는 클라이언트 쪽 유효성 검사를 시작하기 위해 양식을 제출해야 하는 경우가 있습니다. 최종 릴리스에 대해 변경될 수 있습니다.
보기 만들기
다음 단계는 사용자가 새 사용자를 만들 수 있도록 작업 메서드 및 뷰를 추가하는 Create 것입니다. 홈 컨트롤러에 다음 메서드를 추가합니다 Create .
public ViewResult Create() {
return View(new UserModel());
}
[HttpPost]
public ViewResult Create(UserModel um) {
if (!TryUpdateModel(um)) {
ViewBag.updateError = "Create Failure";
return View(um);
}
// ToDo: add persistent to DB.
_usrs.Create(um);
return View("Details", um);
}
이전 단계에서와 같이 보기를 추가하지만 콘텐츠 보기를만들기로 설정합니다.
애플리케이션을 실행하고 , 만들기 링크를 선택하고, 새 사용자를 추가합니다. 메서드는 Create 클라이언트 쪽 및 서버 쪽 유효성 검사를 자동으로 활용합니다. 공백이 포함된 사용자 이름(예: "Ben X")을 입력해 보세요. 사용자 이름 필드에서 탭하면 클라이언트 쪽 유효성 검사 오류(White space is not allowed)가 표시됩니다.
Delete 메서드 추가
자습서를 완료하려면 홈 컨트롤러에 다음 Delete 메서드를 추가합니다.
public ViewResult Delete(string id) {
return View(_usrs.GetUser(id));
}
[HttpPost]
public RedirectToRouteResult Delete(string id, FormCollection collection) {
_usrs.Remove(id);
return RedirectToAction("Index");
}
Delete 이전 단계에서와 같이 보기를 추가하고 콘텐츠 보기를삭제로 설정합니다.
이제 유효성 검사를 통해 간단하지만 완벽하게 작동하는 ASP.NET MVC 3 애플리케이션이 있습니다.