집 >백엔드 개발 >C#.Net 튜토리얼 >ASP.NET 연구 노트 공유(6) WebPages 양식
ASP.NET 연구 노트 공유(6) WebPages 양식
- 零下一度원래의
- 2017-05-25 09:16:191411검색
양식은 입력 컨트롤(텍스트 상자, 확인란, 라디오 버튼, 드롭다운 목록)이 배치되는 HTML 문서의 일부입니다.
HTML 입력 페이지 만들기
Razor 예제
<html>
<body>
@{
if (IsPost) {
string companyname = Request["companyname"];
string contactname = Request["contactname"];
<p>You entered: <br />
Company Name: @companyname <br />
Contact Name: @contactname </p>
}
else
{
<form method="post" action="">
Company Name:<br />
<input type="text" name="CompanyName" value="" /><br />
Contact Name:<br />
<input type="text" name="ContactName" value="" /><br /><br />
<input type="submit" value="Submit" class="submit" />
</form>
}
}
</body>
</html>Razor 예제 - 이미지 표시
가정 이미지 폴더에는 3개의 이미지가 있고 사용자의 선택에 따라 이미지를 동적으로 표시하려고 합니다.
간단한 Razor 코드로 이를 달성할 수 있습니다.
웹사이트의 이미지 폴더에 "Photo1.jpg"라는 이미지가 있는 경우 HTML a1f02c36ba31691bcfe87b2722de723b 요소를 사용하여 다음과 같이 이미지를 표시할 수 있습니다.
<img src="images/Photo1.jpg" alt="Sample" />
다음 예제는 다음 목록에서 사용자가 선택한 이미지를 표시하는 방법을 보여줍니다.
Razor 예제
@{var imagePath=""; if (Request["Choice"] != null){imagePath="images/" + Request["Choice"];} } <!DOCTYPE html> <html> <body> <h1>Display Images</h1> <form method="post" action=""> I want to see: <select name="Choice"> <option value="Photo1.jpg">Photo 1</option> <option value="Photo2.jpg">Photo 2</option> <option value="Photo3.jpg">Photo 3</option> </select> <input type="submit" value="Submit" /> @if (imagePath != ""){<p><img src="@imagePath" alt="Sample" /></p>} </form> </body> </html>예제 설명
서버는 The라는 파일을 생성합니다. imagePath의 변수 입니다.
HTML 페이지에는 Choice라는 드롭다운 목록(221f08282418e2996498697df914ce4e 요소)이 있습니다. 이를 통해 사용자는 자신이 선택한 이름(예: Photo 1)을 선택할 수 있으며, 페이지가 웹 서버에 제출되면 파일 이름(예: Photo1.jpg)이 전달됩니다.
Razor 코드는 Request["Choice"]를 통해 Choice 값을 읽습니다. 코드를 통해 생성된 이미지 경로(images/Photo1.jpg)가 유효하다면 imagePath 변수에 이미지 경로를 할당합니다.
HTML 페이지에서는 a1f02c36ba31691bcfe87b2722de723b 요소가 이미지를 표시하는 데 사용됩니다. src 속성은 페이지가 표시될 때 imagePath 변수의 값을 설정하는 데 사용됩니다.
a1f02c36ba31691bcfe87b2722de723b 요소는 if 블록 안에 있습니다. 이는 페이지가 처음 로드될 때와 같이 이미지가 이름 없이 표시되는 것을 방지하기 위한 것입니다.
[관련 추천]
ASP.NET 학습 노트 공유(1) --WebPages Razor
3. ASP.NET 연구 노트 공유(2)--WebPages 소개
4. ASP.NET 연구 공유 노트(3) 웹페이지 레이아웃
5. 6.ASP.NET 학습 노트 공유 (5) 글로벌 페이지 AppStart 및 PageStart
위 내용은 ASP.NET 연구 노트 공유(6) WebPages 양식의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!