ASP.NET 기초 Razor Pages ViewData 사용

 

ViewData는 Page Model에서 View(View Page)로 데이터를 전달하기 위해 사용한다. ViewData는 ViewDataDictionary 타입이며 key 값과 value를 가진다. 이를 통해서 Page Model에서 작성된 데이터를 Page에서 동적으로 사용할 수 있다.

 

public class IndexModel : PageModel {
	public void OnGet() {
    	//ViewData
        ViewData["MyName"] = "Devrun";
    }
}

 

위에 작성된 코드를 보자, 클래스 명 옆에 PageModel로 이 클래스가 PageModel이라고 설정되었다. OnGet() 함수에서 보면 ViewData가 설정된 것을 볼 수 있다. 여기서 ViewData[" 이 부분은 Key "] = " 값(Value) "; 로 설정된다. 조금 더 쉽게 설명하면 단어 사전을 보게 되면 단어가 있고 뜻이 있다. 여기서 단어는 Key이고 뜻은 Value라고 생각하면 된다.

 

조금 더 쉽게 설명하면 기존에 우리는 변수를 선언했다. string a = ""; 라고, string이 데이터 타입이었던 것에 비해서 데이터 타입에 ViewData를 사용하겠다고 선언하고 변수명 a의 Key값을 대입하고 변수에서 값에 Value를 대입하면 된다고 생각하자 그러면 조금 이해하기 쉬울 것이다.

 

이제 무엇인지 배웠으니 어떻게 사용하는지 알아야겠지?

@page
@model RazorTest.Pages.IndexModel
<div>
  <p>My dog @ViewData["MyDogsName"] is @ViewData["MyDogsAge"] years old</p>
</div>

 

위 코드에서 보면 <p> 태그 안에 ViewData가 사용된 것이 보인다.

우리는 View Page에서 C# 코드를 사용하기 위해서는 @을 사용해서 {} 코드 블록을 사용하거나 @사용해서 불어오는 것을 전 글에서 배웠다. 여기서는 @사용해서 Page Model에서 ViewData를 불러오는 것을 볼 수 있을 것이다. 단, 여기서는 한 가지 선제 조건이 필요하다.

 

Page 최상단에 Page Model 이 선언되어야 한다.

 

RazorTest는 Page Model이 있는 파일에 namespace 명이고, 뒤에는 namepsace를 사용한다. 그러나 위 코드에서는 pages로 임의로 지정해 두었다. IndexModel은 우리가 선언한 Page Model의 클래스 명이다. 이를 반드시 선언해 주고 사용해야 @로 해당 모델이 ViewData를 불러올 수 있다.

 

아래는 예제 파일이다.

@page
@model MyApp.Namespace.ProfileModel
@{
}

<div class="container">
	<div class="row">
		<div class="col-12">
			<div class="card">
				<div class="card-body">
					<div class="card-title mb-4">
						<div class="d-flex justify-content-start">
							<div class="image-container">
								<img src="http://placehold.it/150x150" id="imgProfile" style="width: 150px; height: 150px" class="img-thumbnail" />
							</div>
							<div class="userData ml-3">
								<h2 class="d-block" style="font-size: 1.5rem; font-weight: bold">
                <!-- Username Here -->
                @ViewData["username"]
                </h2>
							</div>
						</div>
					</div>

					<div class="row">
					  <div class="col-12">
						  <ul class="nav nav-tabs mb-4" id="myTab" role="tablist">
							  <li class="nav-item">
									<a class="nav-link active" href="#">Basic Info</a>
								</li>
							</ul>
              
						  <div class="tab-content ml-1" id="myTabContent">
							  <div class="tab-pane fade show active" id="basicInfo" aria-labelledby="basicInfo-tab">
									<div class="row">
										<div class="col-sm-3 col-md-2 col-5">
											<label style="font-weight:bold;">Full Name</label>
										</div>
                    <div class="col-md-8 col-6">
                        <!-- Your Name Here -->
                        @ViewData["myName"]
                    </div>
									</div>
									<hr />

                  <div class="row">
                    <div class="col-sm-3 col-md-2 col-5">
                      <label style="font-weight:bold;">Age</label>
                    </div>
                    <div class="col-md-8 col-6">
                          <!-- Your Age Here -->
                      @ViewData["myAge"]
                    </div>
                  </div>
									<hr />

                  <div class="row">
                      <div class="col-sm-3 col-md-2 col-5">
                          <label style="font-weight:bold;">Occupation</label>
                      </div>
                      <div class="col-md-8 col-6">
                        <!-- Your Occupation Here -->
                        @ViewData["myOccupation"]
                      </div>
                  </div>
                  <hr />
                  
                  <div class="row">
                    <div class="col-sm-3 col-md-2 col-5">
                      <label style="font-weight:bold;">Current Date</label>
                    </div>
                      <div class="col-md-8 col-6">
                        <!-- Current Time Here -->
                        @ViewData["currentDate"]
                      </div>
                  </div>
                <hr/>
							</div>
						</div>
					</div>
				</div>
			</div>
    </div>
  </div>
</div>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace MyApp.Namespace
{
  public class ProfileModel : PageModel
  {
    public void OnGet()
    {
      ViewData["myName"] = "John Doe";
      ViewData["username"] = "Devrun";
      ViewData["myOccupation"] = "Programmer";
      ViewData["myAge"] = 36;
      ViewData["currentDate"] = "01/01/01";
    }
  }
}

 

출력 화면