ASP.NET 웹 페이지(Razor) 사이트에서 HTML Forms 사용

아티클
07/13/2023

이 문서에서는 ASP.NET 웹 페이지(Razor) 웹 사이트에서 작업할 때 HTML 양식(텍스트 상자 및 단추 포함)을 처리하는 방법을 설명합니다.

학습할 내용:

HTML 양식을 만드는 방법

양식에서 사용자 입력을 읽는 방법입니다.

사용자 입력의 유효성을 검사하는 방법입니다.

페이지가 제출된 후 양식 값을 복원하는 방법입니다.

다음은 문서에 도입된 ASP.NET 프로그래밍 개념입니다.

Request 개체

입력 유효성 검사.

HTML 인코딩.

자습서에서 사용되는 소프트웨어 버전

ASP.NET 웹 페이지(Razor) 3

이 자습서는 ASP.NET 웹 페이지 2에서도 작동합니다.

간단한 HTML 양식 만들기

새 웹 사이트를 만듭니다.

루트 폴더에서 Form.cshtml 이라는 웹 페이지를 만들고 다음 태그를 입력합니다.

<!DOCTYPE html>
<html>
    <head>
        <title>Customer Form</title>
    </head>
    <body>
      <form method="post" >
        <fieldset>
          <legend>Add Customer</legend>
          <div>
            <label for="CompanyName">Company Name:</label>
            <input type="text" name="CompanyName" value="" />
          </div>
          <div>
            <label for="ContactName">Contact Name:</label>
            <input type="text" name="ContactName" value="" />
          </div>
          <div>
            <label for="Employees">Employee Count:</label>
            <input type="text" name="Employees" value="" />
          </div>
          <div>
            <label>&nbsp;</label>
            <input type="submit" value="Submit" class="submit" />
          </div>
        </fieldset>
      </form>
    </body>
</html>

브라우저에서 페이지를 시작합니다. WebMatrix의 파일 작업 영역에서 파일을 마우스 오른쪽 단추로 클릭한 다음 브라우저에서 시작을 선택합니다. 입력 필드 3개와 제출 단추가 있는 간단한 양식이 표시됩니다.

이때 제출 단추를 클릭하면 아무 작업도 수행하지 않습니다. 양식을 유용하게 만들려면 서버에서 실행될 코드를 추가해야 합니다.

양식에서 사용자 입력 읽기

양식을 처리하려면 제출된 필드 값을 읽고 해당 값을 사용하여 작업을 수행하는 코드를 추가합니다. 이 절차에서는 필드를 읽고 페이지에 사용자 입력을 표시하는 방법을 보여줍니다. (프로덕션 애플리케이션에서는 일반적으로 사용자 입력을 사용하여 더 흥미로운 작업을 수행합니다. 데이터베이스 작업에 대한 문서에서 이 작업을 수행합니다.)

Form.cshtml 파일의 맨 위에 다음 코드를 입력합니다.
```
@{
    if (IsPost) {
        string companyname = Request.Form["companyname"];
        string contactname = Request.Form["contactname"];
        int employeecount = Request.Form["employees"].AsInt();

        <text>
          You entered: <br />
          Company Name: @companyname <br />
          Contact Name: @contactname <br />
          Employee Count: @employeecount <br />
        </text>
    }
}
```
사용자가 페이지를 처음 요청하면 빈 양식만 표시됩니다. 사용자가 양식을 입력한 다음 제출을 클릭합니다. 이렇게 하면 사용자 입력이 서버에 제출(게시물)됩니다. 기본적으로 요청은 동일한 페이지(즉, Form.cshtml)로 이동합니다.

이번에는 페이지를 제출하면 입력한 값이 양식 바로 위에 표시됩니다.

페이지의 코드를 확인합니다. 먼저 메서드를 IsPost 사용하여 페이지가 게시되고 있는지, 즉 사용자가 제출 단추를 클릭했는지 여부를 확인합니다. 이 게시물 IsPost 이면 true를 반환합니다. 이는 ASP.NET 웹 페이지 초기 요청(GET 요청) 또는 포스트백(POST 요청)으로 작업하는지 여부를 결정하는 표준 방법입니다. (GET 및 POST에 대한 자세한 내용은 Razor 구문을 사용한 ASP.NET 웹 페이지 프로그래밍 소개에서 사이드바 "HTTP GET 및 POST 및 IsPost 속성"을 참조하세요.)

다음으로 사용자가 개체에서 Request.Form 입력한 값을 가져와서 나중에 사용할 수 있도록 변수에 넣습니다. 개체에는 Request.Form 페이지와 함께 제출된 모든 값이 포함되며 각 값은 키로 식별됩니다. 키는 읽으려는 양식 필드의 특성과 동일합니다 name . 예를 들어 필드(텍스트 상자)를 companyname 읽으려면 를 사용합니다 Request.Form["companyname"].

양식 값은 개체에 Request.Form 문자열로 저장됩니다. 따라서 값을 숫자나 날짜 또는 다른 형식으로 작업해야 하는 경우 문자열에서 해당 형식으로 변환해야 합니다. 이 예제 AsInt 에서 의 Request.Form 메서드는 직원 수 포함 직원 필드의 값을 정수로 변환하는 데 사용됩니다.
브라우저에서 페이지를 시작하고 양식 필드를 입력한 다음 제출을 클릭합니다. 페이지에 입력한 값이 표시됩니다.

팁

모양 및 보안을 위한 HTML 인코딩

HTML에는 , >및 과 &같은 <문자에 특별한 용도가 있습니다. 이러한 특수 문자가 예상하지 못한 곳에 나타나면 웹 페이지의 모양과 기능을 망칠 수 있습니다. 예를 들어 브라우저는 문자(공백이 뒤에 오지 않는 한)를 또는 <input ...>와 같은 <b> HTML 요소의 시작 부분으로 해석 < 합니다. 브라우저에서 요소를 인식하지 못하는 경우 다시 인식하는 항목에 < 도달할 때까지 로 시작하는 문자열만 삭제합니다. 분명히 이로 인해 페이지에서 이상한 렌더링이 발생할 수 있습니다.

HTML 인코딩은 이러한 예약 문자를 브라우저가 올바른 기호로 해석하는 코드로 대체합니다. 예를 들어 문자는 < 로 < 대체되고 > 문자는 로 >바뀝니다. 브라우저는 이러한 대체 문자열을 보려는 문자로 렌더링합니다.

사용자로부터 받은 문자열(입력)을 표시할 때마다 HTML 인코딩을 사용하는 것이 좋습니다. 그렇지 않은 경우 사용자는 웹 페이지를 가져와 악의적인 스크립트를 실행하거나 사이트 보안을 손상시키거나 의도한 것이 아닌 다른 작업을 수행할 수 있습니다. (사용자 입력을 가져와서 저장한 다음 나중에 표시할 때 특히 중요합니다(예: 블로그 주석, 사용자 검토 또는 이와 같은 내용).

이러한 문제를 방지하기 위해 ASP.NET 웹 페이지 코드에서 출력하는 모든 텍스트 콘텐츠를 자동으로 HTML로 인코딩합니다. 예를 들어 와 같은 @MyVar코드를 사용하여 변수 또는 식의 내용을 표시하면 ASP.NET 웹 페이지 출력을 자동으로 인코딩합니다.

사용자 입력 유효성 검사

사용자가 실수를 합니다. 필드를 채우도록 요청하거나 잊어버리거나 직원 수를 입력하도록 요청하고 대신 이름을 입력합니다. 양식을 처리하기 전에 양식이 올바르게 채워졌는지 확인하려면 사용자의 입력에 대한 유효성을 검사합니다.

이 절차에서는 세 가지 양식 필드 모두의 유효성을 검사하여 사용자가 해당 필드를 비워 두지 않았는지 확인하는 방법을 보여줍니다. 또한 직원 수 값이 숫자임을 검사. 오류가 있는 경우 유효성 검사를 통과하지 못한 값을 사용자에게 알려주는 오류 메시지가 표시됩니다.

Form.cshtml 파일에서 코드의 첫 번째 블록을 다음 코드로 바꿉니다.

@{
    Validation.RequireField("companyname", "Company name is required.");
    Validation.RequireField("contactname", "Contact name is required.");
    Validation.RequireField("employees", "Employee count is required.");
    Validation.Add("employees", Validator.Integer());

    if (IsPost)  {
        var companyname = Request.Form["companyname"];
        var contactname = Request.Form["contactname"];
        var employeecount = Request.Form["employees"];
        if(Validation.IsValid()){
            <text>
              You entered: <br />
              Company Name: @companyname <br />
              Contact Name: @contactname <br />
              Employee Count: @employeecount <br />
            </text>
        }
    }
}

사용자 입력의 유효성을 검사하려면 도우미를 Validation 사용합니다. 를 호출 Validation.RequireField하여 필수 필드를 등록합니다. 유효성을 검사할 필드와 수행할 유효성 검사 유형을 호출 Validation.Add 하고 지정하여 다른 유형의 유효성 검사를 등록합니다.

페이지가 실행되면 ASP.NET 모든 유효성 검사를 수행합니다. 를 호출Validation.IsValid하여 결과를 검사 수 있습니다. 모든 항목이 전달되면 true를 반환하고 필드 유효성 검사에 실패한 경우 false를 반환합니다. 일반적으로 사용자 입력에 대한 처리를 수행하기 전에 를 호출 Validation.IsValid 합니다.

다음과 같이 메서드에 <body> 세 개의 호출을 Html.ValidationMessage 추가하여 요소를 업데이트합니다.

<body>
  <form method="post">
    <fieldset>
      <legend>Add Customer</legend>
      <div>
         <label for="CompanyName">Company Name:</label>
         <input type="text" name="CompanyName" value="" />
         @Html.ValidationMessage("companyname")
      </div>
      <div>
         <label for="ContactName">Contact Name:</label>
         <input type="text" name="ContactName" value="" />
         @Html.ValidationMessage("contactname")
      </div>
      <div>
         <label for="Employees">Employee Count:</label>
         <input type="text" name="Employees" value="" />
         @Html.ValidationMessage("employees")
      </div>
      <div>
         <label>&nbsp;</label>
         <input type="submit" value="Submit" class="submit" />
      </div>
    </fieldset>
  </form>
</body>

유효성 검사 오류 메시지를 표시하려면 Html을 호출할 수 있습니다.ValidationMessage 메시지를 원하는 필드의 이름으로 전달합니다.

페이지를 실행합니다. 필드를 비워 두고 제출을 클릭합니다. 오류 메시지가 표시됩니다.
직원 수 필드에 문자열(예: "ABC")을 추가하고 제출을 다시 클릭합니다. 이번에는 문자열이 올바른 형식, 즉 정수에 있지 않음을 나타내는 오류가 표시됩니다.

ASP.NET 웹 페이지 사용자가 브라우저에서 즉각적인 피드백을 받을 수 있도록 클라이언트 스크립트를 사용하여 유효성 검사를 자동으로 수행하는 기능을 포함하여 사용자 입력의 유효성을 검사하기 위한 추가 옵션을 제공합니다. 자세한 내용은 나중에 추가 리소스 섹션을 참조하세요.

포스트백 후 양식 값 복원

이전 섹션에서 페이지를 테스트할 때 유효성 검사 오류가 있는 경우 입력한 모든 항목(잘못된 데이터뿐만 아니라)이 사라졌고 모든 필드에 대한 값을 다시 입력해야 했습니다. 페이지를 제출하고 처리한 다음 페이지를 다시 렌더링하면 페이지가 처음부터 다시 만들어집니다. 즉, 제출될 때 페이지에 있던 모든 값이 손실됩니다.

그러나 이 문제를 쉽게 해결할 수 있습니다. 제출된 값(개체에서)에 Request.Form 액세스할 수 있으므로 페이지가 렌더링될 때 해당 값을 양식 필드로 다시 채울 수 있습니다.

Form.cshtml 파일에서 특성을 사용하여 value 요소의 <input> 특성을 바꿉 value 니다.

<!DOCTYPE html>
<html>
  <head>
    <title>Customer Form</title>
  </head>
  <body>
    <form method="post">
      <fieldset>
        <legend>Add Customer</legend>
        <div>
          <label for="CompanyName">Company Name:</label>
          <input type="text" name="CompanyName"
                 value="@Request.Form["companyname"]"  />
          @Html.ValidationMessage("companyname")
        </div>
        <div>
         <label for="ContactName">Contact Name:</label>
         <input type="text" name="ContactName"
                value="@Request.Form["contactname"]" />
         @Html.ValidationMessage("contactname")
        </div>
        <div>
         <label for="Employees">Employee Count:</label>
         <input type="text" name="Employees"
                value="@Request.Form["employees"]" />
         @Html.ValidationMessage("employees")
        </div>
        <div>
          <label>&nbsp;</label>
          <input type="submit" value="Submit" class="submit" />
        </div>
    </fieldset>
  </form>
</body>

value 요소의 <input> 특성이 개체에서 Request.Form 필드 값을 동적으로 읽도록 설정되었습니다. 페이지가 처음 요청되면 개체의 Request.Form 값이 모두 비어 있습니다. 양식이 비어 있기 때문에 괜찮습니다.

브라우저에서 페이지를 시작하고 양식 필드를 입력하거나 비워 두고 제출을 클릭합니다. 제출된 값을 보여 주는 페이지가 표시됩니다.