ASP.NET 웹 페이지 소개 - 일관된 레이아웃 만들기
이 자습서에서는 레이아웃을 사용하여 ASP.NET 웹 페이지 사용하는 사이트의 페이지에 대한 일관된 모양을 만드는 방법을 보여 줍니다. ASP.NET 웹 페이지 데이터베이스 데이터 삭제를 통해 시리즈를 완료한 것으로 가정합니다.
학습할 내용:
- 레이아웃 페이지입니다.
- 레이아웃 페이지를 동적 콘텐츠와 결합하는 방법입니다.
- 레이아웃 페이지에 값을 전달하는 방법입니다.
레이아웃 정보
지금까지 만든 페이지는 모두 완전하고 독립 실행형 페이지입니다. 모두 동일한 사이트에 속하지만 일반적인 요소나 표준 모양은 없습니다.
대부분의 사이트는 일관된 모양과 레이아웃을 가지고 있습니다. 예를 들어 Microsoft.com/web 사이트로 이동하여 주위를 둘러보면 페이지가 모두 전체 레이아웃과 시각적 테마를 준수하는 것을 볼 수 있습니다.
이 레이아웃을 만드는 비효율적 인 방법은 각 페이지에서 머리글, 탐색 모음 및 바닥글을 별도로 정의하는 것입니다. 매번 동일한 태그를 복제합니다. 항목을 변경하려는 경우(예: 바닥글 업데이트) 각 페이지를 개별적으로 변경해야 합니다.
레이아웃 페이지 가 들어오는 위치입니다. ASP.NET 웹 페이지 사이트의 페이지에 대한 전체 컨테이너를 제공하는 레이아웃 페이지를 정의할 수 있습니다. 예를 들어 레이아웃 페이지에는 머리글, 탐색 영역 및 바닥글이 포함될 수 있습니다. 레이아웃 페이지에는 기본 콘텐츠가 있는 자리 표시자가 포함되어 있습니다.
그런 다음 태그와 해당 페이지에 대한 코드가 포함된 개별 콘텐츠 페이지를 정의할 수 있습니다. 콘텐츠 페이지는 HTML 페이지를 완료할 필요가 없습니다. 요소도 가질 <body> 필요가 없습니다. 또한 콘텐츠를 표시할 레이아웃 페이지를 ASP.NET 알려주는 코드 줄도 있습니다. 다음은 이 관계의 작동 방식을 대략적으로 보여 주는 그림입니다.
이 상호 작용은 작동 중인 것을 볼 때 이해하기 쉽습니다. 이 자습서에서는 레이아웃을 사용하도록 영화 페이지를 변경합니다.
레이아웃 페이지 추가
먼저 머리글, 바닥글 및 기본 콘텐츠의 영역을 사용하여 일반적인 페이지 레이아웃을 정의하는 레이아웃 페이지를 만듭니다. WebPagesMovies 사이트에서 _Layout.cshtml이라는 CSHTML 페이지를 추가합니다.
선행 밑줄( _ ) 문자는 중요합니다. 페이지의 이름이 밑줄로 시작하는 경우 ASP.NET 해당 페이지를 브라우저로 직접 보내지 않습니다. 이 규칙을 사용하면 사이트에 필요하지만 사용자가 직접 요청할 수 없는 페이지를 정의할 수 있습니다.
페이지의 콘텐츠를 다음으로 바꿉다.
<!DOCTYPE html>
<html>
<head>
<title>My Movie Site</title>
<link href="~/Styles/Movies.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<h1>My Movie Site</h1>
</div>
<div id="main">
@RenderBody()
</div>
<div id="footer">
© @DateTime.Now.Year My Movie Site
</div>
</div>
</body>
</html>
여기서 볼 수 있듯이 이 태그는 요소를 사용하여 <div> 페이지에서 세 개의 섹션을 정의하고 세 개의 섹션을 보유하는 요소를 하나 더 <div> 정의하는 HTML일 뿐입니다. 바닥글에는 페이지의 해당 위치에서 현재 연도를 렌더링하는 Razor 코드 @DateTime.Now.Year가 약간 포함되어 있습니다.
Movies.css라는 스타일시트에 대한 링크가 있습니다. 스타일시트에서는 요소의 실제 레이아웃에 대한 세부 정보가 정의됩니다. 잠시 후에 만들겠습니다.
이 _Layout.cshtml 페이지의 유일한 특이한 기능은 줄입니다 @Render.Body() . 이 레이아웃이 다른 페이지와 병합될 때 콘텐츠가 이동하는 자리 표시자입니다.
.css 파일 추가
페이지에서 요소의 실제 정렬(즉, 모양)을 정의하는 기본 방법은 CSS(계단식 스타일시트) 규칙을 사용하는 것입니다. 따라서 새 레이아웃에 대한 규칙이 있는 .css 파일을 만듭니다.
WebMatrix에서 사이트의 루트를 선택합니다. 그런 다음 리본의 파일 탭에서 새로 만들기 단추 아래의 화살표를 클릭한 다음 새 폴더를 클릭합니다.
새 폴더 이름을 Styles로 지정 합니다.
새 스타일 폴더 내에서 Movies.css라는 파일을 만듭니다.
새 .css 파일의 내용을 다음으로 바꿉니다.
html{ height:100%; margin:0; padding:0; }
body {
height:60%;
font-family:'Trebuchet MS', 'Arial', 'Helvetica', 'sans-serif';
font-size:10pt;
background-color: LightGray;
line-height:1.6em;
}
h1{ font-size:1.6em; }
h2{ font-size:1.4em; }
#container{
min-height:100%;
position:relative;
left:10%;
}
#header{
padding:8px;
width:80%;
background-color:#4b6c9e;
color:White;
}
#main{
width:80%;
padding: 8px;
padding-bottom:4em;
background-color:White;
}
#footer{
width:80%;
height:2em;
padding:8px;
margin-top:-2em;
background-color:LightGray;
}
.head { background-color: #E8E8E8; font-weight: bold; color: #FFF; }
.grid th, .grid td { border: 1px solid #C0C0C0; padding: 5px; }
.alt { background-color: #E8E8E8; color: #000; }
.selected {background-color:Yellow;}
span.caption {width:100px;}
span.dataDisplay {font-weight:bold;}
우리는 두 가지를 제외하고, 이러한 CSS 규칙에 대해 많이 말하지 않을 것입니다. 하나는 글꼴 및 크기를 설정하는 것 외에도 규칙이 절대 위치 지정을 사용하여 머리글, 바닥글 및 기본 콘텐츠 영역의 위치를 설정하는 것입니다. CSS에서 포지셔닝을 접하는 경우 W3Schools 사이트에서 CSS 포지셔닝 자습서를 읽을 수 있습니다.
주의해야 할 또 다른 점은 맨 아래에 원래 Movies.cshtml 파일에서 개별적으로 정의된 스타일 규칙을 복사했다는 것입니다. 이러한 규칙은 ASP.NET 웹 페이지 사용하여 데이터 표시 소개 자습서에서 표에 줄무늬를 추가한 도우미 렌더링 태그를 만드는 WebGrid 데 사용되었습니다. (스타일 정의에 .css 파일을 사용하려는 경우 전체 사이트에 대한 스타일 규칙도 포함할 수 있습니다.)
레이아웃을 사용하도록 영화 파일 업데이트
이제 사이트의 기존 파일을 업데이트하여 새 레이아웃을 사용할 수 있습니다. Movies.cshtml 파일을 엽니다. 맨 위에 코드의 첫 번째 줄로 다음을 추가합니다.
Layout = "~/_Layout.cshtml";
이제 페이지가 다음과 같이 시작됩니다.
@{
Layout = "~/_Layout.cshtml";
var db = Database.Open("WebPagesMovies") ;
var selectCommand = "SELECT * FROM Movies";
var searchTerm = "";
// Etc.
이 한 줄의 코드는 영화 페이지가 실행될 때 _Layout.cshtml 파일과 병합되어야 한다는 것을 ASP.NET 알려줍니다.
Movies.cshtml 파일은 이제 레이아웃 페이지를 사용하므로 _Layout.cshtml 파일에서 처리되는 Movies.cshtml 페이지에서 태그를 제거할 수 있습니다. , 및 <html><body> 여는 태그와 닫는 태그를 가져옵니다<!DOCTYPE>. 이제 .css 파일에 해당 규칙이 있으므로 그리드에 대한 스타일 규칙을 포함하는 전체 <head> 요소와 해당 내용을 가져옵니다. 있는 동안 기존 <h1> 요소를 요소 <h1> 로 <h2> 변경합니다. 레이아웃 페이지에 요소가 이미 있습니다. <h2> 텍스트를 "영화 나열"으로 변경합니다.
일반적으로 콘텐츠 페이지에서 이러한 종류의 변경을 수행할 필요가 없습니다. 레이아웃 페이지로 사이트를 시작하면 이러한 모든 요소 없이 콘텐츠 페이지를 만듭니다. 하지만 이 경우 독립 실행형 페이지를 레이아웃을 사용하는 페이지로 변환하므로 약간의 정리가 있습니다.
완료되면 Movies.cshtml 페이지가 다음과 같이 표시됩니다.
@{
Layout = "~/_Layout.cshtml";
var db = Database.Open("WebPagesMovies") ;
var selectCommand = "SELECT * FROM Movies";
var searchTerm = "";
if(!Request.QueryString["searchGenre"].IsEmpty() ) {
selectCommand = "SELECT * FROM Movies WHERE Genre = @0";
searchTerm = Request.QueryString["searchGenre"];
}
if(!Request.QueryString["searchTitle"].IsEmpty() ) {
selectCommand = "SELECT * FROM Movies WHERE Title LIKE @0";
searchTerm = "%" + Request.QueryString["searchTitle"] + "%";
}
var selectedData = db.Query(selectCommand, searchTerm);
var grid = new WebGrid(source: selectedData, defaultSort: "Genre", rowsPerPage:3);
}
<h2>List Movies</h2>
<form method="get">
<div>
<label for="searchGenre">Genre to look for:</label>
<input type="text" name="searchGenre"
value="@Request.QueryString["searchGenre"]" />
<input type="Submit" value="Search Genre" /><br/>
(Leave blank to list all movies.)<br/>
</div>
<div>
<label for="SearchTitle">Movie title contains the following:</label>
<input type="text" name="searchTitle" value="@Request.QueryString["searchTitle"]" />
<input type="Submit" value="Search Title" /><br/>
</div>
</form>
<div>
@grid.GetHtml(
tableStyle: "grid",
headerStyle: "head",
alternatingRowStyle: "alt",
columns: grid.Columns(
grid.Column(format: @<a href="~/EditMovie?id=@item.ID">Edit</a>),
grid.Column("Title"),
grid.Column("Genre"),
grid.Column("Year"),
grid.Column(format: @<a href="~/DeleteMovie?id=@item.ID">Delete</a>)
)
)
</div>
<p><a href="~/AddMovie">Add a movie</a></p>
레이아웃 테스트
이제 레이아웃의 모양을 확인할 수 있습니다. WebMatrix에서 Movies.cshtml 페이지를 마우스 오른쪽 단추로 클릭하고 브라우저에서 시작을 선택합니다. 브라우저에 페이지가 표시되면 다음 페이지와 같습니다.
ASP.NET Movies.cshtml 페이지의 콘텐츠를 메서드가 있는 RenderBody_Layout.cshtml 페이지로 병합했습니다. 물론 _Layout.cshtml 페이지는 페이지의 모양을 정의하는 .css 파일을 참조합니다.
레이아웃을 사용하도록 AddMovie 페이지 업데이트
레이아웃의 진정한 이점은 사이트의 모든 페이지에 사용할 수 있다는 것입니다. AddMovie.cshtml 페이지를 엽니다.
AddMovie.cshtml 페이지에는 원래 유효성 검사 오류 메시지의 모양을 정의하는 몇 가지 CSS 규칙이 있었습니다. 이제 사이트에 대한 .css 파일이 있으므로 해당 규칙을 .css 파일로 이동할 수 있습니다. AddMovie.cshtml 파일에서 제거하고 Movies.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;
}
이제 Movies.cshtml에 대해 수행한 것과 동일한 종류의 AddMovie.cshtml을 변경합니다. 이제 불필요한 HTML 태그를 추가하고 Layout="~/_Layout.cshtml; 제거합니다. 요소를 로 <h1> 변경합니다 <h2>. 완료되면 페이지가 다음 예제와 같이 표시됩니다.
@{
Layout = "~/_Layout.cshtml";
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){
if(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");
}
}
}
<h2>Add a Movie</h2>
@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>
페이지를 실행합니다. 이제 다음 그림과 같습니다.
사이트의 페이지( EditMovie.cshtml 및 DeleteMovie.cshtml )를 비슷하게 변경하려고 합니다. 그러나 이전에 레이아웃을 다시 변경하여 좀 더 유연하게 만들 수 있습니다.
레이아웃 페이지에 제목 정보 전달
만든 _Layout.cshtml 페이지에는 <title> "내 영화 사이트"로 설정된 요소가 있습니다. 대부분의 브라우저는 이 요소의 내용을 탭의 텍스트로 표시합니다.
이 타이틀 정보는 제네릭입니다. 제목 텍스트가 현재 페이지에 더 구체적으로 지정되도록 한다고 가정합니다. (제목 텍스트는 검색 엔진에서 페이지 정보를 확인하는 데도 사용됩니다.) Movies.cshtml 또는 AddMovie.cshtml 과 같은 콘텐츠 페이지에서 레이아웃 페이지로 정보를 전달한 다음, 해당 정보를 사용하여 레이아웃 페이지가 렌더링하는 내용을 사용자 지정할 수 있습니다.
Movies.cshtml 페이지를 다시 엽니다. 위쪽의 코드에서 다음 줄을 추가합니다.
Page.Title = "List Movies";
개체는 Page 모든 .cshtml 페이지에서 사용할 수 있으며 이 용도로, 즉 페이지와 해당 레이아웃 간에 정보를 공유합니다.
_Layout.cshtml 페이지를 엽니다. <title> 이 태그처럼 보이도록 요소를 변경합니다.
<title>@Page.Title</title>
이 코드는 Page.Title 페이지의 해당 위치에 있는 속성에 있는 모든 것을 렌더링합니다.
Movies.cshtml 페이지를 실행합니다. 이번에는 브라우저 탭에서 전달한 내용을 값 Page.Title으로 표시합니다.
원하는 경우 브라우저에서 페이지 원본을 봅니다. 요소가 로 <title>List Movies</title>렌더링되는 것을 <title> 볼 수 있습니다.
팁
Page 개체
의 Page 유용한 기능은 동적 개체이며 속성이 Title 고정 또는 예약된 이름이 아니라는 것입니다. 개체 값 Page 에 어떤 이름도 사용할 수 있습니다. 예를 들어 또는 Page.MyPage속성을 Page.CurrentName 사용하여 제목을 쉽게 전달할 수 있습니다. 유일한 제한 사항은 이름을 지정할 수 있는 속성에 대한 일반 규칙을 따라야 한다는 것입니다. 예를 들어 이름에 공백을 포함할 수 없습니다.
개체를 사용하여 Page 원하는 수의 값을 전달할 수 있습니다. 동영상 정보를 레이아웃 페이지에 전달하려는 경우 및 Page.Genre 와 Page.MovieYear같은 Page.MovieTitle 값을 사용하여 값을 전달할 수 있습니다. (또는 정보를 저장하기 위해 발명한 다른 이름) 명백한 유일한 요구 사항은 콘텐츠 페이지와 레이아웃 페이지에서 동일한 이름을 사용해야 한다는 것입니다.
개체를 사용하여 Page 전달하는 정보는 레이아웃 페이지에 표시할 텍스트로만 제한되지 않습니다. 값을 레이아웃 페이지에 전달한 다음 레이아웃 페이지의 코드를 사용하여 페이지의 섹션을 표시할지 여부, 사용할 .css 파일 등을 결정할 수 있습니다. 개체에 전달하는 값은 코드에서 Page 사용하는 다른 값과 같습니다. 값은 콘텐츠 페이지에서 시작되고 레이아웃 페이지로 전달됩니다.
AddMovie.cshtml 페이지를 열고 AddMovie.cshtml 페이지의 제목을 제공하는 코드 맨 위에 줄을 추가합니다.
Page.Title = "Add a Movie";
AddMovie.cshtml 페이지를 실행합니다. 새 제목이 표시됩니다.
레이아웃을 사용하도록 나머지 페이지 업데이트
이제 사이트의 나머지 페이지를 완료하여 새 레이아웃을 사용할 수 있습니다. EditMovie.cshtml 및 DeleteMovie.cshtml을 차례로 열고 각각을 동일하게 변경합니다.
레이아웃 페이지에 연결되는 코드 줄을 추가합니다.
Layout = "~/_Layout.cshtml";
페이지의 제목을 설정하는 줄을 추가합니다.
Page.Title = "Edit a Movie";
또는
Page.Title = "Delete a Movie";
모든 불필요한 HTML 태그를 제거합니다. 기본적으로 요소 내에 <body> 있는 비트와 맨 위에 있는 코드 블록만 그대로 둡니다.
<h1> 요소를 요소로 <h2> 변경합니다.
이러한 변경 내용을 적용한 경우 각각을 테스트하고 제대로 표시되고 있고 타이틀이 올바른지 확인합니다.
레이아웃 페이지에 대한 이별 생각
이 자습서에서는 _Layout.cshtml 페이지를 만들고 메서드를 RenderBody 사용하여 다른 페이지의 콘텐츠를 병합했습니다. 이것이 웹 페이지에서 레이아웃을 사용하기 위한 기본 패턴입니다.
레이아웃 페이지에는 여기서 다루지 않은 추가 기능이 있습니다. 예를 들어 레이아웃 페이지를 중첩할 수 있습니다. 한 레이아웃 페이지는 다른 레이아웃 페이지를 참조할 수 있습니다. 중첩된 레이아웃은 다른 레이아웃이 필요한 사이트의 하위 섹션으로 작업하는 경우에 유용할 수 있습니다. 추가 메서드(예 RenderSection: )를 사용하여 레이아웃 페이지에서 명명된 섹션을 설정할 수도 있습니다.
레이아웃 페이지와 .css 파일의 조합은 강력합니다. 다음 자습서 시리즈에서 볼 수 있듯이 WebMatrix에서 미리 빌드된 기능이 있는 사이트를 제공하는 템플릿을 기반으로 사이트를 만들 수 있습니다. 템플릿은 레이아웃 페이지와 CSS를 잘 활용하여 멋지게 보이고 메뉴와 같은 기능이 있는 사이트를 만듭니다. 다음은 레이아웃 페이지 및 CSS를 사용하는 기능을 보여 주는 템플릿을 기반으로 한 사이트의 홈페이지 스크린샷입니다.
동영상 페이지에 대한 전체 목록(레이아웃 페이지를 사용하도록 업데이트됨)
@{
Layout = "~/_Layout.cshtml";
Page.Title = "List Movies";
var db = Database.Open("WebPagesMovies") ;
var selectCommand = "SELECT * FROM Movies";
var searchTerm = "";
if(!Request.QueryString["searchGenre"].IsEmpty() ) {
selectCommand = "SELECT * FROM Movies WHERE Genre = @0";
searchTerm = Request.QueryString["searchGenre"];
}
if(!Request.QueryString["searchTitle"].IsEmpty() ) {
selectCommand = "SELECT * FROM Movies WHERE Title LIKE @0";
searchTerm = "%" + Request.QueryString["searchTitle"] + "%";
}
var selectedData = db.Query(selectCommand, searchTerm);
var grid = new WebGrid(source: selectedData, defaultSort: "Genre", rowsPerPage:3);
}
<h2>List Movies</h2>
<form method="get">
<div>
<label for="searchGenre">Genre to look for:</label>
<input type="text" name="searchGenre" value="@Request.QueryString["searchGenre"]" />
<input type="Submit" value="Search Genre" /><br/>
(Leave blank to list all movies.)<br/>
</div>
<div>
<label for="SearchTitle">Movie title contains the following:</label>
<input type="text" name="searchTitle" value="@Request.QueryString["searchTitle"]" />
<input type="Submit" value="Search Title" /><br/>
</div>
</form>
<div>
@grid.GetHtml(
tableStyle: "grid",
headerStyle: "head",
alternatingRowStyle: "alt",
columns: grid.Columns(
grid.Column(format: @<a href="~/EditMovie?id=@item.ID">Edit</a>),
grid.Column("Title"),
grid.Column("Genre"),
grid.Column("Year"),
grid.Column(format: @<a href="~/DeleteMovie?id=@item.ID">Delete</a>)
)
)
</div>
<p><a href="~/AddMovie">Add a movie</a></p>
동영상 추가 페이지의 전체 페이지 목록(레이아웃에 대해 업데이트됨)
@{
Layout = "~/_Layout.cshtml";
Page.Title = "Add a Movie";
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){
if(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");
}
}
}
<h2>Add a Movie</h2>
@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><label for="genre">Genre:</label>
<input type="text" name="genre" value="@Request.Form["genre"]" />
@Html.ValidationMessage("genre")
<p><label for="year">Year:</label>
<input type="text" name="year" value="@Request.Form["year"]" />
@Html.ValidationMessage("year")
<p><input type="submit" name="buttonSubmit" value="Add Movie" /></p>
</fieldset>
</form>
영화 페이지 삭제에 대한 전체 페이지 목록(레이아웃에 대해 업데이트됨)
@{
Layout = "~/_Layout.cshtml";
Page.Title = "Delete a Movie";
var title = "";
var genre = "";
var year = "";
var movieId = "";
if(!IsPost){
if(!Request.QueryString["ID"].IsEmpty() && Request.QueryString["ID"].AsInt() > 0){
movieId = Request.QueryString["ID"];
var db = Database.Open("WebPagesMovies");
var dbCommand = "SELECT * FROM Movies WHERE ID = @0";
var row = db.QuerySingle(dbCommand, movieId);
if(row != null) {
title = row.Title;
genre = row.Genre;
year = row.Year;
}
else{
Validation.AddFormError("No movie was found for that ID.");
// If you are using a version of ASP.NET Web Pages 2 that's
// earlier than the RC release, comment out the preceding
// statement and uncomment the following one.
//ModelState.AddFormError("No movie was found for that ID.");
}
}
else{
Validation.AddFormError("No movie was found for that ID.");
// If you are using a version of ASP.NET Web Pages 2 that's
// earlier than the RC release, comment out the preceding
// statement and uncomment the following one.
//ModelState.AddFormError("No movie was found for that ID.");
}
}
if(IsPost && !Request["buttonDelete"].IsEmpty()){
movieId = Request.Form["movieId"];
var db = Database.Open("WebPagesMovies");
var deleteCommand = "DELETE FROM Movies WHERE ID = @0";
db.Execute(deleteCommand, movieId);
Response.Redirect("~/Movies");
}
}
<h2>Delete a Movie</h2>
@Html.ValidationSummary()
<p><a href="~/Movies">Return to movie listing</a></p>
<form method="post">
<fieldset>
<legend>Movie Information</legend>
<p><span>Title:</span>
<span>@title</span></p>
<p><span>Genre:</span>
<span>@genre</span></p>
<p><span>Year:</span>
<span>@year</span></p>
<input type="hidden" name="movieid" value="@movieId" />
<p><input type="submit" name="buttonDelete" value="Delete Movie" /></p>
</fieldset>
</form>
동영상 편집 페이지의 전체 페이지 목록(레이아웃에 대해 업데이트됨)
@{
Layout = "~/_Layout.cshtml";
Page.Title = "Edit a Movie";
var title = "";
var genre = "";
var year = "";
var movieId = "";
if(!IsPost){
if(!Request.QueryString["ID"].IsEmpty() && Request.QueryString["ID"].IsInt()) {
movieId = Request.QueryString["ID"];
var db = Database.Open("WebPagesMovies");
var dbCommand = "SELECT * FROM Movies WHERE ID = @0";
var row = db.QuerySingle(dbCommand, movieId);
if(row != null) {
title = row.Title;
genre = row.Genre;
year = row.Year;
}
else{
Validation.AddFormError("No movie was selected.");
// If you are using a version of ASP.NET Web Pages 2 that's
// earlier than the RC release, comment out the preceding
// statement and uncomment the following one.
//ModelState.AddFormError("No movie was selected.");
}
}
else{
Validation.AddFormError("No movie was selected.");
// If you are using a version of ASP.NET Web Pages 2 that's
// earlier than the RC release, comment out the preceding
// statement and uncomment the following one.
//ModelState.AddFormError("No movie was selected.");
}
}
if(IsPost){
Validation.RequireField("title", "You must enter a title");
Validation.RequireField("genre", "Genre is required");
Validation.RequireField("year", "You haven't entered a year");
Validation.RequireField("movieid", "No movie ID was submitted!");
title = Request.Form["title"];
genre = Request.Form["genre"];
year = Request.Form["year"];
movieId = Request.Form["movieId"];
if(Validation.IsValid()){
var db = Database.Open("WebPagesMovies");
var updateCommand = "UPDATE Movies SET Title=@0, Genre=@1, Year=@2 WHERE Id=@3";
db.Execute(updateCommand, title, genre, year, movieId);
Response.Redirect("~/Movies");
}
}
}
<h2>Edit a Movie</h2>
@Html.ValidationSummary()
<form method="post">
<fieldset>
<legend>Movie Information</legend>
<p><label for="title">Title:</label>
<input type="text" name="title" value="@title" /></p>
<p><label for="genre">Genre:</label>
<input type="text" name="genre" value="@genre" /></p>
<p><label for="year">Year:</label>
<input type="text" name="year" value="@year" /></p>
<input type="hidden" name="movieid" value="@movieId" />
<p><input type="submit" name="buttonSubmit" value="Submit Changes" /></p>
</fieldset>
</form>
<p><a href="~/Movies">Return to movie listing</a></p>
다음 출시 예정
다음 자습서에서는 모든 사용자가 볼 수 있도록 사이트를 인터넷에 게시하는 방법을 알아봅니다.
추가 리소스
- 일관된 모양 만들기 - 레이아웃 작업에 대해 좀 더 자세히 설명하는 문서입니다. 또한 일부 콘텐츠를 표시하거나 숨기는 레이아웃 페이지에 값을 전달하는 방법도 설명합니다.
- Razor가 있는 중첩된 레이아웃 페이지 - Mike Brind 블로그에 레이아웃 페이지를 중첩하는 방법의 예가 있습니다. (페이지의 다운로드를 포함합니다.)
피드백
출시 예정: 2024년 내내 콘텐츠에 대한 피드백 메커니즘으로 GitHub 문제를 단계적으로 폐지하고 이를 새로운 피드백 시스템으로 바꿀 예정입니다. 자세한 내용은 다음을 참조하세요. https://aka.ms/ContentUserFeedback
다음에 대한 사용자 의견 제출 및 보기