프로젝트 초기 설정 및 뷰 모델 정의
jQuery 의 핵심 기능을 실습하기 위해 산봉우리 데이터와 높이를 관리하는 MVC 애플리케이션을 구축했습니다. jQuery 는 클라이언트 측 기술이므로, 본 예제에서는 Razor 뷰 엔진이 생성하는 HTML 마크업 구조에 주목합니다. 아래 코드는 해당 애플리케이션의 주요 뷰 파일을 나타냅니다.
@using MvcApp.Models;
@model IEnumerable<MountainPeak>
@{
ViewBag.Title = "Mountain Peak List";
}
<h3>Peak List</h3>
<table>
<thead>
<tr><th>Peak Name</th><th>Elevation</th><th>Action</th></tr>
</thead>
@foreach (MountainPeak peak in Model) {
<tr>
<td>@peak.PeakName</td>
<td>@peak.Elevation</td>
<td>
@using (Html.BeginForm("RemovePeak", "Home")) {
@Html.Hidden("peakName", @peak.PeakName)
<input type="submit" value="Remove" />
}
</td>
</tr>
}
</table>
@Html.ActionLink("Create", "CreatePeak")
@using (Html.BeginForm("InitializeData", "Home")) {
<input type="submit" value="Reset Data" />
}
뷰 모델은 산봉우리 객체의 시퀀스로 구성되며, 각 객체는 이름 (PeakName) 과 고도 (Elevation) 속성을 갖습니다. 컨트롤러 로직에서 샘플 데이터를 생성하여 뷰로 전달하면, 서버는 이를 처리하여 클라이언트에 다음과 같은 HTML 을 응답합니다.
<html>
<head>
<title>Mountain Peak List</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
</head>
<body>
<h3>Peak List</h3>
<table>
<thead>
<tr><th>Peak Name</th><th>Elevation</th><th>Action</th></tr>
</thead>
<tr>
<td>Everest</td>
<td>8848</td>
<td>
<form action="/Home/RemovePeak" method="post">
<input id="peakName" name="peakName" type="hidden" value="Everest" />
<input type="submit" value="Remove" />
</form>
</td>
</tr>
<tr>
<td>Aconcagua</td>
<td>6962</td>
<td>
<form action="/Home/RemovePeak" method="post">
<input id="peakName" name="peakName" type="hidden" value="Aconcagua" />
<input type="submit" value="Remove" />
</form>
</td>
</tr>
<!-- 추가 봉우리 데이터 행 생략 -->
</table>
<a href="/Home/CreatePeak">Create</a>
<form action="/Home/InitializeData" method="post">
<input type="submit" value="Reset Data" />
</form>
</body>
</html>
브라우저는 이 HTML 코드를 렌더링하여 테이블 형태로 데이터를 표시합니다. 명확한 확인을 위해 Visual Studio 기본 브라우저 대신 Internet Explorer 9 를 사용하여 결과를 검토하였습니다. 현재 상태에서는 스타일이 최소화되어 있어 가독성이 낮지만, jQuery 기능을 도입하는 과정에서 UI 개선 작업도 함께 진행할 예정입니다.