이 섹션에서는 ASP.NET WebPages HTML 양식을 설명합니다.
양식은 입력 컨트롤(텍스트 상자, 확인란, 라디오 버튼, 드롭다운 목록)이 배치되는 HTML 문서의 일부입니다.
면도기 인스턴스
<html> <body> @{if (IsPost) { string companyname = Request["companyname"] string contactname = Request["contactname"]; <p>입력한 내용: <br /> 회사 이름: @companyname <br /> 담당자 이름: @contactname </p>}그밖에{ <form method="post" action=""> 회사명:<br /> <input type="text" name="CompanyName" value="" /><br /> 담당자 이름:<br /> <input type="text" name="ContactName" value="" /><br /><br /> <input type="submit" value="Submit" /> </form> } } </body> </html>
이미지 폴더에 3개의 이미지가 있고 사용자의 선택에 따라 이미지를 동적으로 표시하려고 한다고 가정합니다.
이는 간단한 Razor 코드로 달성할 수 있습니다.
웹 사이트의 이미지 폴더에 "Photo1.jpg"라는 이미지가 있는 경우 HTML <img> 요소를 사용하여 아래와 같이 이미지를 표시할 수 있습니다.
<img src="images/Photo1.jpg" />
다음 예에서는 다음 목록에서 사용자가 선택한 이미지를 표시하는 방법을 보여줍니다.
@{var imagePath=""; if (요청["Choice"] != null){imagePath="images/" + 요청["Choice"];} } <!DOCTYPE html> <html> <body> <h1>이미지 표시</h1> <form method="post" action=""> 보고 싶은 항목: <select name="Choice"> <option value=" Photo1.jpg">사진 1</옵션> <옵션 값="Photo2.jpg">사진 2</옵션> <옵션 값="Photo3.jpg">사진 3</옵션> </select> <input type="submit" value="제출" /> @if (imagePath != ""){ <p> <img src="@imagePath " /> </p>} </form> </body> </html>서버는 imagePath 라는 변수를 생성합니다.
HTML 페이지에는 Choice 라는 드롭다운 목록 (<select> 요소)이 있습니다. 이를 통해 사용자는 원하는 대로 이름(예: Photo 1 )을 선택할 수 있으며, 페이지가 웹 서버에 제출되면 파일 이름(예: Photo1.jpg )이 전달됩니다.
Razor 코드는 Request["Choice"] 를 통해 Choice 값을 읽습니다. 코드를 통해 생성된 이미지 경로(images/Photo1.jpg)가 유효한 경우 이미지 경로를 imagePath 변수에 할당합니다.
HTML 페이지에서 <img> 요소는 이미지를 표시하는 데 사용됩니다. 페이지가 표시되면 src 속성을 사용하여 imagePath 변수의 값을 설정합니다.
<img> 요소는 if 블록 안에 있습니다. 이는 페이지가 처음 로드될 때와 같이 이름 없이 이미지가 표시되는 것을 방지하기 위한 것입니다.