ASP.NET 웹 페이지 소개 - 프로그래밍 기본 사항
작성자: Tom FitzMacken
이 자습서에서는 Razor 구문을 사용하여 ASP.NET 웹 페이지 프로그래밍하는 방법에 대한 개요를 제공합니다.
학습할 내용:
- ASP.NET 웹 페이지 프로그래밍에 사용하는 기본 "Razor" 구문입니다.
- 사용할 프로그래밍 언어인 몇 가지 기본 C#입니다.
- 웹 페이지에 대한 몇 가지 기본 프로그래밍 개념입니다.
- 사이트에서 사용할 패키지(미리 빌드된 코드가 포함된 구성 요소)를 설치하는 방법입니다.
- 도우미를 사용하여 일반적인 프로그래밍 작업을 수행하는 방법입니다.
설명된 기능/기술:
- NuGet 및 패키지 관리자.
- 도우미입니다
Gravatar.
이 자습서는 주로 ASP.NET 웹 페이지 데 사용할 프로그래밍 구문을 소개하는 연습입니다. C# 프로그래밍 언어로 작성된 Razor 구문 및 코드에 대해 알아봅니다. 이전 자습서에서 이 구문을 엿볼 수 있습니다. 이 자습서에서는 구문에 대해 자세히 설명합니다.
이 자습서에는 단일 자습서에서 볼 수 있는 가장 많은 프로그래밍이 포함되며 프로그래밍에만 적용되는 유일한 자습서임을 약속합니다. 이 집합의 나머지 자습서에서는 흥미로운 작업을 수행하는 페이지를 실제로 만듭니다.
도우미에 대해서도 알아봅니다. 도우미는 페이지에 추가할 수 있는 패키지된 코드 조각인 구성 요소입니다. 도우미가 작업을 수행합니다. 그렇지 않으면 지루하거나 복잡할 수 있습니다.
Razor를 사용하여 재생할 페이지 만들기
이 섹션에서는 기본 구문을 파악할 수 있도록 Razor에서 약간 재생합니다.
WebMatrix가 아직 실행되고 있지 않은 경우 시작합니다. 이전 자습서에서 만든 웹 사이트(웹 페이지 시작)를 사용합니다. 다시 열려면 내 사이트를 클릭하고 WebPageMovies를 선택합니다.
파일 작업 영역을 선택합니다.
리본에서 새로 만들기를 클릭하여 페이지를 만듭니다. CSHTML을 선택하고 새 페이지 TestRazor.cshtml의 이름을 지정합니다.
확인을 클릭합니다.
다음을 파일에 복사하여 이미 있는 내용을 완전히 바꿉히게 합니다.
참고 항목
예제에서 페이지로 코드 또는 태그를 복사하는 경우 들여쓰기 및 맞춤이 자습서와 동일하지 않을 수 있습니다. 하지만 들여쓰기 및 맞춤은 코드 실행 방식에 영향을 주지 않습니다.
@{
// Working with numbers
var a = 4;
var b = 5;
var theSum = a + b;
// Working with characters (strings)
var technology = "ASP.NET";
var product ="Web Pages";
// Working with objects
var rightNow = DateTime.Now;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Testing Razor Syntax</title>
<meta charset="utf-8" />
<style>
body {font-family:Verdana; margin-left:50px; margin-top:50px;}
div {border: 1px solid black; width:50%; margin:1.2em;padding:1em;}
span.bright {color:red;}
</style>
</head>
<body>
<h1>Testing Razor Syntax</h1>
<form method="post">
<div>
<p>The value of <em>a</em> is @a. The value of <em>b</em> is @b.
<p>The sum of <em>a</em> and <em>b</em> is <strong>@theSum</strong>.</p>
<p>The product of <em>a</em> and <em>b</em> is <strong>@(a*b)</strong>.</p>
</div>
<div>
<p>The technology is @technology, and the product is @product.</p>
<p>Together they are <span class="bright">@(technology + " " + product)</span></p>
</div>
<div>
<p>The current date and time is: @rightNow</p>
<p>The URL of the current page is<br/><br/><code>@Request.Url</code></p>
</div>
</form>
</body>
</html>
예제 페이지 검사
대부분의 내용은 일반적인 HTML입니다. 그러나 맨 위에는 다음 코드 블록이 있습니다.
@{
// Working with numbers.
var a = 4;
var b = 5;
var theSum = a + b;
// Working with characters (strings).
var technology = "ASP.NET";
var product ="Web Pages";
// Working with objects.
var rightNow = DateTime.Now;
}
이 코드 블록에 대한 다음 사항을 확인합니다.
- @ 문자는 다음이 HTML이 아닌 Razor 코드임을 ASP.NET 알려줍니다. ASP.NET 일부 HTML로 다시 실행될 때까지 @ 문자 뒤의 모든 것을 코드로 처리합니다. (이 경우, 그건 <! DOCTYPE> 요소입니다.
- 코드에 줄이 두 개 이상 있는 경우 중괄호({ 및 })는 Razor 코드 블록을 묶습니다. 중괄호는 해당 블록의 코드가 시작되고 끝나는 위치를 ASP.NET 알려줍니다.
- // 문자는 주석을 표시합니다. 즉, 실행되지 않는 코드의 일부입니다.
- 각 문은 세미콜론(;)으로 끝나야 합니다. (하지만 주석은 아닙니다.)
- 변수에 값을 저장할 수 있습니다. 변수는 var 키워드를 사용하여 만듭니다(선언). 변수를 만들 때 문자, 숫자 및 밑줄(_)을 포함할 수 있는 이름을 지정합니다. 변수 이름은 숫자로 시작할 수 없으며 프로그래밍 키워드의 이름(예: var)을 사용할 수 없습니다.
- 문자열(예: "ASP.NET" 및 "웹 페이지")을 따옴표로 묶습니다. (큰따옴표여야 합니다.) 숫자는 따옴표로 묶지 않습니다.
- 따옴표 밖의 공백은 중요하지 않습니다. 줄 바꿈은 대부분 중요하지 않습니다. 문자열을 따옴표로 줄에 분할할 수 없다는 것은 예외입니다. 들여쓰기와 맞춤은 중요하지 않습니다.
이 예제에서 명확하지 않은 것은 모든 코드가 대/소문자를 구분한다는 것입니다. 즉, TheSum 변수는 theSum 또는 thesum이라고 명명될 수 있는 변수와 다른 변수입니다. 마찬가지로 var은 키워드이지만 Var은 그렇지 않습니다.
개체 및 속성 및 메서드
그런 다음 DateTime.Now 식이 있습니다. 간단히 말하면 DateTime은 개체입니다. 개체는 페이지, 텍스트 상자, 파일, 이미지, 웹 요청, 전자 메일 메시지, 고객 레코드 등으로 프로그래밍할 수 있는 항목입니다. 개체에는 특성을 설명하는 속성이 하나 이상 있습니다. 텍스트 상자 개체에는 Text 속성(다른 항목 중 하나), 요청 개체에는 Url 속성(및 기타), 전자 메일 메시지에 From 속성 및 To 속성 등이 있습니다. 개체에는 수행할 수 있는 "동사"인 메서드 도 있습니다. 개체를 많이 사용합니다.
예제에서 볼 수 있듯이 DateTime은 날짜 및 시간을 프로그래밍할 수 있는 개체입니다. 현재 날짜와 시간을 반환하는 Now라는 속성이 있습니다.
페이지에서 코드를 사용하여 태그 렌더링
페이지 본문에서 다음을 확인합니다.
<div>
<p>The value of <em>a</em> is @a. The value of <em>b</em> is @b.
<p>The sum of <em>a</em> and <em>b</em> is <strong>@theSum</strong>.</p>
<p>The product of <em>a</em> and <em>b</em> is <strong>@(a*b)</strong>.</p>
</div>
<div>
<p>The technology is @technology, and the product is @product.</p>
<p>Together they are <span class="bright">@(technology + " " + product)</span></p>
</div>
<div>
<p>The current date and time is: @rightNow</p>
<p>The URL of the current page is<br/><br/><code>@Request.Url</code></p>
</div>
다시 말하지만@ 문자는 ASP.NET HTML이 아닌 코드라고 알려줍니다. 태그에서 @ 및 코드 식을 추가할 수 있으며 ASP.NET 해당 시점에서 해당 식의 값을 바로 렌더링합니다. 이 예제 @a 에서는 a라는 변수의 값이 무엇이든 렌더링하고, @product 제품이라는 변수에 있는 모든 값을 렌더링합니다.
하지만 변수에만 국한되지는 않습니다. 여기서는 @ 문자가 식 앞에 오는 몇 가지 경우가 있습니다.
- @(a*b)는 변수 a와 b에 있는 모든 항목의 곱을 렌더링합니다. *연산자는 곱셈을 의미합니다.
- @(technology + " " " + product)는 변수를 연결하고 그 사이에 공백을 추가한 후 변수 기술 및 제품의 값을 렌더링합니다. 문자열을 연결하는 연산자(+)는 숫자를 추가하는 연산자와 동일합니다. ASP.NET 일반적으로 숫자 또는 문자열로 작업하는지 여부를 알 수 있으며 + 연산자를 사용하여 올바른 작업을 수행합니다.
- @Request.Url 는 Request 개체의 Url 속성을 렌더링합니다. Request 개체에는 브라우저의 현재 요청에 대한 정보가 포함되며, 물론 Url 속성에는 해당 현재 요청의 URL이 포함됩니다.
이 예제는 여러 가지 방법으로 작업을 수행할 수 있음을 보여 주도록 설계되었습니다. 위쪽의 코드 블록에서 계산을 수행하고 결과를 변수에 넣은 다음 태그에 변수를 렌더링할 수 있습니다. 또는 태그에서 바로 식에서 계산을 수행할 수 있습니다. 사용하는 방법은 자신이 하는 일과 어느 정도는 자신의 기본 설정에 따라 달라집니다.
작동 중인 코드 보기
파일 이름을 마우스 오른쪽 단추로 클릭한 다음 브라우저에서 시작을 선택합니다. 브라우저에서 페이지에서 모든 값과 식이 확인된 페이지가 표시됩니다.
브라우저에서 원본을 확인합니다.
이전 자습서의 환경에서 예상한 대로 페이지에 Razor 코드가 없습니다. 실제 표시 값만 표시됩니다. 페이지를 실행할 때 실제로 WebMatrix에 기본 제공된 웹 서버에 대한 요청을 만듭니다. 요청이 수신되면 ASP.NET 모든 값과 식을 확인하고 해당 값을 페이지로 렌더링합니다. 그런 다음 브라우저로 페이지를 보냅니다.
팁
Razor 및 C#
지금까지 Razor 구문을 사용한다고 했습니다. 그건 사실이지만, 그것은 완전한 이야기가 아닙니다. 사용 중인 실제 프로그래밍 언어를 C#이라고 합니다. C#은 10년 전에 Microsoft에서 만들어졌으며 Windows 앱을 만들기 위한 기본 프로그래밍 언어 중 하나가 되었습니다. 변수의 이름을 지정하는 방법 및 문을 만드는 방법 등에 대해 살펴보았던 모든 규칙은 실제로 C# 언어의 모든 규칙입니다.
Razor는 이 코드를 페이지에 포함하는 방법에 대한 작은 규칙 집합을 보다 구체적으로 나타냅니다. 예를 들어 @ 을 사용하여 페이지에 코드를 표시하고 @{ }를 사용하여 코드 블록을 포함하는 규칙은 페이지의 Razor 측면입니다. 도우미도 Razor의 일부로 간주됩니다. Razor 구문은 ASP.NET 웹 페이지 것보다 많은 위치에서 사용됩니다. 예를 들어 ASP.NET MVC 보기에서도 사용됩니다.
프로그래밍 ASP.NET 웹 페이지 대한 정보를 찾으면 Razor에 대한 많은 참조를 찾을 수 있기 때문에 이에 대해 언급합니다. 그러나 이러한 참조의 대부분은 수행 중인 내용에 적용되지 않으므로 혼동될 수 있습니다. 실제로 많은 프로그래밍 질문은 C#을 사용하거나 ASP.NET 작업하는 것에 관한 것입니다. 따라서 Razor에 대한 정보를 구체적으로 찾는 경우 필요한 답변을 찾지 못할 수 있습니다.
일부 조건부 논리 추가
페이지에서 코드를 사용하는 방법에 대한 좋은 기능 중 하나는 다양한 조건에 따라 수행되는 작업을 변경할 수 있다는 것입니다. 자습서의 이 부분에서는 페이지에 표시되는 내용을 변경하는 몇 가지 방법을 살펴보겠습니다.
이 예제는 조건부 논리에 집중할 수 있도록 간단하고 다소 모순됩니다. 만들 페이지는 다음을 수행합니다.
- 페이지가 처음 표시되는지 또는 단추를 클릭하여 페이지를 제출했는지 여부에 따라 페이지에 다른 텍스트를 표시합니다. 첫 번째 조건부 테스트가 됩니다.
- URL의 쿼리 문자열에 특정 값이 전달되는 경우에만 메시지를 표시합니다(http://...? show=true). 두 번째 조건부 테스트가 됩니다.
WebMatrix에서 페이지를 만들고 이름을 TestRazorPart2.cshtml로 지정합니다. (리본 에서새로 만들기, CSHTML을 선택하고 파일 이름을 지정한 다음 확인을 클릭합니다.)
해당 페이지의 내용을 다음으로 바꿉니다.
@{
var message = "This is the first time you've requested the page.";
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Testing Razor Syntax - Part 2</title>
<meta charset="utf-8" />
<style>
body {font-family:Verdana; margin-left:50px; margin-top:50px;}
div {border: 1px solid black; width:50%; margin:1.2em;padding:1em;}
</style>
</head>
<body>
<h1>Testing Razor Syntax - Part 2</h1>
<form method="post">
<div>
<p>@message</p>
<p><input type="submit" value="Submit" /></p>
</div>
</form>
</body>
</html>
위쪽의 코드 블록은 일부 텍스트가 포함된 명명된 메시지를 초기화합니다. 페이지 본문에서 메시지 변수의 내용이 p> 요소 내에 <표시됩니다. 태그에는 제출 단추를 만드는 입력> 요소도 포함<됩니다.
페이지를 실행하여 지금 작동 방식을 확인합니다. 지금은 제출 단추를 클릭하더라도 기본적으로 정적 페이지입니다.
WebMatrix로 돌아갑니다. 코드 블록 내에서 메시지를 초기화하는 줄 다음에 다음 강조 표시된 코드를 추가합니다.
@{
var message = "This is the first time you've requested the page.";
if(IsPost) {
message = "Now you've submitted the page.";
}
}
if { } 블록
방금 추가한 것은 if 조건이었습니다. 코드에서 if 조건에 다음과 같은 구조가 있습니다.
if(some condition){
One or more statements here that run if the condition is true;
}
테스트할 조건은 괄호 안에 있습니다. true 또는 false를 반환하는 값 또는 식이어야 합니다. 조건이 true이면 ASP.NET 중괄호 안에 있는 문 또는 문을 실행합니다. (if-then 논리의 다음 부분입니다.) 조건이 false이면 코드 블록을 건너뜁습니다.
if 문에서 테스트할 수 있는 조건의 몇 가지 예는 다음과 같습니다.
if(currentValue > 12) { ... }
if(dueDate <= DateTime.Today) { ... }
if(IsDone == true) { ... }
if(IsPost) { ... }
if(!IsPost) { ... }
if(a != 0) { ... }
if(fileProcessingIsDone != true && displayMessage == false) { ... }
논리 연산자 또는 비교 연산자(같음(==), 보다 큼(), 보다 작거나 같음(><=), (=)보다 작거나 같음, (<=)보다 작거나 같은 논리 연산자 또는 비교 연산자를 사용하여 값 또는 식에 대해 변수를 테스트할> 수 있습니다. != 연산자는 같지 않음을 의미합니다. 예를 들어 if(a != 0)는 a가 0과 같지 않은 경우를 의미합니다.
참고 항목
같음(==)의 비교 연산자가 =와 동일하지 않은지 확인합니다. = 연산자는 값을 할당하는 데만 사용됩니다(var a=2). 이러한 연산자를 혼합하면 오류가 발생하거나 이상한 결과가 나타납니다.
true인지 여부를 테스트하기 위해 전체 구문은 if(IsDone == true)입니다. 그러나 if(IsDone)의 바로 가기를 사용할 수도 있습니다. 비교 연산자가 없는 경우 ASP.NET true를 테스트한다고 가정합니다.
! 연산자는 연산자 자체는 논리적 NOT을 의미합니다. 예를 들어 if(! IsPost)는 IsPost가 true가 아닌 경우를 의미합니다.
논리 AND(&&> 연산자) 또는 논리 OR(|| 연산자)을 사용하여 조건을 결합할 수 있습니다. 예를 들어 앞의 예제에서 if 조건의 마지막은 FileProcessingIsDone이 true로 설정되지 않은 경우를 의미 하고 displayMessage는 false로 설정됩니다.
다른 블록
if 블록에 대한 마지막 한 가지: if 블록 뒤에 다른 블록이 뒤따를 수 있습니다. 다른 블록은 조건이 false일 때 다른 코드를 실행해야 하는 경우에 유용합니다. 다음은 간단한 예제입니다.
var message = "";
if(errorOccurred == true)
{
message = "Sorry, an error occurred.";
}
else
{
message = "The process finished without errors!";
}
이 시리즈의 이후 자습서에서는 다른 블록을 사용하는 것이 유용한 몇 가지 예제를 볼 수 있습니다.
요청이 제출(게시물)인지 테스트
더 많은 것이 있지만 if(IsPost){ ... }라는 조건이 있는 예제로 돌아가 보겠습니다. IsPost는 실제로 현재 페이지의 속성입니다. 페이지가 처음 요청되면 IsPost는 false를 반환합니다. 그러나 단추를 클릭하거나 페이지를 제출하는 경우,즉, 게시하면 IsPost가 true를 반환합니다. 따라서 IsPost를 사용하면 양식 제출을 처리하고 있는지 여부를 확인할 수 있습니다. (HTTP 동사 측면에서 요청이 GET 작업인 경우 IsPost는 false를 반환합니다. 요청이 POST 작업인 경우 IsPost는 true를 반환합니다.) 이후 자습서에서는 이 테스트가 특히 유용해지는 입력 양식을 사용합니다.
페이지를 실행합니다. 페이지를 처음 요청했으므로 "페이지를 요청한 것은 이번이 처음"이 표시됩니다. 이 문자열은 메시지 변수를 초기화한 값입니다. if(IsPost) 테스트가 있지만 현재 false를 반환하므로 if 블록 내의 코드가 실행되지 않습니다.
제출 버튼을 클릭합니다. 페이지가 다시 요청됩니다. 이전과 마찬가지로 메시지 변수는 "이번이 처음입니다..."로 설정됩니다. 그러나 이번에는 if(IsPost)가 true를 반환하므로 if 블록 내의 코드가 실행되도록 테스트합니다. 코드는 메시지 변수의 값을 태그에 렌더링되는 다른 값으로 변경합니다.
이제 태그에 if 조건을 추가합니다. 제출 단추<가 포함된 p> 요소 아래에 다음 태그를 추가합니다.
@if(IsPost){
<p>You submitted the page at @DateTime.Now</p>
}
태그 내에 코드를 추가하므로 @으로 시작해야 합니다. 그런 다음 코드 블록에서 이전에 추가한 테스트와 유사한 if 테스트가 있습니다. 중괄호 안에는 일반 HTML이 추가됩니다. 적어도 일반 HTML이 추가 @DateTime.Now될 때까지는 일반입니다. 이것은 Razor 코드의 또 다른 작은 비트입니다, 그래서 다시 당신은 그 앞에 @을 추가해야합니다.
여기서 요점은 코드 블록의 맨 위와 태그 둘 다에서 조건을 추가할 수 있다는 것입니다. 페이지 본문에 if 조건을 사용하는 경우 블록 내의 줄은 태그 또는 코드일 수 있습니다. 이 경우 태그와 코드를 혼합할 때마다 해당 코드가 있는 위치를 ASP.NET 위해 @를 사용해야 합니다.
페이지를 실행하고 제출을 클릭합니다. 이번에는 제출할 때 다른 메시지("지금 제출했습니다...")가 표시될 뿐만 아니라 날짜와 시간을 나열하는 새 메시지가 표시됩니다.
쿼리 문자열의 값 테스트
한 번 더 테스트합니다. 이번에는 쿼리 문자열에 전달될 수 있는 show라는 값을 테스트하는 if 블록을 추가합니다. (다음과 같이: http://localhost:43097/TestRazorPart2.cshtml?show=true) 표시한 메시지("이번이 처음..."등)가 표시 값이 true인 경우에만 표시되도록 페이지를 변경합니다.
페이지 맨 위에 있는 코드 블록의 아래쪽(내부)에서 다음을 추가합니다.
var showMessage = false;
if(Request.QueryString["show"].AsBool() == true) {
showMessage = true;
}
이제 전체 코드 블록이 다음 예제와 같이 표시됩니다. (페이지에 코드를 복사할 때 들여쓰기 모양이 다를 수 있습니다. 그러나 코드가 실행되는 방식에는 영향을 주지 않습니다.)
@{
var message = "This is the first time you've requested the page.";
if(IsPost) {
message = "Now you've submitted the page.";
}
var showMessage = false;
if(Request.QueryString["show"].AsBool() == true) {
showMessage = true;
}
}
블록의 새 코드는 showMessage라는 변수를 false로 초기화합니다. 그런 다음 if 테스트를 수행하여 쿼리 문자열에서 값을 찾습니다. 페이지를 처음 요청하면 다음과 같은 URL이 있습니다.
http://localhost:43097/TestRazorPart2.cshtml
이 코드는 URL 버전과 같이 URL에 쿼리 문자열에 show라는 변수가 포함되어 있는지 여부를 결정합니다.
http://localhost:43097/TestRazorPart2.cshtml?show=true
테스트 자체는 Request 개체의 QueryString 속성을 확인합니다. 쿼리 문자열에 show라는 항목이 포함되어 있고 해당 항목이 true로 설정된 경우 블록이 실행되고 showMessage 변수가 true로 설정됩니다.
당신이 볼 수 있듯이 여기에 트릭이있다. 이름처럼 쿼리 문자열은 문자열입니다. 그러나 테스트하는 값이 부울(true/false) 값인 경우에만 true 및 false를 테스트할 수 있습니다. 쿼리 문자열에서 show 변수의 값을 테스트하려면 부울 값으로 변환해야 합니다. AsBool 메서드는 문자열을 입력으로 사용하고 부울 값으로 변환합니다. 문자열이 "true"인 경우 AsBool 메서드는 해당 값을 true로 변환합니다. 문자열 값이 다른 값이면 AsBool은 false를 반환합니다.
팁
데이터 형식 및 As() 메서드
지금까지 변수를 만들 때 var 키워드를 사용한다고만 설명했습니다. 하지만 이것이 전체 이야기가 아닙니다. 값을 조작하여 숫자를 추가하거나 문자열을 연결하거나 날짜를 비교하거나 true/false를 테스트하려면 C#이 값의 적절한 내부 표현으로 작동해야 합니다. C#은 일반적으로 값으로 수행하는 작업을 기반으로 해당 표현이 무엇인지(즉, 데이터의 형식)를 파악할 수 있습니다. 하지만 지금은 그렇게 할 수 없습니다. 그렇지 않은 경우 C#이 데이터를 나타내는 방법을 명시적으로 표시하여 도움을 주어야 합니다. AsBool 메서드는 "true" 또는 "false"의 문자열 값을 부울 값으로 처리해야 한다는 것을 C#에 알려줍니다. AsInt(정수로 처리), AsDateTime(날짜/시간으로 처리), AsFloat(부동 소수점 숫자로 처리) 등과 같이 문자열을 다른 형식으로 나타내는 메서드도 비슷합니다. 이러한 As( ) 메서드를 사용하는 경우 C#에서 요청된 대로 문자열 값을 나타낼 수 없는 경우 오류가 표시됩니다.
페이지 태그에서 이 요소를 제거하거나 주석으로 처리합니다(여기에 주석 처리된 것으로 표시됨).
<!-- <p>@message</p> -->
해당 텍스트를 제거하거나 주석 처리한 위치에서 다음을 추가합니다.
@if(showMessage) {
<p>@message</p>
}
if 테스트에서 showMessage 변수가 true이면 메시지 변수 값을 사용하여 <p> 요소를 렌더링합니다.
조건부 논리 요약
방금 수행한 작업을 완전히 확신할 수 없는 경우 요약이 있습니다.
- 메시지 변수가 기본 문자열로 초기화됩니다("처음 ...").
- 페이지 요청이 제출(게시물)의 결과인 경우 메시지 값이 "지금 제출했습니다..."로 변경됩니다.
- showMessage 변수가 false로 초기화됩니다.
- 쿼리 문자열에 ?show=true가 포함되어 있으면 showMessage 변수가 true로 설정됩니다.
- 태그에서 showMessage가 true <이면 메시지 값을 표시하는 p> 요소가 렌더링됩니다. showMessage가 false이면 태그의 해당 지점에서 아무 것도 렌더링되지 않습니다.
- 태그에서 요청이 게시물 <인 경우 날짜와 시간을 표시하는 p> 요소가 렌더링됩니다.
페이지를 실행합니다. showMessage가 false이므로 메시지가 없으므로 태그에서 if(showMessage) 테스트에서 false를 반환합니다.
제출을 클릭합니다. 날짜와 시간이 표시되지만 메시지는 표시되지 않습니다.
브라우저에서 URL 상자로 이동하여 URL 끝에 다음을 추가합니다. ?show=true를 누른 다음 Enter 키를 누릅니다.
페이지가 다시 표시됩니다. (URL을 변경했기 때문에 제출이 아닌 새 요청입니다.) 제출을 다시 클릭합니다. 날짜 및 시간과 마찬가지로 메시지가 다시 표시됩니다.
URL에서 ?show=true를 ?show=false로 변경하고 Enter 키를 누릅니다. 페이지를 다시 제출합니다. 페이지가 다시 시작한 방식(메시지 없음)으로 돌아갑니다.
앞에서 설명한 것처럼 이 예제의 논리는 약간 모순됩니다. 그러나 많은 페이지에서 나올 예정이라면 여기에서 본 양식 중 하나 이상을 사용합니다.
도우미 설치(Gravatar 이미지 표시)
웹 페이지에서 자주 수행하려는 일부 작업에는 많은 코드가 필요하거나 추가 지식이 필요합니다. 예: 데이터에 대한 차트 표시 페이지에 Facebook "좋아요" 단추를 넣습니다. 웹 사이트에서 전자 메일 보내기; 이미지 자르기 또는 크기 조정; 사이트에 대한 PayPal 사용 이러한 종류의 작업을 쉽게 수행할 수 있도록 ASP.NET 웹 페이지 도우미를 사용할 수 있습니다. 도우미는 사이트에 설치하고 몇 줄의 Razor 코드만 사용하여 일반적인 작업을 수행할 수 있는 구성 요소입니다.
ASP.NET 웹 페이지 몇 가지 도우미가 내장되어 있습니다. 그러나 NuGet 패키지 관리자를 사용하여 제공되는 패키지(추가 기능)에서는 많은 도우미를 사용할 수 있습니다. NuGet을 사용하면 설치할 패키지를 선택한 다음 설치의 모든 세부 정보를 처리할 수 있습니다.
자습서의 이 부분에서는 Gravatar("전역적으로 인식되는 아바타") 이미지를 표시할 수 있는 도우미를 설치합니다. 당신은 두 가지를 배울 수 있습니다. 하나는 도우미를 찾아 설치하는 방법입니다. 또한 도우미가 직접 작성해야 하는 많은 코드를 사용하여 수행해야 하는 작업을 쉽게 수행할 수 있는 방법도 알아봅니다.
Gravatar 웹 사이트에서 http://www.gravatar.com/자신의 Gravatar를 등록할 수 있지만 자습서의 이 부분을 수행하기 위해 Gravatar 계정을 만드는 것은 필수적이지 않습니다.
WebMatrix에서 NuGet 단추를 클릭합니다.
그러면 NuGet 패키지 관리자가 시작되고 사용 가능한 패키지가 표시됩니다. (일부 패키지는 도우미가 아니며, 일부는 WebMatrix 자체에 기능을 추가하고, 일부는 추가 템플릿 등입니다.) 버전 비호환성에 대한 오류 메시지가 표시 될 수 있습니다. 확인을 클릭하고 이 자습서를 계속 진행하여 이 오류 메시지를 무시할 수 있습니다.
검색 상자에 "asp.net 도우미"를 입력합니다. NuGet은 검색어와 일치하는 패키지를 표시합니다.
ASP.NET 웹 도우미 라이브러리에는 Gravatar 이미지 사용을 비롯한 많은 일반적인 작업을 간소화하는 코드가 포함되어 있습니다. ASP.NET 웹 도우미 라이브러리 패키지를 선택한 다음 설치를 클릭하여 설치 관리자를 시작합니다. 패키지를 설치할지 묻는 메시지가 표시되면 예를 선택하고 사용 약관에 동의하여 설치를 완료합니다.
모두 끝났습니다. NuGet은 필요할 수 있는 추가 구성 요소(종속성)를 포함하여 모든 항목을 다운로드하고 설치합니다.
어떤 이유로 도우미를 제거해야 하는 경우 프로세스는 매우 유사합니다. NuGet 단추를 클릭하고 설치된 탭을 클릭한 다음 제거할 패키지를 선택합니다.
페이지에서 도우미 사용
이제 방금 설치한 도우미를 사용합니다. 페이지에 도우미를 추가하는 프로세스는 대부분의 도우미와 비슷합니다.
WebMatrix에서 페이지를 만들고 이름을 GravatarTest.cshml로 지정합니다. (도우미를 테스트하기 위해 특수 페이지를 만들지만 사이트의 모든 페이지에서 도우미를 사용할 수 있습니다.)
본문> 요소 내에 <div> 요소를 추가<합니다. <div> 요소 내에 다음을 입력합니다.
@Gravatar.
@ 문자는 Razor 코드를 표시하는 데 사용한 것과 동일한 문자입니다. Gravatar 는 작업 중인 도우미 개체입니다.
마침표(.)를 입력하는 즉시 WebMatrix는 Gravatar 도우미가 사용할 수 있도록 하는 메서드(함수) 목록을 표시합니다.
이 기능을 IntelliSense라고 합니다. 상황에 맞는 선택 항목을 제공하여 코딩하는 데 도움이 됩니다. IntelliSense는 HTML, CSS, ASP.NET 코드, JavaScript 및 WebMatrix에서 지원되는 기타 언어에서 작동합니다. WebMatrix에서 웹 페이지를 더 쉽게 개발할 수 있는 또 다른 기능입니다.
키보드에서 G 키를 누르면 IntelliSense에서 GetHtml 메서드를 찾습니다. Tab 키를 누릅니다. IntelliSense는 선택한 메서드(GetHtml)를 삽입합니다. 열린 괄호를 입력하고 닫는 괄호가 자동으로 추가됩니다. 두 괄호 사이에 전자 메일 주소를 따옴표로 입력합니다. Gravatar 계정이 있는 경우 프로필 사진이 반환됩니다. Gravatar 계정이 없으면 기본 이미지가 반환됩니다. 완료되면 줄은 다음과 같이 표시됩니다.
@Gravatar.GetHtml("john@contoso.com")
이제 브라우저에서 페이지를 봅니다. Gravatar 계정이 있는지 여부에 따라 그림 또는 기본 이미지가 표시됩니다.
도우미가 수행하는 작업을 파악하려면 브라우저에서 페이지의 원본을 확인합니다. 페이지에 있던 HTML과 함께 식별자를 포함하는 이미지 요소가 표시됩니다. 도우미가 있는 위치 @Gravatar.GetHtml의 페이지로 렌더링되는 코드입니다. 도우미는 제공한 정보를 가져와 제공된 계정에 대한 올바른 이미지를 다시 가져오기 위해 Gravatar와 직접 대화하는 코드를 생성했습니다.
GetHtml 메서드를 사용하면 다른 매개 변수를 제공하여 이미지를 사용자 지정할 수도 있습니다. 다음 코드는 너비와 높이가 40픽셀인 이미지를 요청하는 방법을 보여 줍니다. 지정된 계정이 없는 경우 wavatar라는 지정된 기본 이미지를 사용합니다.
@Gravatar.GetHtml("john@contoso.com", 40, "wavatar")
이 코드는 다음과 같은 결과를 생성합니다(기본 이미지는 임의로 다름).
다음으로 예정
이 자습서를 짧게 유지하기 위해 몇 가지 기본 사항에만 집중해야 했습니다. 당연히 Razor와 C#에는 더 많은 것이 있습니다. 이 자습서를 진행하면서 자세히 알아봅니다. 지금 Razor 및 C#의 프로그래밍 측면에 대해 자세히 알아보려면 Razor 구문을 사용하여 ASP.NET 웹 프로그래밍 소개를 참조하세요.
다음 자습서에서는 데이터베이스 작업을 소개합니다. 이 자습서에서는 즐겨 찾는 영화를 나열할 수 있는 샘플 애플리케이션을 만들기 시작합니다.
TestRazor 페이지의 전체 목록
@{
// Working with numbers
var a = 4;
var b = 5;
var theSum = a + b;
// Working with characters (strings)
var technology = "ASP.NET";
var product ="Web Pages";
// Working with objects
var rightNow = DateTime.Now;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Testing Razor Syntax</title>
<meta charset="utf-8" />
<style>
body {font-family:Verdana; margin-left:50px; margin-top:50px;}
div {border: 1px solid black; width:50%; margin:1.2em;padding:1em;}
span.bright {color:red;}
</style>
</head>
<body>
<h1>Testing Razor Syntax</h1>
<form method="post">
<div>
<p>The value of <em>a</em> is @a. The value of <em>b</em> is @b.
<p>The sum of <em>a</em> and <em>b</em> is <strong>@theSum</strong>.</p>
<p>The product of <em>a</em> and <em>b</em> is <strong>@(a*b)</strong>.</p>
</div>
<div>
<p>The technology is @technology, and the product is @product.</p>
<p>Together they are <span class="bright">@(technology + " " + product)</span></p>
</div>
<div>
<p>The current date and time is: @rightNow</p>
<p>The URL of the current page is<br/><br/><code>@Request.Url</code></p>
</div>
</form>
</body>
</html>
TestRazorPart2 페이지의 전체 목록
@{
var message = "This is the first time you've requested the page.";
if (IsPost) {
message = "Now you've submitted the page.";
}
var showMessage = false;
if (Request.QueryString["show"].AsBool() == true) {
showMessage = true;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Testing Razor Syntax - Part 2</title>
<meta charset="utf-8" />
<style>
body {font-family:Verdana; margin-left:50px; margin-top:50px;}
div {border: 1px solid black; width:50%; margin:1.2em;padding:1em;}
</style>
</head>
<body>
<h1>Testing Razor Syntax - Part 2</h1>
<form method="post">
<div>
<!--<p>@message</p>-->
@if(showMessage){
<p>@message</p>
}
<p><input type="submit" value="Submit" /></p>
@if (IsPost) {
<p>You submitted the page at @DateTime.Now</p>
}
</div>
</form>
</body>
</html>
GravatarTest 페이지의 전체 목록
@{
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div>
@Gravatar.GetHtml("john@contoso.com")
@Gravatar.GetHtml("john@contoso.com", 40, "wavatar")
</div>
</body>
</html>