ASP.NET 웹 페이지 소개 - 양식을 사용하여 데이터베이스 데이터 입력

아티클
07/13/2023

이 자습서에서는 항목 양식을 만든 다음, ASP.NET 웹 페이지(Razor)를 사용할 때 폼에서 가져오는 데이터를 데이터베이스 테이블에 입력하는 방법을 보여 줍니다. ASP.NET 웹 페이지 HTML Forms의 기본 사항을 통해 시리즈를 완료한 것으로 가정합니다.

학습할 내용:

항목 양식을 처리하는 방법에 대해 자세히 알아봅니다.

데이터베이스에 데이터를 추가(삽입)하는 방법입니다.

사용자가 양식에 필요한 값을 입력했는지 확인하는 방법(사용자 입력의 유효성을 검사하는 방법).

유효성 검사 오류를 표시하는 방법.

현재 페이지에서 다른 페이지로 이동하는 방법입니다.

설명된 기능/기술:

Database.Execute 메서드

SQL Insert Into 문

도우미입니다 Validation .

Response.Redirect 메서드

만들 내용

데이터베이스를 만드는 방법을 보여 준 이전 자습서에서는 데이터베이스 작업 영역에서 작업하는 WebMatrix에서 직접 데이터베이스를 편집하여 데이터베이스 데이터를 입력했습니다. 하지만 대부분의 앱에서는 데이터를 데이터베이스에 배치하는 실용적인 방법이 아닙니다. 따라서 이 자습서에서는 사용자 또는 누구나 데이터를 입력하고 데이터베이스에 저장할 수 있는 웹 기반 인터페이스를 만듭니다.

새 영화를 입력할 수 있는 페이지를 만듭니다. 페이지에는 영화 제목, 장르 및 연도를 입력할 수 있는 필드(텍스트 상자)가 있는 항목 양식이 포함됩니다. 페이지는 다음 페이지와 같습니다.

브라우저의 '동영상 추가' 페이지

텍스트 상자는 다음 태그와 같은 HTML <input> 요소가 됩니다.

<input type="text" name="genre" value="" />

기본 항목 양식 만들기

AddMovie.cshtml이라는 페이지를 만듭니다.

파일에 있는 내용을 다음 태그로 바꿉 있습니다. 모든 항목 덮어쓰기; 곧 맨 위에 코드 블록을 추가합니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Add a Movie</title>
</head>
<body>
  <h1>Add a Movie</h1>
  <form method="post">
    <fieldset>
      <legend>Movie Information</legend>
      <p><label for="title">Title:</label>
         <input type="text" name="title" value="@Request.Form["title"]" />
      </p>

      <p><label for="genre">Genre:</label>
         <input type="text" name="genre" value="@Request.Form["genre"]" />
      </p>

      <p><label for="year">Year:</label>
         <input type="text" name="year" value="@Request.Form["year"]" />
      </p>

      <p><input type="submit" name="buttonSubmit" value="Add Movie" /></p>
    </fieldset>
  </form>
</body>
</html>

이 예제에서는 폼을 만들기 위한 일반적인 HTML을 보여줍니다. 텍스트 상자 및 제출 단추에 요소를 사용합니다 <input> . 텍스트 상자의 캡션은 표준 <label> 요소를 사용하여 만들어집니다. <fieldset> 및 <legend> 요소는 양식 주위에 좋은 상자를 배치합니다.

이 페이지에서 요소는 특성의 <form> 값 method 으로 를 사용합니다post. 이전 자습서에서는 메서드를 사용하는 get 양식을 만들었습니다. 양식이 서버에 값을 제출했지만 요청이 변경되지 않았기 때문에 정확했습니다. 다른 방법으로 데이터를 가져오는 것만 있었습니다. 그러나 이 페이지에서 는 새 데이터베이스 레코드를 추가합니다. 따라서 이 양식은 메서드를 post 사용해야 합니다. (및 작업의 차이점 GET 에 대한 자세한 내용은 이전 자습서의GET, POST 및 HTTP 동사 안전 사이드바를 참조하세요.)POST

각 텍스트 상자에는 name 요소(title, , genreyear)가 있습니다. 이전 자습서에서 보았듯이 이러한 이름은 나중에 사용자의 입력을 가져올 수 있도록 해당 이름이 있어야 하기 때문에 중요합니다. 모든 이름을 사용할 수 있습니다. 작업 중인 데이터를 기억하는 데 도움이 되는 의미 있는 이름을 사용하는 것이 유용합니다.

각 <input> 요소의 특성에는 value 약간의 Razor 코드(예: Request.Form["title"])가 포함됩니다. 양식이 제출된 후 텍스트 상자에 입력한 값을 유지하기 위해 이전 자습서에서 이 트릭의 버전을 배웠습니다.

양식 값 가져오기

다음으로 양식을 처리하는 코드를 추가합니다. 개요에서 다음을 수행합니다.

페이지가 게시되고 있는지 확인합니다(제출됨). 페이지가 처음 실행될 때가 아니라 사용자가 단추를 클릭한 경우에만 코드를 실행하려고 합니다.
사용자가 텍스트 상자에 입력한 값을 가져옵니다. 이 경우 폼이 동사를 사용 POST 하므로 컬렉션에서 Request.Form 양식 값을 가져옵니다.
Movies 데이터베이스 테이블에 값을 새 레코드로 삽입합니다.

파일 맨 위에 다음 코드를 추가합니다.

@{
    var title = "";
    var genre = "";
    var year = "";

    if(IsPost){
        title = Request.Form["title"];
        genre = Request.Form["genre"];
        year = Request.Form["year"];
    }
}

처음 몇 줄은 텍스트 상자의 값을 저장할 변수(title, genre및 year)를 만듭니다. 줄 if(IsPost) 은 사용자가 동영상 추가 단추(즉, 폼이 게시되었을 때)를 클릭할 때만 변수가 설정되도록 합니다.

이전 자습서에서 보았듯이 와 같은 Request.Form["name"]식을 사용하여 텍스트 상자의 값을 가져옵니다. 여기서 name 은 요소의 <input> 이름입니다.

변수의 이름(title, genre및 year)은 임의입니다. 요소에 할당 <input> 하는 이름과 마찬가지로 원하는 모든 항목을 호출할 수 있습니다. (변수의 이름은 폼에 있는 요소의 <input> 이름 특성과 일치할 필요가 없습니다.) 그러나 요소와 <input> 마찬가지로 포함된 데이터를 반영하는 변수 이름을 사용하는 것이 좋습니다. 코드를 작성할 때 일관된 이름을 사용하면 작업 중인 데이터를 더 쉽게 기억할 수 있습니다.

데이터베이스에 데이터 추가

방금 추가한 코드 블록에서 블록의 if 닫는 중괄호( } )(코드 블록 내부뿐만 아니라)에 다음 코드를 추가합니다.

var db = Database.Open("WebPagesMovies");
var insertCommand = "INSERT INTO Movies (Title, Genre, Year) VALUES(@0, @1, @2)";
db.Execute(insertCommand, title, genre, year);

이 예제는 이전 자습서에서 데이터를 가져오고 표시하는 데 사용한 코드와 유사합니다. 로 시작하는 db = 줄은 이전과 같이 데이터베이스를 열고 다음 줄은 앞에서 본 것처럼 SQL 문을 다시 정의합니다. 그러나 이번에는 SQL Insert Into 문을 정의합니다. 다음 예제에서는 문의 일반 구문을 Insert Into 보여 줍니다.

INSERT INTO table (column1, column2, column3, ...) VALUES (value1, value2, value3, ...)

즉, 삽입할 테이블을 지정한 다음 삽입할 열을 나열한 다음 삽입할 값을 나열합니다. 앞에서 설명한 대로 SQL은 대/소문자를 구분하지 않지만 일부 사람들은 명령을 더 쉽게 읽을 수 있도록 키워드를 대문자로 사용합니다.

삽입하는 열이 명령에 (Title, Genre, Year)이미 나열되어 있습니다. 흥미로운 부분은 텍스트 상자 VALUES 의 값을 명령의 일부로 가져오는 방법입니다. 실제 값 대신, 물론 자리 표시자인 , @1및 @2가 표시됩니다@0. 명령(줄에서)을 db.Execute 실행하면 텍스트 상자에서 얻은 값을 전달합니다.

중요! SQL 문에서 사용자가 온라인으로 입력한 데이터를 포함해야 하는 유일한 방법은 여기(VALUES(@0, @1, @2))와 같이 자리 표시자를 사용하는 것입니다. 사용자 입력을 SQL 문에 연결하면 ASP.NET 웹 페이지 양식 기본 사항(이전 자습서)에 설명된 대로 SQL 삽입 공격에 자신을 엽니다.

여전히 블록 내부에 if 줄 다음에 다음 줄을 추가합니다 db.Execute .

Response.Redirect("~/Movies");

새 동영상이 데이터베이스에 삽입된 후 이 줄은 방금 입력한 영화를 볼 수 있도록 동영상 페이지로 이동(리디렉션)합니다. 연산자는 ~ "웹 사이트의 루트"를 의미합니다. 연산자는 ~ 일반적으로 HTML이 아닌 ASP.NET 페이지에서만 작동합니다.

전체 코드 블록은 다음 예제와 같습니다.

@{
    var title = "";
    var genre = "";
    var year = "";

    if(IsPost){
        title = Request.Form["title"];
        genre = Request.Form["genre"];
        year = Request.Form["year"];

        var db = Database.Open("WebPagesMovies");
        var insertCommand = "INSERT INTO Movies (Title, Genre, Year) Values(@0, @1, @2)";
        db.Execute(insertCommand, title, genre, year);
        Response.Redirect("~/Movies");
    }
}

Insert 명령 테스트(지금까지)

아직 완료되지 않았지만 지금은 테스트하기에 좋은 시기입니다.

WebMatrix의 파일 트리 뷰에서 AddMovie.cshtml 페이지를 마우스 오른쪽 단추로 클릭한 다음 브라우저에서 시작을 클릭합니다.

스크린샷은 브라우저의 '동영상 추가' 페이지를 보여줍니다.

(브라우저에서 다른 페이지가 있는 경우 URL http://localhost:nnnnn/AddMovie이 인지 확인합니다. 여기서 nnnnn 은 사용 중인 포트 번호입니다.)

오류 페이지가 발생했나요? 그렇다면 주의 깊게 읽고 코드가 이전에 나열된 것과 정확히 일치하는지 확인합니다.

"Citizen Kane", "Drama" 및 "1941"과 같은 형식으로 영화를 입력합니다. (또는 무엇이든). 그런 다음 동영상 추가를 클릭합니다.

모든 것이 잘 진행되면 영화 페이지로 리디렉션됩니다. 새 영화가 나열되어 있는지 확인합니다.

새로 추가된 영화를 보여 주는 영화 페이지

사용자 입력 유효성 검사

AddMovie 페이지로 돌아가기 다시 실행합니다. 다른 영화를 입력하지만 이번에는 제목만 입력합니다. 예를 들어 "Singin'in the Rain"을 입력합니다. 그런 다음 동영상 추가를 클릭합니다.

영화 페이지로 다시 리디렉션됩니다. 새 영화를 찾을 수 있지만 불완전합니다.

일부 값이 누락된 새 영화를 보여 주는 영화 페이지

Movies 테이블을 만들 때 필드가 null일 수 없다고 명시적으로 말했습니다. 여기에 새 영화에 대한 항목 양식이 있으며 필드를 비워 두고 있습니다. 이는 오류입니다.

이 경우 데이터베이스는 실제로 오류를 발생(또는 throw)하지 않았습니다. 장르나 연도를 제공하지 않았으므로 AddMovie 페이지의 코드는 이러한 값을 소위 빈 문자열로 처리했습니다. SQL Insert Into 명령이 실행되었을 때 장르 및 연도 필드에는 유용한 데이터가 없지만 null이 아니었습니다.

분명히 사용자가 데이터베이스에 반쯤 비어 있는 영화 정보를 입력하도록 하고 싶지는 않습니다. 해결 방법은 사용자의 입력 유효성을 검사하는 것입니다. 처음에는 유효성 검사에서 사용자가 모든 필드에 대한 값을 입력했는지 확인합니다(즉, 빈 문자열을 포함하지 않음).

팁

Null 및 빈 문자열

프로그래밍에는 "가치 없음"이라는 다양한 개념이 구별됩니다. 일반적으로 값은 어떤 방식으로든 설정되거나 초기화되지 않은 경우 null 입니다. 반면 문자 데이터(문자열)가 필요한 변수는 빈 문자열로 설정할 수 있습니다. 이 경우 값은 null이 아닙니다. 길이가 0인 문자 문자열로 명시적으로 설정되었습니다. 다음 두 문은 차이점을 보여 줍니다.

var firstName;       // Not set, so its value is null
var firstName = "";  // Explicitly set to an empty string -- not null

그보다 조금 더 복잡하지만 중요한 점은 null 결정되지 않은 상태를 나타내는 것입니다.

이제 값이 null인 시기와 빈 문자열일 때를 정확히 이해하는 것이 중요합니다. AddMovie 페이지의 코드에서 등을 사용하여 Request.Form["title"] 텍스트 상자의 값을 가져옵니다. 페이지가 처음 실행되면(단추를 클릭하기 전에) 값 Request.Form["title"] 이 null입니다. 그러나 양식을 Request.Form["title"] 제출할 때 텍스트 상자의 title 값을 가져옵니다. 명확하지는 않지만 빈 텍스트 상자는 null이 아닙니다. 빈 문자열만 있습니다. 따라서 단추 클릭 Request.Form["title"] 에 대한 응답으로 코드가 실행되면 에 빈 문자열이 있습니다.

이러한 구분이 중요한 이유는 무엇인가요? Movies 테이블을 만들 때 필드가 null일 수 없다고 명시적으로 말했습니다. 그러나 여기에 새 영화에 대한 항목 양식이 있으며 필드를 비워 두고 있습니다. 장르나 연도에 대한 값이 없는 새 영화를 저장하려고 할 때 데이터베이스가 불평할 것으로 합리적으로 예상할 수 있습니다. 그러나 이것이 핵심입니다. 이러한 텍스트 상자를 비워 두더라도 값은 null이 아닙니다. 빈 문자열입니다. 따라서 이러한 열이 비어 있지만 null이 아닌 새 영화를 데이터베이스에 저장할 수 있습니다. — 값입니다. 따라서 사용자가 빈 문자열을 제출하지 않도록 해야 합니다. 이 문자열은 사용자의 입력 유효성을 검사하여 수행할 수 있습니다.

유효성 검사 도우미

ASP.NET 웹 페이지 사용자가 요구 사항을 충족하는 데이터를 입력하도록 하는 데 사용할 수 있는 도우미Validation(도우미)가 포함되어 있습니다. 도우미는 Validation ASP.NET 웹 페이지 위해 기본 제공되는 도우미 중 하나이므로 이전 자습서에서 Gravatar 도우미를 설치한 방법인 NuGet을 사용하여 패키지로 설치할 필요가 없습니다.

사용자의 입력 유효성을 검사하려면 다음을 수행합니다.

코드를 사용하여 페이지의 텍스트 상자에 값을 요구하도록 지정합니다.
모든 항목이 제대로 유효성을 검사하는 경우에만 동영상 정보가 데이터베이스에 추가되도록 코드를 테스트합니다.
태그에 코드를 추가하여 오류 메시지를 표시합니다.

AddMovie 페이지의 코드 블록에서 변수 선언 바로 앞의 맨 위에 다음 코드를 추가합니다.

Validation.RequireField("title", "You must enter a title");
Validation.RequireField("genre", "Genre is required");
Validation.RequireField("year", "You haven't entered a year");

항목을 요구하려는 각 필드(<input> 요소)에 대해 한 번 호출 Validation.RequireField 합니다. 여기에 표시된 것처럼 각 호출에 대한 사용자 지정 오류 메시지를 추가할 수도 있습니다. (원하는 모든 것을 넣을 수 있음을 보여주기 위해 메시지를 다양하게 변경했습니다.)

문제가 있는 경우 새 영화 정보가 데이터베이스에 삽입되지 않도록 방지하려고 합니다. 블록에서 if(IsPost) (논리 AND)를 사용하여 && 를 테스트하는 다른 조건을 추가합니다 Validation.IsValid(). 완료되면 전체 if(IsPost) 블록이 다음 코드와 같이 표시됩니다.

if(IsPost && Validation.IsValid()){
    title = Request.Form["title"];
    genre = Request.Form["genre"];
    year = Request.Form["year"];

    var db = Database.Open("WebPagesMovies");
    var insertCommand = "INSERT INTO Movies (Title, Genre, Year) Values(@0, @1, @2)";
    db.Execute(insertCommand, title, genre, year);
    Response.Redirect("~/Movies");
}

도우미를 사용하여 Validation 등록한 필드에 유효성 검사 오류가 있는 경우 메서드는 false를 Validation.IsValid 반환합니다. 이 경우 해당 블록의 코드가 실행되지 않으므로 잘못된 동영상 항목이 데이터베이스에 삽입되지 않습니다. 물론 영화 페이지로 리디렉션되지는 않습니다.

유효성 검사 코드를 포함한 전체 코드 블록은 이제 다음 예제와 같습니다.

@{
    Validation.RequireField("title", "You must enter a title");
    Validation.RequireField("genre", "Genre is required");
    Validation.RequireField("year", "You haven't entered a year");

    var title = "";
    var genre = "";
    var year = "";

    if(IsPost && Validation.IsValid()){
       title = Request.Form["title"];
       genre = Request.Form["genre"];
       year = Request.Form["year"];

       var db = Database.Open("WebPagesMovies");
       var insertCommand = "INSERT INTO Movies (Title, Genre, Year) Values(@0, @1, @2)";
       db.Execute(insertCommand, title, genre, year);
       Response.Redirect("~/Movies");
    }
}

유효성 검사 오류 표시

마지막 단계는 오류 메시지를 표시하는 것입니다. 각 유효성 검사 오류에 대한 개별 메시지를 표시하거나 요약 또는 둘 다를 표시할 수 있습니다. 이 자습서에서는 작동 방식을 확인할 수 있도록 두 가지 작업을 모두 수행합니다.

유효성을 검사하는 각 <input> 요소 옆에 있는 메서드를 Html.ValidationMessage 호출하고 유효성을 검사하는 요소의 <input> 이름을 전달합니다. 오류 메시지가 표시되도록 메서드를 바로 배치 Html.ValidationMessage 합니다. 페이지가 실행되면 메서드는 Html.ValidationMessage 유효성 검사 오류가 발생하는 요소를 렌더링 <span> 합니다. (오류가 <span> 없으면 요소가 렌더링되지만 텍스트가 없습니다.)

이 예제와 같이 페이지의 세 <input> 요소 각각에 대한 메서드를 포함 Html.ValidationMessage 할 수 있도록 페이지의 태그를 변경합니다.

<p><label for="title">Title:</label>
     <input type="text" name="title" value="@Request.Form["title"]" />
      @Html.ValidationMessage("title")
  </p>

  <p><label for="genre">Genre:</label>
     <input type="text" name="genre" value="@Request.Form["genre"]" />
      @Html.ValidationMessage("genre")
  </p>

  <p><label for="year">Year:</label>
     <input type="text" name="year" value="@Request.Form["year"]" />
      @Html.ValidationMessage("year")
  </p>

요약의 작동 방식을 확인하려면 페이지의 요소 바로 다음에 <h1>Add a Movie</h1> 다음 태그와 코드를 추가합니다.

@Html.ValidationSummary()

기본적으로 메서드는 Html.ValidationSummary 목록의 모든 유효성 검사 메시지( <ul> 요소 내에 있는 요소)를 <div> 표시합니다. 메서드와 Html.ValidationMessage 마찬가지로 유효성 검사 요약에 대한 태그는 항상 렌더링됩니다. 오류가 없으면 목록 항목이 렌더링되지 않습니다.

요약은 메서드를 사용하여 Html.ValidationMessage 각 필드별 오류를 표시하는 대신 유효성 검사 메시지를 표시하는 다른 방법이 될 수 있습니다. 또는 요약과 세부 정보를 모두 사용할 수 있습니다. 또는 메서드를 Html.ValidationSummary 사용하여 일반 오류를 표시한 다음 개별 Html.ValidationMessage 호출을 사용하여 세부 정보를 표시할 수 있습니다.

이제 전체 페이지가 다음 예제와 같습니다.

@{
    Validation.RequireField("title", "You must enter a title");
    Validation.RequireField("genre", "Genre is required");
    Validation.RequireField("year", "You haven't entered a year");

    var title = "";
    var genre = "";
    var year = "";

    if(IsPost && Validation.IsValid()){
       title = Request.Form["title"];
       genre = Request.Form["genre"];
       year = Request.Form["year"];

       var db = Database.Open("WebPagesMovies");
       var insertCommand = "INSERT INTO Movies (Title, Genre, Year) Values(@0, @1, @2)";
       db.Execute(insertCommand, title, genre, year);
       Response.Redirect("~/Movies");
    }
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Add a Movie</title>
</head>
<body>
  <h1>Add a Movie</h1>
  @Html.ValidationSummary()
  <form method="post">
    <fieldset>
      <legend>Movie Information</legend>
      <p><label for="title">Title:</label>
         <input type="text" name="title" value="@Request.Form["title"]" />
          @Html.ValidationMessage("title")
      </p>

      <p><label for="genre">Genre:</label>
         <input type="text" name="genre" value="@Request.Form["genre"]" />
          @Html.ValidationMessage("genre")
      </p>

      <p><label for="year">Year:</label>
         <input type="text" name="year" value="@Request.Form["year"]" />
          @Html.ValidationMessage("year")
      </p>

      <p><input type="submit" name="buttonSubmit" value="Add Movie" /></p>
    </fieldset>
  </form>
</body>
</html>

이것으로 끝입니다. 이제 영화를 추가하지만 하나 이상의 필드를 제외하여 페이지를 테스트할 수 있습니다. 이렇게 하면 다음과 같은 오류 표시가 표시됩니다.

유효성 검사 오류 메시지를 보여 주는 동영상 추가 페이지

유효성 검사 오류 메시지 스타일 지정

오류 메시지가 있다는 것을 알 수 있지만 실제로 눈에 잘 띄지는 않습니다. 하지만 오류 메시지의 스타일을 지정하는 쉬운 방법이 있습니다.

에 표시되는 Html.ValidationMessage개별 오류 메시지의 스타일을 지정하려면 라는 field-validation-errorCSS 스타일 클래스를 만듭니다. 유효성 검사 요약의 모양을 정의하려면 라는 validation-summary-errorsCSS 스타일 클래스를 만듭니다.

이 기술의 작동 방식을 확인하려면 페이지의 섹션 내에 <head> 요소를 추가 <style> 합니다. 그런 다음, 다음 규칙을 포함하는 및 validation-summary-errors 라는 field-validation-error 스타일 클래스를 정의합니다.

<head>
  <meta charset="utf-8" />
  <title>Add a Movie</title>
  <style type="text/css">
    .field-validation-error {
      font-weight:bold;
      color:red;
      background-color:yellow;
     }
    .validation-summary-errors{
      border:2px dashed red;
      color:red;
      background-color:yellow;
      font-weight:bold;
      margin:12px;
    }
  </style>
</head>

일반적으로 스타일 정보를 별도의 .css 파일에 넣을 수 있지만 간단히 하기 위해 지금은 페이지에 배치할 수 있습니다. (이 자습서 집합의 뒷부분에서 CSS 규칙을 별도의 .css 파일로 이동합니다.)

유효성 검사 오류가 있는 경우 메서드는 Html.ValidationMessage 를 포함하는 class="field-validation-error"요소를 렌더링합니다<span>. 해당 클래스에 대한 스타일 정의를 추가하여 메시지의 모양을 구성할 수 있습니다. 오류가 있는 경우 메서드도 ValidationSummary 마찬가지로 특성을 class="validation-summary-errors"동적으로 렌더링합니다.

페이지를 다시 실행하고 의도적으로 몇 가지 필드를 제외합니다. 이제 오류가 더 두드러집니다. (사실, 그들은 과장되어 있지만, 그것은 단지 당신이 할 수있는 것을 보여주기 위한 것입니다.)

스타일이 지정된 유효성 검사 오류를 보여 주는 동영상 추가 페이지

영화 페이지에 링크 추가

마지막 단계는 원래 영화 목록에서 AddMovie 페이지로 편리하게 이동하도록 하는 것입니다.

영화 페이지를 다시 엽니다. 도우미 뒤에 있는 닫 </div> 는 태그 뒤에 WebGrid 다음 태그를 추가합니다.

<p>
  <a href="~/AddMovie">Add a movie</a>
</p>

앞에서 보았듯이 ASP.NET 연산자를 웹 사이트의 루트로 해석합니다 ~ . 연산자를 ~ 사용할 필요가 없습니다. 태그 <a href="./AddMovie">Add a movie</a> 또는 다른 방법을 사용하여 HTML이 이해하는 경로를 정의할 수 있습니다. ~ 그러나 이 연산자는 사이트를 보다 유연하게 만들기 때문에 Razor 페이지에 대한 링크를 만들 때 좋은 일반적인 방법입니다. 현재 페이지를 하위 폴더로 이동하면 링크가 AddMovie 페이지로 계속 이동합니다. 연산자는 ~.cshtml 페이지에서만 작동합니다. ASP.NET 이해하지만 표준 HTML은 아닙니다.)

완료되면 영화 페이지를 실행 합니다 . 이 페이지는 다음과 같습니다.

'영화 추가' 페이지에 대한 링크가 있는 영화 페이지

동영상 추가 링크를 클릭하여 AddMovie 페이지로 이동했는지 확인합니다.

다음 출시 예정

다음 자습서에서는 사용자가 데이터베이스에 이미 있는 데이터를 편집할 수 있도록 하는 방법을 알아봅니다.

AddMovie 페이지의 전체 목록

@{

    Validation.RequireField("title", "You must enter a title");
    Validation.RequireField("genre", "Genre is required");
    Validation.RequireField("year", "You haven't entered a year");

    var title = "";
    var genre = "";
    var year = "";

    if(IsPost && Validation.IsValid()){
       title = Request.Form["title"];
       genre = Request.Form["genre"];
       year = Request.Form["year"];

       var db = Database.Open("WebPagesMovies");
       var insertCommand = "INSERT INTO Movies (Title, Genre, Year) Values(@0, @1, @2)";
       db.Execute(insertCommand, title, genre, year);
       Response.Redirect("~/Movies");
    }
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Add a Movie</title>
      <style type="text/css">
    .field-validation-error {
      font-weight:bold;
      color:red;
      background-color:yellow;
     }
    .validation-summary-errors{
      border:2px dashed red;
      color:red;
      background-color:yellow;
      font-weight:bold;
      margin:12px;
    }
  </style>
</head>
<body>
  <h1>Add a Movie</h1>
  @Html.ValidationSummary()
  <form method="post">
    <fieldset>
      <legend>Movie Information</legend>
      <p><label for="title">Title:</label>
         <input type="text" name="title" value="@Request.Form["title"]" />
          @Html.ValidationMessage("title")
      </p>

      <p><label for="genre">Genre:</label>
         <input type="text" name="genre" value="@Request.Form["genre"]" />
         @Html.ValidationMessage("genre")
      </p>

      <p><label for="year">Year:</label>
         <input type="text" name="year" value="@Request.Form["year"]" />
          @Html.ValidationMessage("year")
      </p>

      <p><input type="submit" name="buttonSubmit" value="Add Movie" /></p>
    </fieldset>
  </form>
</body>
</html>

추가 리소스

Razor 구문을 사용하는 ASP.NET 웹 프로그래밍 소개
W3Schools 사이트의 SQL INSERT INTO 문
ASP.NET 웹 페이지 사이트에서 사용자 입력의 유효성을 검사합니다. 도우미 작업에 Validation 대한 자세한 정보입니다.

이전 다음

다음을 통해 공유

ASP.NET 웹 페이지 소개 - 양식을 사용하여 데이터베이스 데이터 입력

만들 내용

기본 항목 양식 만들기

양식 값 가져오기

데이터베이스에 데이터 추가

Insert 명령 테스트(지금까지)

사용자 입력 유효성 검사

유효성 검사 도우미

유효성 검사 오류 표시

유효성 검사 오류 메시지 스타일 지정

영화 페이지에 링크 추가

다음 출시 예정

AddMovie 페이지의 전체 목록

추가 리소스

피드백

추가 리소스