[ASP.NET MVC] DropDownList DataBind에 대해 알아보자.

 

DropDownList 란?

우리가 흔히 알고 있는 HTML 태그 중, <select>태그를 ASP.NET 언어에서 개발자들의 퍼포먼스를 향상시키 위해 사용되고 있는 사용자 도구를 뜻합니다.

아래는 우리가 알고 있는 <select> 태그의 예시.

<select id="category">
    <option value="0">0번</option>
    <option value="1">1번</option>
    <option value="2">2번</option>
</select>

 

ASP.NET과 ASP.NET MVC에서 DB에서 가져온 데이터를 DropDownList에 어떻게 DataBind하는지 비교해봅니다.

 

ASP.NET WebForm

DB에서 데이터를 추출 후, 간단한 방식으로 DataBind를 할 수 있다.

 

// .aspx File
<asp:DropDownList ID="ddlCategory" runat="server" DataTextField="Title" DataValueField="Index">
</asp:DropDownList>
 
 
// .aspx.cs File
ddlCategory.DataSource = DB 데이터;
ddlCategory.DataBind();

 

cs 파일에서 DB 데이터를 조회한 후, DataSource에 넣으면 된다.

그리고 aspx 파일에서 DataTextField, DataValueField 값을 DB 데이터 속성값으로 설정해주면 끝이다. 랜더링 되면 우리가 알고 있는 HTML 태그인 <select> 로 변경된 것을 알 수 있다.

 

ASP.NET MVC

WebForm에서 익숙하게 사용하고 있던, 도구 상자가 없어졌다. 익숙하게 사용하던 것이 사라지니 멘붕이...

 

// Model
public List<SelectListItem> Category { get; set; }
public string CategorySelectValue { get; set; }
 
// Control
var model = new RegisterApplicationModel();
model.Category = DB 데이터;
model.CategorySelectValue = 선택될 아이템 값;
 
// View
@Html.DropDownListFor(m => m.CategorySelectValue, new SelectList(Model.Category, "Value", "Text"))

1. Model

• 속성들을 만들어야 한다.
• DB 데이터를 저장해둘 Category
• Category 중, 선택으로 지정할 CategorySelectValue 

2. Control

• 위에서 생성한 Model 클래스를 객체로 인스턴스화해 준다.
• Model 객체의 속성에 해당 값 셋팅

3. View

• HTML TagHelper인, Html.DropDownListFor를 이용
• 1번째 인자, DropDownList에 선택할 값을 지정(HTML 랜더링된다면 id, name 값이 해당 CategorySelectValue 로 지정)
• 2번째 인자, DropDownList에 채울 아이템 설정(SelectList 객체를 이용, 아이템/Value/Text 순서대로 셋팅)