이 자습서 시리즈에서는 ASP.NET Web Forms 프로젝트에서 모델 바인딩을 사용하는 기본 측면을 보여 줍니다. 모델 바인딩을 사용하면 데이터 원본 개체(예: ObjectDataSource 또는 SqlDataSource)를 처리하는 것보다 데이터 상호 작용이 더 간단해집니다. 이 시리즈는 소개 자료로 시작하고 이후 자습서에서 고급 개념으로 이동합니다.
이 자습서에서는 JQuery UI Datepicker 위젯 을 웹 양식에 추가하고 모델 바인딩을 사용하여 선택한 값으로 데이터베이스를 업데이트하는 방법을 보여줍니다.
이 자습서는 시리즈의 첫 번째 및 두 번째 부분에서 만든 프로젝트를 기반으로 합니다.
C# 또는 VB에서 전체 프로젝트를 다운로드 할 수 있습니다. 다운로드 가능한 코드는 Visual Studio 2012 또는 Visual Studio 2013 작동합니다. 이 자습서에 표시된 Visual Studio 2013 템플릿과 약간 다른 Visual Studio 2012 템플릿을 사용합니다.
빌드할 내용
이 자습서에서는 다음을 수행합니다.
- 모델에 속성을 추가하여 학생의 등록 날짜를 기록합니다.
- 사용자가 JQuery UI Datepicker 위젯을 사용하여 등록 날짜를 선택할 수 있도록 설정
- 등록 날짜에 대한 유효성 검사 규칙 적용
JQuery UI Datepicker 위젯을 사용하면 사용자가 필드와 상호 작용할 때 표시되는 일정에서 날짜를 쉽게 선택할 수 있습니다. 이 위젯을 사용하면 날짜를 수동으로 입력하는 것보다 사용자에게 더 편리할 수 있습니다. 데이터 작업에 모델 바인딩을 사용하는 페이지에 Datepicker 위젯을 통합하려면 약간의 추가 작업만 있으면 됩니다.
모델에 새 속성 추가
먼저 Student 모델에 Datetime 속성을 추가하고 해당 변경 내용을 데이터베이스로 마이그레이션합니다. UniversityModels.cs를 열고 강조 표시된 코드를 Student 모델에 추가합니다.
public class Student
{
[Key, Display(Name = "ID")]
[ScaffoldColumn(false)]
public int StudentID { get; set; }
[Required, StringLength(40), Display(Name="Last Name")]
public string LastName { get; set; }
[Required, StringLength(20), Display(Name = "First Name")]
public string FirstName { get; set; }
[EnumDataType(typeof(YearEnum)), Display(Name = "Academic Year")]
public YearEnum AcademicYear { get; set; }
[Range(typeof(DateTime), "1/1/2013", "1/1/3000", ErrorMessage="Please provide an enrollment date after 1/1/2013")]
[DisplayFormat(ApplyFormatInEditMode=true, DataFormatString="{0:d}")]
public DateTime EnrollmentDate { get; set; }
public virtual ICollection Enrollments { get; set; }
}
RangeAttribute는 속성에 대한 유효성 검사 규칙을 적용하기 위해 포함됩니다. 이 자습서에서는 Contoso University가 2013년 1월 1일에 설립되었으므로 이전 등록 날짜가 유효하지 않다고 가정합니다.
패키지 관리 창에서 add-migration AddEnrollmentDate 명령을 실행하여 마이그레이션을 추가합니다. 마이그레이션 코드는 새 Datetime 열을 Student 테이블에 추가합니다. RangeAttribute에서 지정한 값과 일치하려면 아래 강조 표시된 코드와 같이 새 열의 기본값을 추가합니다.
namespace ContosoUniversity.Migrations
{
using System;
using System.Data.Entity.Migrations;
public partial class AddEnrollmentDate : DbMigration
{
public override void Up()
{
AddColumn("dbo.Students", "EnrollmentDate", c =>
c.DateTime(nullable: false, defaultValue: new DateTime(2013, 1, 1)));
}
public override void Down()
{
DropColumn("dbo.Students", "EnrollmentDate");
}
}
}
마이그레이션 파일에 변경 내용을 저장합니다.
데이터를 다시 시드할 필요가 없습니다. 따라서 Migrations 폴더에서 Configuration.cs 를 열고 Seed 메서드에서 코드를 제거하거나 주석 처리합니다. 파일을 저장하고 닫습니다.
이제 update-database 명령을 실행합니다. 이제 열이 데이터베이스에 있고 모든 기존 레코드에 EnrollmentDate의 기본값이 있습니다.
등록 날짜에 대한 동적 컨트롤 추가
이제 등록 날짜를 표시하고 편집하기 위한 컨트롤을 추가합니다. 이 시점에서 값은 텍스트 상자를 통해 편집됩니다. 자습서의 뒷부분에서 텍스트 상자를 JQuery Datepicker 위젯으로 변경합니다.
먼저 AddStudent.aspx 파일을 변경할 필요가 없다는 점에 유의해야 합니다. DynamicEntity 컨트롤은 새 속성을 자동으로 렌더링합니다.
Students.aspx를 열고 다음 강조 표시된 코드를 추가합니다.
<asp:GridView runat="server" ID="studentsGrid"
ItemType="ContosoUniversity.Models.Student" DataKeyNames="StudentID"
SelectMethod="studentsGrid_GetData"
UpdateMethod="studentsGrid_UpdateItem" DeleteMethod="studentsGrid_DeleteItem"
AllowSorting="true" AllowPaging="true" PageSize="4"
AutoGenerateEditButton="true" AutoGenerateDeleteButton="true"
AutoGenerateColumns="false">
<Columns>
<asp:DynamicField DataField="StudentID" />
<asp:DynamicField DataField="LastName" />
<asp:DynamicField DataField="FirstName" />
<asp:DynamicField DataField="Year" />
<asp:DynamicField DataField="EnrollmentDate" />
<asp:TemplateField HeaderText="Total Credits">
<ItemTemplate>
<asp:Label Text="<%# Item.Enrollments.Sum(en => en.Course.Credits) %>"
runat="server" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
애플리케이션을 실행하고 날짜를 입력하여 등록 날짜의 값을 설정할 수 있습니다. 새 학생을 추가할 때:
또는 기존 값을 편집합니다.
날짜를 입력하면 작동하지만 제공하려는 고객 환경이 아닐 수 있습니다. 다음 섹션에서는 일정을 통해 날짜를 선택할 수 있습니다.
JQuery UI를 사용하도록 NuGet 패키지 설치
Juice UI NuGet 패키지를 사용하면 JQuery UI 위젯을 웹 애플리케이션에 쉽게 통합할 수 있습니다. 이 패키지를 사용하려면 NuGet을 통해 설치합니다.
설치하는 Juice UI 버전은 애플리케이션의 JQuery 버전과 충돌할 수 있습니다. 이 자습서를 진행하기 전에 애플리케이션을 실행해 보세요. JavaScript 오류가 발생하면 JQuery 버전을 조정해야 합니다. 예상된 버전의 JQuery를 Scripts 폴더(이 자습서를 작성할 때 버전 1.8.2) 또는 사이트에 추가할 수 있습니다. master JQuery 파일의 경로를 지정합니다.
<asp:ScriptReference Name="jquery" Path="~/Scripts/jquery-1.10.2.js" />
<asp:ScriptReference Path="~/Scripts/jquery-ui-1.9.2.js" />
Datepicker 위젯을 포함하도록 DateTime 템플릿 사용자 지정
datetime 값을 편집하기 위해 동적 데이터 템플릿에 Datepicker 위젯을 추가합니다. 템플릿에 위젯을 추가하면 새 학생을 추가하기 위한 양식과 학생 편집을 위한 그리드 보기에서 자동으로 렌더링됩니다. DateTime_Edit.ascx를 열고 다음 강조 표시된 코드를 추가합니다.
<%@ Control Language="C#" CodeBehind="DateTime_Edit.ascx.cs" Inherits="ContosoUniversityModelBinding.DateTime_EditField" %>
<juice:Datepicker runat="server" ID="t1" TargetControlID="TextBox1"/>
<asp:TextBox ID="TextBox1" runat="server" CssClass="DDTextBox" Text='<%# FieldValueEditString %>' Columns="20"></asp:TextBox>
<asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator1" CssClass="DDControl DDValidator" ControlToValidate="TextBox1" Display="Static" Enabled="false" />
<asp:RegularExpressionValidator runat="server" ID="RegularExpressionValidator1" CssClass="DDControl DDValidator" ControlToValidate="TextBox1" Display="Static" Enabled="false" />
<asp:DynamicValidator runat="server" ID="DynamicValidator1" CssClass="DDControl DDValidator" ControlToValidate="TextBox1" Display="Static" />
<asp:CustomValidator runat="server" ID="DateValidator" CssClass="DDControl DDValidator" ControlToValidate="TextBox1" Display="Static" EnableClientScript="false" Enabled="false" OnServerValidate="DateValidator_ServerValidate" />
코드 숨김 파일에서 DatePicker에 대한 최소 및 최대 날짜를 설정합니다. 이러한 값을 설정하면 사용자가 잘못된 날짜로 이동하지 못하게 됩니다. DateTime 속성이 제공된 경우 RangeAttribute 에서 최소값과 최대값을 검색합니다. DateTime_Edit.ascx.cs를 열고 강조 표시된 다음 코드를 Page_Load 메서드에 추가합니다.
protected void Page_Load(object sender, EventArgs e) {
TextBox1.ToolTip = Column.Description;
SetUpValidator(RequiredFieldValidator1);
SetUpValidator(RegularExpressionValidator1);
SetUpValidator(DynamicValidator1);
SetUpCustomValidator(DateValidator);
RangeAttribute ra = (RangeAttribute)Column.Attributes[typeof(RangeAttribute)];
if (ra != null)
{
t1.MinDate = ra.Minimum.ToString();
t1.MaxDate = ra.Maximum.ToString();
}
}
웹 애플리케이션을 실행하고 AddStudent 페이지로 이동합니다. 필드에 대한 값을 입력하고 등록 날짜의 텍스트 상자를 클릭하면 일정이 표시됩니다.
날짜를 선택하고 삽입을 클릭합니다. RangeAttribute는 서버에 유효성 검사를 적용합니다. Datepicker에서 minDate 속성을 설정하면 클라이언트에 유효성 검사도 적용됩니다. 달력에서는 사용자가 minDate 값 이전의 날짜로 이동할 수 없습니다.
그리드 보기에서 레코드를 편집하면 일정도 표시됩니다.
결론
이 자습서에서는 모델 바인딩을 사용하는 웹 양식에 JQuery 위젯을 통합하는 방법을 알아보았습니다.
다음 자습서에서는 데이터를 선택할 때 쿼리 문자열 값을 사용합니다.