DataList의 편집 인터페이스에 유효성 검사 컨트롤 추가(VB)Adding Validation Controls to the DataList's Editing Interface (VB)

Scott Mitchellby Scott Mitchell

샘플 앱 다운로드 또는 PDF 다운로드Download Sample App or Download PDF

이 자습서에서는 보다 간단 하 게 편집할 수 있는 사용자 인터페이스를 제공 하기 위해 DataList의 EditItemTemplate에 유효성 검사 컨트롤을 추가 하는 것이 얼마나 쉬운지 알아봅니다.In this tutorial we'll see how easy it is to add validation controls to the DataList's EditItemTemplate in order to provide a more foolproof editing user interface.

소개Introduction

지금까지 DataList 편집 자습서에서는 누락 된 제품 이름 또는 음수 가격과 같은 잘못 된 사용자 입력으로 인해 예외가 발생 하더라도 DataLists 편집 인터페이스에는 자동 관리 사용자 입력 유효성 검사가 포함 되지 않았습니다.In the DataList editing tutorials thus far, the DataLists editing interfaces have not included any proactive user input validation even though invalid user input such as a missing product name or negative price results in an exception. 이전 자습서 에서는 발생 한 예외에 대 한 정보를 catch 하 고 정상적으로 표시 하기 위해 DataList s UpdateCommand 이벤트 처리기에 예외 처리 코드를 추가 하는 방법을 살펴보았습니다.In the preceding tutorial we examined how to add exception handling code to the DataList s UpdateCommand event handler in order to catch and gracefully display information about any exceptions that were raised. 그러나 편집 인터페이스에는 사용자가 처음에 이러한 데이터를 입력 하지 못하도록 하는 유효성 검사 컨트롤이 포함 됩니다.Ideally, however, the editing interface would include validation controls to prevent a user from entering such invalid data in the first place.

이 자습서에서는 보다 간단 하 게 편집할 수 있는 사용자 인터페이스를 제공 하기 위해 DataList s EditItemTemplate에 유효성 검사 컨트롤을 추가 하는 것이 얼마나 쉬운지 알아봅니다.In this tutorial we'll see how easy it is to add validation controls to the DataList s EditItemTemplate in order to provide a more foolproof editing user interface. 특히이 자습서에서는 이전 자습서에서 만든 예제를 사용 하 고 편집 인터페이스를 보강 하 여 적절 한 유효성 검사를 포함 합니다.Specifically, this tutorial takes the example created in the preceding tutorial and augments the editing interface to include appropriate validation.

1 단계:BLL 및 DAL 수준의 예외 처리 에서 예제 복제Step 1: Replicating the Example fromHandling BLL- and DAL-Level Exceptions

BLL 및 DAL 수준 예외 처리 자습서에서 2 열 편집 가능 DataList에서 제품의 이름과 가격을 나열 하는 페이지를 만들었습니다.In the Handling BLL- and DAL-Level Exceptions tutorial we created a page that listed the names and prices of the products in a two-column, editable DataList. 이 자습서의 목표는 유효성 검사 컨트롤을 포함 하도록 DataList s 편집 인터페이스를 확대 하는 것입니다.Our goal for this tutorial is to augment the DataList s editing interface to include validation controls. 특히 유효성 검사 논리는 다음과 같습니다.In particular, our validation logic will:

  • 제품 이름을 제공 해야 합니다.Require that the product s name be provided
  • 가격에 대해 입력 한 값이 유효한 통화 형식 인지 확인 합니다.Ensure that the value entered for the price is a valid currency format
  • 음수 UnitPrice 값이 잘못 되었기 때문에 가격에 대해 입력 한 값이 0 보다 크거나 같은지 확인 합니다.Ensure that the value entered for the price is greater than or equal to zero, since a negative UnitPrice value is illegal

이전 예제를 확대 하 여 유효성 검사를 포함 하는 것을 확인 하기 전에 먼저 EditDeleteDataList 폴더의 ErrorHandling.aspx 페이지에서이 자습서의 페이지 (UIValidation.aspx)로 예제를 복제 해야 합니다.Before we can look at augmenting the previous example to include validation, we first need to replicate the example from the ErrorHandling.aspx page in the EditDeleteDataList folder to the page for this tutorial, UIValidation.aspx. 이를 위해 ErrorHandling.aspx 페이지의 선언적 태그와 해당 소스 코드를 모두 복사 해야 합니다.To achieve this we need to copy over both the ErrorHandling.aspx page s declarative markup and its source code. 먼저 다음 단계를 수행 하 여 선언적 태그를 복사 합니다.First copy over the declarative markup by performing the following steps:

  1. Visual Studio에서 ErrorHandling.aspx 페이지 열기Open the ErrorHandling.aspx page in Visual Studio
  2. 페이지의 선언 태그 (페이지 맨 아래에 있는 원본 단추 클릭)로 이동 합니다.Go to the page s declarative markup (click on the Source button at the bottom of the page)
  3. 그림 1에 나와 있는 것 처럼 <asp:Content></asp:Content> 태그 (3 ~ 32 줄) 내에서 텍스트를 복사 합니다.Copy the text within the <asp:Content> and </asp:Content> tags (lines 3 through 32), as shown in Figure 1.

<asp: Content> 컨트롤 내에서 텍스트 복사 합니다.Copy the Text Within the <asp:Content> Control

그림 2: <asp:Content> 컨트롤 내에서 텍스트 복사 (전체 크기 이미지를 보려면 클릭)Figure 2: Copy the Text Within the <asp:Content> Control (Click to view full-size image)

  1. UIValidation.aspx 페이지 열기Open the UIValidation.aspx page
  2. 페이지의 선언적 태그로 이동Go to the page s declarative markup
  3. <asp:Content> 컨트롤 내에 텍스트를 붙여넣습니다.Paste the text within the <asp:Content> control.

소스 코드를 복사 하려면 ErrorHandling.aspx.vb 페이지를 열고 EditDeleteDataList_ErrorHandling 클래스 내 에서만 텍스트를 복사 합니다.To copy over the source code, open the ErrorHandling.aspx.vb page and copy just the text within the EditDeleteDataList_ErrorHandling class. DisplayExceptionDetails 메서드와 함께 세 개의 이벤트 처리기 (Products_EditCommand, Products_CancelCommandProducts_UpdateCommand)를 복사 하지만 클래스 선언이 나 using 문은 복사 하지 않습니다.Copy the three event handlers (Products_EditCommand, Products_CancelCommand, and Products_UpdateCommand) along with the DisplayExceptionDetails method, but do not copy the class declaration or using statements. UIValidation.aspx.vbEditDeleteDataList_UIValidation 클래스 에 복사 된 텍스트를 붙여넣습니다.Paste the copied text within the EditDeleteDataList_UIValidation class in UIValidation.aspx.vb.

ErrorHandling.aspx에서 UIValidation.aspx콘텐츠 및 코드를 이동한 후 잠시 브라우저에서 페이지를 테스트 합니다.After moving over the content and code from ErrorHandling.aspx to UIValidation.aspx, take a moment to test out the pages in a browser. 이러한 두 페이지에서 동일한 출력이 표시 되 고 동일한 기능이 경험 됩니다 (그림 2 참조).You should see the same output and experience the same functionality in each of these two pages (see Figure 2).

UIValidation .aspx 페이지 ErrorHandling .aspx의 기능을 모방 합니다.The UIValidation.aspx Page Mimics the Functionality in ErrorHandling.aspx

그림 2: UIValidation.aspx 페이지에서 ErrorHandling.aspx의 기능 모방 (전체 크기 이미지를 보려면 클릭)Figure 2: The UIValidation.aspx Page Mimics the Functionality in ErrorHandling.aspx (Click to view full-size image)

2 단계: DataList s EditItemTemplate에 유효성 검사 컨트롤 추가Step 2: Adding the Validation Controls to the DataList s EditItemTemplate

데이터 입력 양식을 생성할 때는 사용자가 모든 필수 필드를 입력 하 고 제공 된 모든 입력이 올바른 형식의 올바른 값입니다.When constructing data entry forms, it is important that users enter any required fields and that all their provided inputs are legal, properly-formatted values. 사용자 입력이 유효한 지 확인 하기 위해 ASP.NET는 단일 입력 웹 컨트롤의 값에 대 한 유효성을 검사 하도록 디자인 된 5 가지 기본 제공 유효성 검사 컨트롤을 제공 합니다.To help ensure that a user s inputs are valid, ASP.NET provides five built-in validation controls that are designed to validate the value of a single input Web control:

이러한 다섯 가지 컨트롤에 대 한 자세한 내용은 인터페이스 편집 및 삽입 자습서의 유효성 검사 컨트롤 추가 또는 ASP.NET 빠른 시작 자습서유효성 검사 컨트롤 섹션 을 참조 하세요.For more information on these five controls refer back to the Adding Validation Controls to the Editing and Inserting Interfaces tutorial or check out the Validation Controls section of the ASP.NET Quickstart Tutorials.

이 자습서에서는 제품 이름에 대 한 값이 제공 되었는지 확인 하는 데 RequiredFieldValidator를 사용 해야 하며, 입력 된 가격이 0 보다 크거나 같고 유효한 통화 형식으로 표시 되도록 하려면 CompareValidator를 사용 해야 합니다.For our tutorial we'll need to use a RequiredFieldValidator to ensure that a value for the product name has been supplied and a CompareValidator to ensure that the entered price has a value greater than or equal to 0 and is presented in a valid currency format.

Note

ASP.NET 1.x는 이와 동일한 5 가지 유효성 검사 컨트롤을 포함 하 고 있지만, ASP.NET 2.0에는 여러 가지 향상 된 기능이 추가 되었으며, Internet Explorer 외에도 브라우저에 대 한 클라이언트 쪽 스크립트 지원과 페이지의 유효성 검사 컨트롤을 분할 하는 기능이 추가 되었습니다. 유효성 검사 그룹.While ASP.NET 1.x had these same five validation controls, ASP.NET 2.0 has added a number of improvements, the main two being client-side script support for browsers in addition to Internet Explorer and the ability to partition validation controls on a page into validation groups. 2.0의 새 유효성 검사 제어 기능에 대 한 자세한 내용은 개로 나누어서 the Validation Controls in ASP.NET 2.0를 참조 하세요.For more information on the new validation control features in 2.0, refer to Dissecting the Validation Controls in ASP.NET 2.0.

필요한 유효성 검사 컨트롤을 DataList s EditItemTemplate에 추가 하 여를 시작 합니다.Let s start by adding the necessary validation controls to the DataList s EditItemTemplate. 이 작업은 DataList의 스마트 태그에서 템플릿 편집 링크를 클릭 하거나 선언적 구문을 통해 디자이너를 통해 수행할 수 있습니다.This task can be performed through the Designer by clicking on the Edit Templates link from the DataList s smart tag, or through the declarative syntax. 디자인 뷰에서 템플릿 편집 옵션을 사용 하 여 프로세스를 단계별로 실행 합니다.Let s step through the process using the Edit Templates option from the Design view. DataList s EditItemTemplate편집 하도록 선택한 후 도구 상자에서 템플릿 편집 인터페이스로 끌어와 RequiredFieldValidator를 추가 하 여 ProductName 텍스트 상자 뒤에 배치 합니다.After choosing to edit the DataList s EditItemTemplate, add a RequiredFieldValidator by dragging it from the Toolbox into the template editing interface, placing it after the ProductName TextBox.

EditItemTemplate 다음에 RequiredFieldValidator를 추가 ProductName 텍스트 상자Add a RequiredFieldValidator to the EditItemTemplate After the ProductName TextBox

그림 3: ProductName TextBox EditItemTemplate After에 RequiredFieldValidator 추가 (전체 크기 이미지를 보려면 클릭)Figure 3: Add a RequiredFieldValidator to the EditItemTemplate After the ProductName TextBox (Click to view full-size image)

모든 유효성 검사 컨트롤은 단일 ASP.NET 웹 컨트롤의 입력에 대 한 유효성을 검사 하는 방식으로 작동 합니다.All validation controls work by validating the input of a single ASP.NET Web control. 따라서 방금 추가한 RequiredFieldValidator가 ProductName 텍스트 상자에 대해 유효성을 검사 하도록 지정 해야 합니다. 이 작업은 유효성 검사 컨트롤의 ControlToValidate 속성 을 적절 한 웹 컨트롤의 ID (이 인스턴스에서ProductName)로 설정 하 여 수행 합니다.Therefore, we need to indicate that the RequiredFieldValidator we just added should validate against the ProductName TextBox; this is done by setting the validation control s ControlToValidate property to the ID of the appropriate Web control (ProductName, in this instance). 그런 다음 ErrorMessage 속성 을로 설정 하 고 *에 제품 이름과 Text 속성 을 제공 해야 합니다.Next, set the ErrorMessage property to You must provide the product s name and the Text property to *. 제공 되는 경우 Text 속성 값은 유효성 검사에 실패 하는 경우 유효성 검사 컨트롤에 표시 되는 텍스트입니다.The Text property value, if provided, is the text that is displayed by the validation control if the validation fails. 필요한 ErrorMessage 속성 값은 ValidationSummary 컨트롤에서 사용 됩니다. Text 속성 값이 생략 되 면 유효성 검사 컨트롤에서 잘못 된 입력에 대해 ErrorMessage 속성 값이 표시 됩니다.The ErrorMessage property value, which is required, is used by the ValidationSummary control; if the Text property value is omitted, the ErrorMessage property value is displayed by the validation control on invalid input.

RequiredFieldValidator의 이러한 세 가지 속성을 설정한 후 화면은 그림 4와 유사 하 게 표시 됩니다.After setting these three properties of the RequiredFieldValidator, your screen should look similar to Figure 4.

RequiredFieldValidator s ControlToValidate, ErrorMessage 및 Text 속성을 설정 Set the RequiredFieldValidator s ControlToValidate, ErrorMessage, and Text Properties

그림 4: RequiredFieldValidator s ControlToValidate, ErrorMessageText 속성 설정 (전체 크기 이미지를 보려면 클릭)Figure 4: Set the RequiredFieldValidator s ControlToValidate, ErrorMessage, and Text Properties (Click to view full-size image)

RequiredFieldValidator를 EditItemTemplate에 추가 하면 제품 가격 텍스트 상자에 필요한 유효성 검사를 추가 하는 것만 남았습니다.With the RequiredFieldValidator added to the EditItemTemplate, all that remains is to add the necessary validation for the product s price TextBox. 레코드를 편집할 때 UnitPrice은 선택 사항이 기 때문에 RequiredFieldValidator를 추가할 필요가 없습니다.Since the UnitPrice is optional when editing a record, we don t need to add a RequiredFieldValidator. 그러나 입력 유효성 검사기를 추가 하 여 제공 되는 경우 UnitPrice의 형식이 적절 하 게 지정 되 고가 0 보다 크거나 같으면 CompareValidator를 추가 해야 합니다.We do, however, need to add a CompareValidator to ensure that the UnitPrice, if supplied, is properly formatted as a currency and is greater than or equal to 0.

EditItemTemplate에 CompareValidator를 추가 하 고 ControlToValidate 속성을 UnitPrice로 설정 합니다. 해당 ErrorMessage 속성은 0 보다 크거나 같고 통화 기호 및 Text 속성을 *에 포함할 수 없습니다.Add the CompareValidator into the EditItemTemplate and set its ControlToValidate property to UnitPrice, its ErrorMessage property to The price must be greater than or equal to zero and cannot include the currency symbol, and its Text property to *. UnitPrice 값이 0 보다 크거나 같아야 함을 나타내려면 CompareValidator s Operator 속성GreaterThanEqual, ValueToCompare 속성 을 0으로, 해당 Type 속성Currency로 설정 합니다.To indicate that the UnitPrice value must be greater than or equal to 0, set the CompareValidator s Operator property to GreaterThanEqual, its ValueToCompare property to 0, and its Type property to Currency.

이러한 두 유효성 검사 컨트롤을 추가한 후에는 DataList s EditItemTemplate s 선언 구문이 다음과 같이 표시 됩니다.After adding these two validation controls, the DataList s EditItemTemplate s declarative syntax should look similar to the following:

<EditItemTemplate>
    Product name:
        <asp:TextBox ID="ProductName" runat="server"
            Text='<%# Eval("ProductName") %>'></asp:TextBox>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator1"
            ControlToValidate="ProductName"
            ErrorMessage="You must provide the product's name"
            runat="server">*</asp:RequiredFieldValidator>
    <br />
    Price:
        <asp:TextBox ID="UnitPrice" runat="server"
            Text='<%# Eval("UnitPrice", "{0:C}") %>'></asp:TextBox>
        <asp:CompareValidator ID="CompareValidator1"
            ControlToValidate="UnitPrice"
            ErrorMessage="The price must be greater than or equal to zero
                          and cannot include the currency symbol"
            Operator="GreaterThanEqual" Type="Currency" ValueToCompare="0"
            runat="server">*</asp:CompareValidator><br />
    <br />
    <asp:Button ID="UpdateProduct" runat="server" CommandName="Update"
        Text="Update" /> 
    <asp:Button ID="CancelUpdate" runat="server" CommandName="Cancel"
        Text="Cancel" />
</EditItemTemplate>

이러한 변경을 수행한 후 브라우저에서 페이지를 엽니다.After making these changes, open the page in a browser. 제품을 편집할 때 이름을 생략 하거나 잘못 된 가격 값을 입력 하려고 하면 텍스트 상자 옆에 별표가 표시 됩니다.If you attempt to omit the name or enter an invalid price value when editing a product, an asterisk appears next to the textbox. 그림 5와 같이 $19.95와 같은 통화 기호를 포함 하는 가격 값은 잘못 된 것으로 간주 됩니다.As Figure 5 shows, a price value that includes the currency symbol such as $19.95 is considered invalid. CompareValidator s Currency Type는 숫자 구분 기호 (예: 문화권 설정에 따라 쉼표 또는 마침표)와 선행 더하기 또는 빼기 기호를 허용 하지만 통화 기호는 허용 하지 않습니다.The CompareValidator s Currency Type allows for digit separators (such as commas or periods, depending on the culture settings) and a leading plus or minus sign, but does not permit a currency symbol. 이 동작은 편집 인터페이스에서 현재 통화 형식을 사용 하 여 UnitPrice를 렌더링 하므로 플렉스 사용자를 지정할 수 있습니다.This behavior may perplex users as the editing interface currently renders the UnitPrice using the currency format.

입력이 잘못 된 텍스트 상자 옆에 별표가 표시 An Asterisk Appears Next to the Textboxes with Invalid Input

그림 5: 잘못 된 입력이 있는 입력란 옆에 별표 표시 (전체 크기 이미지를 보려면 클릭)Figure 5: An Asterisk Appears Next to the Textboxes with Invalid Input (Click to view full-size image)

유효성 검사는 그대로 작동 하지만, 사용자는 레코드를 편집할 때 통화 기호를 수동으로 제거 해야 합니다 .이는 허용 되지 않습니다.While the validation works as-is, the user has to manually remove the currency symbol when editing a record, which is not acceptable. 또한 편집 인터페이스에 잘못 된 입력이 있으면 클릭 하면 다시 게시를 호출 하 게 됩니다.Moreover, if there are invalid inputs in the editing interface neither the Update nor Cancel buttons, when clicked, will invoke a postback. 사용자 입력의 유효성에 관계 없이 취소 단추는 DataList를 사전 편집 상태로 반환 하는 것이 가장 좋습니다.Ideally, the Cancel button would return the DataList to its pre-editing state regardless of the validity of the user s inputs. 또한 브라우저에서 JavaScript를 지원 하지 않거나 지원을 사용 하지 않도록 설정 하는 사용자가 유효성 검사 컨트롤 클라이언트 쪽 논리를 건너뛸 수 있으므로, DataList s UpdateCommand 이벤트 처리기에서 제품 정보를 업데이트 하기 전에 페이지의 데이터가 유효한 지 확인 해야 합니다.Also, we need to ensure that the page s data is valid before updating the product information in the DataList s UpdateCommand event handler, as the validation controls client-side logic can be bypassed by users whose browsers either don t support JavaScript or have its support disabled.

EditItemTemplate s UnitPrice 텍스트 상자에서 통화 기호 제거Removing the Currency Symbol from the EditItemTemplate s UnitPrice TextBox

CompareValidator s Currency``Type사용 하는 경우 유효성을 검사 하는 입력에는 통화 기호가 포함 되지 않아야 합니다.When using the CompareValidator s Currency``Type, the input being validated must not include any currency symbols. 이러한 기호가 있으면 CompareValidator가 입력을 잘못 된 것으로 표시 합니다.The presence of such symbols causes the CompareValidator to mark the input as invalid. 그러나 편집 인터페이스는 현재 UnitPrice 텍스트 상자에 통화 기호를 포함 합니다. 즉, 사용자는 변경 내용을 저장 하기 전에 명시적으로 통화 기호를 제거 해야 합니다.However, our editing interface currently includes a currency symbol in the UnitPrice TextBox, meaning the user must explicitly remove the currency symbol before saving their changes. 이를 해결 하려면 다음 세 가지 옵션을 사용할 수 있습니다.To remedy this we have three options:

  1. UnitPrice TextBox 값의 형식이 통화로 지정 되지 않도록 EditItemTemplate를 구성 합니다.Configure the EditItemTemplate so that the UnitPrice TextBox value is not formatted as a currency.
  2. 사용자가 CompareValidator를 제거 하 고 올바른 형식의 통화 값을 확인 하는 RegularExpressionValidator로 바꿔서 통화 기호를 입력할 수 있습니다.Allow the user to enter a currency symbol by removing the CompareValidator and replacing it with a RegularExpressionValidator that checks for a properly formatted currency value. 여기에서 질문은 통화 값의 유효성을 검사 하는 정규식이 CompareValidator 만큼 간단 하지 않으며 문화권 설정을 통합 하려는 경우 코드를 작성 해야 한다는 것입니다.The challenge here is that the regular expression to validate a currency value is not as straightforward as the CompareValidator and would require writing code if we wanted to incorporate culture settings.
  3. 유효성 검사 컨트롤을 완전히 제거 하 고 GridView s RowUpdating 이벤트 처리기에서 사용자 지정 서버 쪽 유효성 검사 논리를 사용 합니다.Remove the validation control altogether and rely on custom server-side validation logic in the GridView s RowUpdating event handler.

이 자습서에 대해 s 옵션 1로 이동 하겠습니다.Let s go with option 1 for this tutorial. 현재 UnitPriceEditItemTemplate의 텍스트 상자에 대 한 데이터 바인딩 식으로 인해 통화 값으로 형식이 지정 됩니다. <%# Eval("UnitPrice", "{0:c}") %>.Currently the UnitPrice is formatted as a currency value due to the databinding expression for the TextBox in the EditItemTemplate: <%# Eval("UnitPrice", "{0:c}") %>. Eval 문을 Eval("UnitPrice", "{0:n2}")로 변경 합니다. 그러면 결과의 형식이 전체 자릿수와 같은 숫자로 지정 됩니다.Change the Eval statement to Eval("UnitPrice", "{0:n2}"), which formats the result as a number with two digits of precision. 선언적 구문을 통해 직접 수행 하거나 DataList s EditItemTemplateUnitPrice 텍스트 상자에서 데이터 바인딩 편집 링크를 클릭 하 여이 작업을 수행할 수 있습니다.This can be done directly through the declarative syntax or by clicking on the Edit DataBindings link from the UnitPrice TextBox in the DataList s EditItemTemplate.

이와 같이 변경 하면 편집 인터페이스에서 형식이 지정 된 가격은 쉼표를 그룹 구분 기호로 포함 하 고 마침표를 소수 구분 기호로 포함 하지만 통화 기호는 그대로 둡니다.With this change, the formatted price in the editing interface includes commas as the group separator and a period as the decimal separator, but leaves off the currency symbol.

Note

편집 가능한 인터페이스에서 통화 형식을 제거 하는 경우 통화 기호를 텍스트 상자 외부의 텍스트로 저장 하는 것이 좋습니다.When removing the currency format from the editable interface, I find it helpful to put the currency symbol as text outside the TextBox. 이는 사용자에 게 통화 기호를 제공할 필요가 없다는 힌트 역할을 합니다.This serves as a hint to the user that they do not need to provide the currency symbol.

취소 단추 수정Fixing the Cancel Button

기본적으로 유효성 검사 웹 컨트롤은 클라이언트 쪽에서 유효성 검사를 수행 하기 위해 JavaScript를 내보냅니다.By default, the validation Web controls emit JavaScript to perform validation on the client-side. 단추, LinkButton 또는 ImageButton을 클릭 하면 포스트백이 발생 하기 전에 해당 페이지의 유효성 검사 컨트롤이 클라이언트 쪽에서 확인 됩니다.When a Button, LinkButton, or ImageButton is clicked, the validation controls on the page are checked on the client-side before the postback occurs. 잘못 된 데이터가 있는 경우 다시 게시가 취소 됩니다.If there is any invalid data, the postback is cancelled. 그러나 특정 단추에 대해 데이터의 유효성은 어떤 않으므로 수 있습니다. 이 경우 잘못 된 데이터로 인해 포스트백이 취소 되는 것은 걸림돌입니다.For certain Buttons, though, the validity of the data might be immaterial; in such a case, having the postback cancelled due to invalid data is a nuisance.

취소 단추는 이러한 예입니다.The Cancel button is such an example. 사용자가 제품 이름을 생략 하는 것과 같이 잘못 된 데이터를 입력 한 후 제품을 모두 저장 하 고 취소 단추를 클릭 하지 않기로 결정 합니다.Imagine that a user enters invalid data, such as omitting the product s name, and then decides she doesn t want to save the product after all and hits the Cancel button. 현재 취소 단추는 페이지의 유효성 검사 컨트롤을 트리거하여 제품 이름이 누락 된 것으로 보고 하 고 다시 게시를 방지 합니다.Currently, the Cancel button triggers the validation controls on the page, which report that the product name is missing and prevent the postback. 사용자는 편집 프로세스를 취소 하기 위해 ProductName 텍스트 상자에 일부 텍스트를 입력 해야 합니다.Our user has to type some text into the ProductName TextBox just to cancel out of the editing process.

다행히 Button, LinkButton 및 ImageButton에는 단추를 클릭할 때 유효성 검사 논리가 시작 되어야 하는지 여부를 나타내는 CausesValidation 속성이 있습니다 (기본값은 True).Fortunately, the Button, LinkButton, and ImageButton have a CausesValidation property that can indicate whether or not clicking the Button should initiate the validation logic (defaults to True). 취소 단추 s CausesValidation 속성을 False로 설정 합니다.Set the Cancel Button s CausesValidation property to False.

UpdateCommand 이벤트 처리기에서 입력을 사용할 수 있도록 보장Ensuring the Inputs are Valid in the UpdateCommand Event Handler

유효성 검사 컨트롤에서 내보낸 클라이언트 쪽 스크립트로 인해 사용자가 잘못 된 입력을 입력 하는 경우 유효성 검사 컨트롤은 CausesValidation 속성이 True 되는 단추, LinkButton 또는 ImageButton 컨트롤에 의해 시작 된 포스트백을 취소 합니다 (기본값).Due to the client-side script emitted by the validation controls, if a user enters invalid input the validation controls cancel any postbacks initiated by Button, LinkButton, or ImageButton controls whose CausesValidation properties are True (the default). 그러나 사용자가 antiquated 브라우저에서 방문 하거나 JavaScript 지원이 사용 하지 않도록 설정 된 경우 클라이언트 쪽 유효성 검사는 실행 되지 않습니다.However, if a user is visiting with an antiquated browser or one whose JavaScript support has been disabled, the client-side validation checks will not execute.

모든 ASP.NET 유효성 검사 컨트롤은 다시 게시 시 유효성 검사 논리를 즉시 반복 하 고 Page.IsValid 속성을 통해 페이지의 입력에 대 한 전체 유효성을 보고 합니다.All of the ASP.NET validation controls repeat their validation logic immediately upon postback and report the overall validity of the page s inputs via the Page.IsValid property. 그러나 Page.IsValid의 값을 기반으로 하 여 페이지 흐름이 중단 되거나 중지 되지 않습니다.However, the page flow is not interrupted or stopped in any way based on the value of Page.IsValid. 개발자는 유효한 입력 데이터를 가정 하는 코드를 계속 하기 전에 Page.IsValid 속성의 값이 True 인지 확인 해야 합니다.As developers, it is our responsibility to ensure that the Page.IsValid property has a value of True before proceeding with code that assumes valid input data.

사용자가 JavaScript를 사용 하지 않도록 설정 하는 경우 페이지를 방문 하 고, 제품을 편집 하 고, 가격 값을 너무 많이 입력 하 고, 업데이트 단추를 클릭 하면 클라이언트 쪽 유효성 검사가 무시 되 고 다시 게시가 뒤따르게 됩니다.If a user has JavaScript disabled, visits our page, edits a product, enters a price value of Too expensive, and clicks the Update button, the client-side validation will be bypassed and a postback will ensue. 다시 게시 시 ASP.NET page s UpdateCommand 이벤트 처리기가 실행 되 고 Decimal에 대해 너무 많은 비용이 분석 되려고 할 때 예외가 발생 합니다.On postback, the ASP.NET page s UpdateCommand event handler executes and an exception is raised when attempting to parse Too expensive to a Decimal. 예외 처리가 있으므로 이러한 예외는 정상적으로 처리 되지만 Page.IsValid의 값이 True인 경우에만 UpdateCommand 이벤트 처리기를 사용 하 여 처음부터 잘못 된 데이터가 지연 되지 않도록 할 수 있습니다.Since we have exception handling, such an exception will be handled gracefully, but we could prevent the invalid data from slipping through in the first place by only proceeding with the UpdateCommand event handler if Page.IsValid has a value of True.

Try 블록 바로 앞에 UpdateCommand 이벤트 처리기의 시작 부분에 다음 코드를 추가 합니다.Add the following code to the start of the UpdateCommand event handler, immediately before the Try block:

If Not Page.IsValid Then
    Exit Sub
End If

이 외에도 제품은 제출 된 데이터가 유효한 경우에만 업데이트 됩니다.With this addition, the product will attempt to be updated only if the submitted data is valid. 대부분의 사용자는 유효성 검사 컨트롤 클라이언트 쪽 스크립트 때문에 잘못 된 데이터를 다시 게시할 수 없지만, 브라우저에서 JavaScript를 지원 하지 않거나 JavaScript 지원을 사용 하지 않도록 설정 된 사용자는 클라이언트 쪽 검사를 무시 하 고 잘못 된 데이터를 제출할 수 있습니다.Most users won't be able to postback invalid data due to the validation controls client-side scripts, but users whose browsers don t support JavaScript or that have JavaScript support disabled, can bypass the client-side checks and submit invalid data.

Note

Astute 판독기는 GridView를 사용 하 여 데이터를 업데이트할 때 페이지의 코드 기반 클래스에서 Page.IsValid 속성을 명시적으로 확인할 필요가 없다는 것을 기억 합니다.The astute reader will recall that when updating data with the GridView, we didn't need to explicitly check the Page.IsValid property in our page s code-behind class. 이는 GridView가 Page.IsValid 속성을 사용 하 여 True값을 반환 하는 경우에만 업데이트를 진행 하기 때문입니다.This is because the GridView consults the Page.IsValid property for us and only proceeds with the update only if it returns a value of True.

3 단계: 데이터 입력 문제 요약Step 3: Summarizing Data Entry Problems

5 개의 유효성 검사 컨트롤 외에도 ASP.NET에는 잘못 된 데이터를 검색 한 유효성 검사 컨트롤의 ErrorMessage을 표시 하는 ValidationSummary 컨트롤이포함 되어 있습니다.In addition to the five validation controls, ASP.NET includes the ValidationSummary control, which displays the ErrorMessage s of those validation controls that detected invalid data. 이 요약 데이터는 웹 페이지 또는 모달 클라이언트 쪽 messagebox에서 텍스트로 표시 될 수 있습니다.This summary data can be displayed as text on the web page or through a modal, client-side messagebox. 에서 유효성 검사 문제를 요약 하는 클라이언트 쪽 messagebox를 포함 하도록이 자습서를 개선할 수 있습니다.Let s enhance this tutorial to include a client-side messagebox summarizing any validation problems.

이를 수행 하려면 도구 상자에서 ValidationSummary 컨트롤을 디자이너로 끌어 옵니다.To accomplish this, drag a ValidationSummary control from the Toolbox onto the Designer. ValidationSummary 컨트롤의 위치는 단지 messagebox로 요약을 표시 하도록 구성 하기 때문에 중요 하지 않습니다.The location of the ValidationSummary control doesn t really matter, since we re going to configure it to only display the summary as a messagebox. 컨트롤을 추가한 후 ShowSummary 속성False로 설정 하 고 ShowMessageBox 속성True로 설정 합니다.After adding the control, set its ShowSummary property to False and its ShowMessageBox property to True. 이 외에도 유효성 검사 오류는 클라이언트 쪽 messagebox에 요약 되어 있습니다 (그림 6 참조).With this addition, any validation errors are summarized in a client-side messagebox (see Figure 6).

유효성 검사 오류가 클라이언트 쪽 Messagebox에 요약 The Validation Errors are Summarized in a Client-Side Messagebox

그림 6: 유효성 검사 오류는 클라이언트 쪽 Messagebox에 요약 되어 있습니다 (전체 크기 이미지를 보려면 클릭).Figure 6: The Validation Errors are Summarized in a Client-Side Messagebox (Click to view full-size image)

요약Summary

이 자습서에서는 유효성 검사 컨트롤을 사용 하 여 업데이트 워크플로에서 사용을 시도 하기 전에 사용자 입력이 유효한 지 미리 확인 하는 방법으로 예외 가능성을 줄이는 방법에 대해 살펴보았습니다.In this tutorial we saw how to reduce the likelihood of exceptions by using validation controls to proactively ensure that our users inputs are valid before attempting to use them in the updating workflow. ASP.NET은 특정 웹 컨트롤의 입력을 검사 하 고 입력의 유효성을 다시 보고 하도록 디자인 된 5 가지 유효성 검사 웹 컨트롤을 제공 합니다.ASP.NET provides five validation Web controls that are designed to inspect a particular Web control s input and report back on the input s validity. 이 자습서에서는 이러한 다섯 가지를 사용 하 여 RequiredFieldValidator와 CompareValidator를 모두 사용 하 여 제품 이름이 제공 되었으며 가격에 0 보다 크거나 같은 통화 형식이 있는지 확인 합니다.In this tutorial we used two of those five controls the RequiredFieldValidator and the CompareValidator to ensure that the product s name was supplied and that the price had a currency format with a value greater than or equal to zero.

DataList의 편집 인터페이스에 유효성 검사 컨트롤을 추가 하는 것은 도구 상자에서 EditItemTemplate로 끌고 몇 가지 속성을 설정 하는 것 만큼 간단 합니다.Adding validation controls to the DataList s editing interface is as simple as dragging them onto the EditItemTemplate from the Toolbox and setting a handful of properties. 기본적으로 유효성 검사 컨트롤은 클라이언트 쪽 유효성 검사 스크립트를 자동으로 내보냅니다. 또한 게시 시 서버 쪽 유효성 검사를 제공 하 여 Page.IsValid 속성에 누적 결과를 저장 합니다.By default, the validation controls automatically emit client-side validation script; they also provide server-side validation on postback, storing the cumulative result in the Page.IsValid property. 단추, LinkButton 또는 ImageButton이 클릭 될 때 클라이언트 쪽 유효성 검사를 무시 하려면 단추 s CausesValidation 속성을 False로 설정 합니다.To bypass the client-side validation when a Button, LinkButton, or ImageButton is clicked, set the button s CausesValidation property to False. 또한 다시 게시 시 전송 된 데이터를 사용 하 여 작업을 수행 하기 전에 Page.IsValid 속성이 True를 반환 하는지 확인 합니다.Also, before performing any tasks with the data submitted on postback, ensure that the Page.IsValid property returns True.

지금까지 검토 한 모든 DataList 편집 자습서에는 제품 이름에 대 한 텍스트 상자와 가격에 대 한 편집 인터페이스가 매우 단순 합니다.All of the DataList editing tutorials we ve examined so far have had very simple editing interfaces a TextBox for the product s name and another for the price. 그러나 편집 인터페이스에는 Dropdownlist, 달력, 라디오 단추, 확인란 등과 같은 다양 한 웹 컨트롤이 포함 될 수 있습니다.The editing interface, however, can contain a mix of different Web controls, such as DropDownLists, Calendars, RadioButtons, CheckBoxes, and so on. 다음 자습서에서는 다양 한 웹 컨트롤을 사용 하는 인터페이스를 구축 하는 방법을 살펴보겠습니다.In our next tutorial we'll look at building an interface that uses a variety of Web controls.

행복 한 프로그래밍Happy Programming!

저자 정보About the Author

Scott Mitchell(7 개의 ASP/ASP. NET books 및 4GuysFromRolla.com창립자)은 1998부터 Microsoft 웹 기술을 사용 하 여 작업 했습니다.Scott Mitchell, author of seven ASP/ASP.NET books and founder of 4GuysFromRolla.com, has been working with Microsoft Web technologies since 1998. Scott은 독립 컨설턴트, 강사 및 기록기로 작동 합니다.Scott works as an independent consultant, trainer, and writer. 최신 책은 24 시간 이내에 ASP.NET 2.0을 sams teach yourself것입니다.His latest book is Sams Teach Yourself ASP.NET 2.0 in 24 Hours. mitchell@4GuysFromRolla.com에 도달할 수 있습니다 .He can be reached at mitchell@4GuysFromRolla.com. 또는 블로그를 통해 http://ScottOnWriting.NET에서 찾을 수 있습니다.or via his blog, which can be found at http://ScottOnWriting.NET.

특별히 감사 합니다.Special Thanks To

이 자습서 시리즈는 많은 유용한 검토자가 검토 했습니다.This tutorial series was reviewed by many helpful reviewers. 이 자습서의 리드 검토자는 Dennis Patterson이, 켄은 Pespisa 및 Liz Shulok 였습니다.Lead reviewers for this tutorial were Dennis Patterson, Ken Pespisa, and Liz Shulok. 예정 된 MSDN 문서를 검토 하는 데 관심이 있나요?Interested in reviewing my upcoming MSDN articles? 그렇다면mitchell@4GuysFromRolla.com에서 줄을 삭제 합니다.If so, drop me a line at mitchell@4GuysFromRolla.com.