ASP.NET MVC와 함께 DropDownList 도우미 사용

아티클
06/25/2023

이 자습서에서는 ASP.NET MVC 웹 애플리케이션에서 DropDownList 도우미 및 ListBox 도우미를 사용하는 기본 사항을 설명합니다. Microsoft Visual Studio의 무료 버전인 Microsoft Visual Web Developer 2010 Express Service Pack 1을 사용하여 자습서를 따를 수 있습니다. 시작하기 전에 아래에 나열된 필수 구성 요소를 설치했는지 확인합니다. 웹 플랫폼 설치 관리자 링크를 클릭하여 모두 설치할 수 있습니다. 또는 다음 링크를 사용하여 필수 구성 요소를 개별적으로 설치할 수 있습니다.

Visual Studio 웹 개발자 Express SP1 필수 구성 요소
MVC 3 도구 업데이트 ASP.NET
SQL Server Compact 4.0(런타임 + 도구 지원)

Visual Web Developer 2010 대신 Visual Studio 2010을 사용하는 경우 Visual Studio 2010 필수 구성 요소 링크를 클릭하여 필수 구성 요소를 설치합니다. 이 자습서에서는 ASP.NET MVC 소개 자습서 또는 ASP.NET MVC Music Store 자습서를 완료했거나 ASP.NETMVC 개발에 익숙하다고 가정합니다. 이 자습서는 ASP.NET MVC Music Store 자습서에서 수정된 프로젝트로 시작합니다.

완료된 자습서 C# 소스 코드가 포함된 Visual Web Developer 프로젝트를 이 항목과 함께 사용할 수 있습니다. 다운로드.

만들 내용

DropDownList 도우미를 사용하여 범주를 선택하는 작업 메서드 및 뷰를 만듭니다. 또한 jQuery 를 사용하여 새 범주(예: 장르 또는 아티스트)가 필요할 때 사용할 수 있는 삽입 범주 대화 상자를 추가합니다. 다음은 새 장르를 추가하고 새 아티스트를 추가하는 링크를 보여 주는 만들기 보기의 스크린샷입니다.

드롭다운 목록 도우미를 사용하는 이미지

학습할 기술

다음 내용을 학습하게 됩니다.

DropDownList 도우미를 사용하여 범주 데이터를 선택하는 방법입니다.
jQuery 대화 상자를 추가하여 새 범주를 추가하는 방법입니다.

시작하기

먼저 다음 링크인 다운로드를 사용하여 시작 프로젝트를 다운로드합니다. Windows ExplorerDDL_Starter.zip파일을 마우스 오른쪽 단추 로 클릭하고 속성을 선택합니다. DDL_Starter.zip 속성 대화 상자에서 차단 해제를 선택합니다.

속성 이미지 대화 상자 차단 해제 선택

DDL_Starter.zip 파일을 마우스 오른쪽 단추로 클릭하고 모두 추출 을 선택하여 파일 압축을 풉 Visual Web Developer 2010 Express(짧은 경우 "Visual Web Developer" 또는 "VWD") 또는 Visual Studio 2010을 사용하여 StartMusicStore.sln 파일을 엽니다.

Ctrl+F5를 눌러 애플리케이션을 실행하고 테스트 링크를 클릭합니다.

애플리케이션 테스트 링크 이미지

영화 범주 선택(단순) 링크를 선택합니다. 동영상 유형 선택 목록이 표시되고, 코미디가 선택한 값으로 표시됩니다.

동영상 유형 선택 목록의 이미지

브라우저를 마우스 오른쪽 단추로 클릭하고 원본 보기를 선택합니다. 페이지의 HTML이 표시됩니다. 아래 코드는 select 요소에 대한 HTML을 보여줍니다.

<form action="/Home/CategoryChosen" method="get">

<fieldset>Movie Type <select id="MovieType" name="MovieType">

<option value=""></option>

<option value="0">Action</option>

<option value="1">Drama</option>

<option selected="selected" value="2">Comedy</option>

<option value="3">Science Fiction</option>

</select>

<p><input type="submit" value="Submit" /> </p>

</fieldset>

</form>

선택 목록의 각 항목에 값(액션 0, 드라마 1, 코미디 2, 공상 과학 소설 3) 및 표시 이름(액션, 드라마, 코미디 및 공상 과학 소설)이 있는 것을 볼 수 있습니다. 위의 코드는 선택 목록에 대한 표준 HTML입니다.

선택 목록을 드라마로 변경하고 제출 단추를 누릅니다. 브라우저의 URL이 이 http://localhost:2468/Home/CategoryChosen?MovieType=1 고 페이지에 선택한 항목: 1이 표시됩니다.

브라우저의 U R L 이미지

Controllers\HomeController.cs 파일을 열고 메서드를 검사합니다SelectCategory.

public ActionResult SelectCategory() {

     List<SelectListItem> items = new List<SelectListItem>();

     items.Add(new SelectListItem { Text = "Action", Value = "0"});

     items.Add(new SelectListItem { Text = "Drama", Value = "1" });

     items.Add(new SelectListItem { Text = "Comedy", Value = "2", Selected = true });

     items.Add(new SelectListItem { Text = "Science Fiction", Value = "3" });

     ViewBag.MovieType = items;

     return View();

 }

HTML 선택 목록을 만드는 데 사용되는 DropDownList 도우미에는 명시적으로 또는 암시적으로 IEnumerable<SelectListItem >이 필요합니다. 즉, IEnumerable<SelectListItem을 DropDownList 도우미에 명시적으로 전달하거나 SelectListItem > 에 대해 모델 속성과 동일한 이름을 사용하여 IEnumerable<SelectListItem > 을 ViewBag에 추가할 수 있습니다. SelectListItem을 암시적으로 명시적으로 전달하려면 자습서의 다음 부분에서 설명합니다. 위의 코드는 IEnumerable<SelectListItem > 을 만들고 텍스트 및 값으로 채우는 가장 간단한 방법을 보여줍니다. ComedySelectListItem에는 Selected 속성이 true로 설정되어 있으므로 렌더링된 선택 목록이 목록에서 선택한 항목으로 코미디를 표시합니다.

위에서 만든 IEnumerable<SelectListItem > 이 MovieType이라는 이름으로 ViewBag 에 추가됩니다. 이는 아래 표시된 DropDownList 도우미에 암시적으로 IEnumerable<SelectListItem > 을 전달하는 방법입니다.

Views\Home\SelectCategory.cshtml 파일을 열고 태그를 검사합니다.

@{

    ViewBag.Title = "Category Select";

    Layout = "~/Views/Shared/_Simple_Layout.cshtml";

}

@using (Html.BeginForm("CategoryChosen", "Home", FormMethod.Get)) {

    <fieldset>

            Movie Type

            @Html.DropDownList("MovieType")

        <p>

            <input type="submit" value="Submit" />

        </p>

    </fieldset>

}

세 번째 줄에서는 레이아웃을 표준 레이아웃 파일의 간소화된 버전인 Views/Shared/_Simple_Layout.cshtml로 설정합니다. 이렇게 하면 표시 및 렌더링된 HTML을 간단하게 유지할 수 있습니다.

이 샘플에서는 애플리케이션의 상태를 변경하지 않으므로 HTTP POST가 아닌 HTTP GET을 사용하여 데이터를 제출합니다. HTTP GET 또는 POST 선택에 대한 W3C 섹션 빠른 검사 목록을 참조하세요. 애플리케이션을 변경하고 양식을 게시하지 않으므로 작업 메서드, 컨트롤러 및 양식 메서드(HTTP POST 또는 HTTP GET)를 지정할 수 있는 Html.BeginForm 오버로드를 사용합니다. 일반적으로 뷰에는 매개 변수를 사용하지 않는 Html.BeginForm 오버로드가 포함됩니다. 매개 변수 없음 버전은 기본적으로 양식 데이터를 동일한 작업 메서드 및 컨트롤러의 POST 버전에 게시합니다.

다음 줄

@Html.DropDownList("MovieType")

는 DropDownList 도우미에 문자열 인수를 전달합니다. 이 문자열인 "MovieType"은 다음 두 가지 작업을 수행합니다.

DropDownList 도우미가 ViewBag에서 IEnumerable SelectListItem>을 찾을 수< 있는 키를 제공합니다.
MovieType 양식 요소에 데이터 바인딩됩니다. submit 메서드가 HTTP GET인 경우 는 MovieType 쿼리 문자열이 됩니다. submit 메서드가 HTTP POSTMovieType인 경우 는 메시지 본문에 추가됩니다. 다음 이미지는 값이 1인 쿼리 문자열을 보여줍니다.

값이 1인 쿼리 문자열 이미지

다음 코드는 양식이 CategoryChosen 제출된 메서드를 보여줍니다.

public ViewResult CategoryChosen(string MovieType) {

    ViewBag.messageString = MovieType;

    return View("Information");

}

테스트 페이지로 다시 이동하여 HTML SelectList 링크를 선택합니다. HTML 페이지는 단순 ASP.NET MVC 테스트 페이지와 유사한 select 요소를 렌더링합니다. 브라우저 창을 마우스 오른쪽 단추로 클릭하고 원본 보기를 선택합니다. 선택 목록에 대한 HTML 태그는 기본적으로 동일합니다. HTML 페이지를 테스트합니다. 이 페이지는 이전에 테스트한 ASP.NET MVC 작업 메서드와 같이 작동합니다.

열거형을 사용하여 영화 선택 목록 개선

애플리케이션의 범주가 수정되고 변경되지 않는 경우 열거형을 활용하여 코드를 보다 강력하고 확장하기 쉽게 만들 수 있습니다. 새 범주를 추가하면 올바른 범주 값이 생성됩니다. 는 새 범주를 추가하지만 범주 값을 업데이트하는 것을 잊어버릴 때 복사 및 붙여넣기 오류를 방지합니다.

Controllers\HomeController.cs 파일을 열고 다음 코드를 검사합니다.

public enum eMovieCategories { Action, Drama, Comedy, Science_Fiction };

private void SetViewBagMovieType(eMovieCategories selectedMovie) {

    IEnumerable<eMovieCategories> values = 

                      Enum.GetValues(typeof(eMovieCategories))

                      .Cast<eMovieCategories>();

    IEnumerable<SelectListItem> items =

        from value in values

        select new SelectListItem

        {

            Text = value.ToString(),

            Value = value.ToString(),

            Selected = value == selectedMovie,

        };

    ViewBag.MovieType = items;

}

public ActionResult SelectCategoryEnum() {

    SetViewBagMovieType(eMovieCategories.Drama);

    return View("SelectCategory");

}

열거형eMovieCategories은 네 가지 영화 유형을 캡처합니다. 메서드는 SetViewBagMovieType열거형에서 IEnumerable<SelectListItem > 을 eMovieCategories 만들고 매개 변수에서 selectedMovie 속성을 설정합니다Selected. 작업 메서드는 SelectCategoryEnum 작업 메서드와 동일한 뷰를 SelectCategory 사용합니다.

테스트 페이지로 이동하고 링크를 클릭합니다 Select Movie Category (Enum) . 이번에는 값(숫자)이 표시되는 대신 열거형을 나타내는 문자열이 표시됩니다.

열거형 값 게시

HTML 양식은 일반적으로 서버에 데이터를 게시하는 데 사용됩니다. 다음 코드에서는 메서드의 HTTP GET 및 HTTP POST 버전을 보여 있습니다 SelectCategoryEnumPost .

public ActionResult SelectCategoryEnumPost() {

    SetViewBagMovieType(eMovieCategories.Comedy);

    return View();

}

[HttpPost]

public ActionResult SelectCategoryEnumPost(eMovieCategories MovieType) {

    ViewBag.messageString = MovieType.ToString() +

                            " val = " + (int)MovieType;

    return View("Information");

}

메서드에 열거형 eMovieCategories 을 POST 전달하여 열거형 값과 열거형 문자열을 모두 추출할 수 있습니다. 샘플을 실행하고 테스트 페이지로 이동합니다. Select Movie Category(Enum Post) 링크를 클릭합니다. 동영상 유형을 선택한 다음 제출 단추를 누릅니다. 표시에는 동영상 형식의 값과 이름이 모두 표시됩니다.

동영상 형식의 값 및 이름 이미지

여러 섹션 만들기 요소 선택

ListBox HTML 도우미는 사용자가 여러 항목을 선택할 수 있는 특성을 사용하여 HTML <select> 요소를 multiple 렌더링합니다. 테스트 링크로 이동한 다음, 다중 국가 선택 링크를 선택합니다 . 렌더링된 UI를 사용하면 여러 국가를 선택할 수 있습니다. 아래 이미지에서 캐나다와 중국이 선택됩니다.

여러 선택 항목 드롭다운 목록의 이미지

MultiSelectCountry 코드 검사

Controllers\HomeController.cs 파일에서 다음 코드를 검사합니다.

private MultiSelectList GetCountries(string[] selectedValues) {

    List<Country> Countries = new List<Country>()

        {

            new Country() { ID = 1, Name= "United States" },

            new Country() { ID = 2, Name= "Canada" },

            new Country() { ID = 3, Name= "UK" },

            new Country() { ID = 4, Name= "China" },

            new Country() { ID = 5, Name= "Japan" }

        };

    return new MultiSelectList(Countries, "ID", "Name", selectedValues);

}

public ActionResult MultiSelectCountry() {

    ViewBag.Countrieslist = GetCountries(null);

    return View();

}

메서드는 GetCountries 국가 목록을 만든 다음 생성자에 전달합니다 MultiSelectList . MultiSelectList 위의 메서드에 GetCountries 사용된 생성자 오버로드는 네 개의 매개 변수를 사용합니다.

public MultiSelectList(

    IEnumerable items,

    string dataValueField,

    string dataTextField,

    IEnumerable selectedValues

)

items: 목록의 항목을 포함하는 IEnumerable 입니다. 위의 예제에서 국가 목록입니다.
dataValueField: 값을 포함하는 IEnumerable 목록에 있는 속성의 이름입니다. 위의 예제에서 속성입니다 ID .
dataTextField: 표시할 정보가 포함된 IEnumerable 목록의 속성 이름입니다. 위의 예제에서 속성입니다 name .
selectedValues: 선택한 값 목록입니다.

위의 예제에서 메서드는 MultiSelectCountry 선택한 국가에 대한 값을 전달 null 하므로 UI가 표시될 때 어떤 국가도 선택되지 않습니다. 다음 코드에서는 뷰를 렌더링하는 데 사용되는 Razor 태그를 보여 줍니다 MultiSelectCountry .

@{

    ViewBag.Title = "MultiSelect Country";

    Layout = "~/Views/Shared/_Simple_Layout.cshtml";

}

@if (ViewBag.YouSelected != null) {

    <div> You Selected:  @ViewBag.YouSelected</div>

}

@using (Html.BeginForm()) {

    <fieldset>

        <legend>Multi-Select Demo</legend>

        <div class="editor-field">

            @Html.ListBox("Countries", ViewBag.Countrieslist as MultiSelectList

            )

        </div>

        <p>

            <input type="submit" value="Save" />

        </p>

    </fieldset>

}

위에서 사용된 HTML 도우미 ListBox 메서드는 모델 바인딩할 속성의 이름과 선택 옵션 및 값이 포함된 MultiSelectList 라는 두 개의 매개 변수를 사용합니다. ViewBag.YouSelected 위의 코드는 양식을 제출할 때 선택한 국가의 값을 표시하는 데 사용됩니다. 메서드의 HTTP POST 오버로드를 검사합니다 MultiSelectCountry .

[HttpPost]

public ActionResult MultiSelectCountry(FormCollection form) {

    ViewBag.YouSelected = form["Countries"];

    string selectedValues = form["Countries"];

    ViewBag.Countrieslist = GetCountries(selectedValues.Split(','));

    return View();

}

동적 속성에는 ViewBag.YouSelected 양식 컬렉션의 항목에 대해 Countries 가져온 선택한 국가가 포함됩니다. 이 버전에서는 GetCountries 메서드가 선택한 국가 목록을 전달하므로 MultiSelectCountry 보기가 표시되면 선택한 국가가 UI에서 선택됩니다.

선택한 수확 jQuery 플러그 인을 사용하여 Select 요소를 친숙한 상태로 만들기

선택한 수확 jQuery 플러그 인을 HTML <select> 요소에 추가하여 사용자에게 친숙한 UI를 만들 수 있습니다. 아래 이미지는 뷰가 있는 Harvest Chosen jQuery 플러그 인을 MultiSelectCountry 보여 줍니다.

Harvest 선택한 j 쿼리 플러그 인 이미지

아래 두 이미지에서 캐나다 가 선택됩니다.

선택한 캐나다 이미지

제거할 X로 선택한 캐나다 이미지

위의 이미지에서 캐나다가 선택되어 있으며 선택 영역을 제거하려면 클릭할 수 있는 x 가 포함되어 있습니다. 아래 이미지는 선택된 캐나다, 중국 및 일본을 보여줍니다.

선택한 캐나다 중국 및 일본의 이미지

Harvest Chosen jQuery 플러그 인 연결

jQuery에 대한 경험이 있는 경우 다음 섹션을 따라가기 쉽습니다. 이전에 jQuery를 사용한 적이 없는 경우 다음 jQuery 자습서 중 하나를 시도해 볼 수 있습니다.

선택한 플러그 인은 이 자습서와 함께 제공되는 시작 및 완료된 샘플 프로젝트에 포함되어 있습니다. 이 자습서에서는 jQuery를 사용하여 UI에 연결하기만 하면 됩니다. ASP.NET MVC 프로젝트에서 Harvest Chosen jQuery 플러그 인을 사용하려면 다음을 수행해야 합니다.

github에서 선택한 플러그 인을 다운로드합니다. 이 단계는 사용자를 위해 수행되었습니다.
선택한 폴더를 ASP.NET MVC 프로젝트에 추가합니다. 이전 단계에서 다운로드한 선택한 플러그 인의 자산을 선택한 폴더에 추가합니다. 이 단계는 사용자를 위해 수행되었습니다.
선택한 플러그 인을 DropDownList 또는 ListBox HTML 도우미에 연결합니다.

선택한 플러그 인을 MultiSelectCountry 뷰에 연결합니다.

Views\Home\MultiSelectCountry.cshtml 파일을 열고 매개 변수를 htmlAttributes 에 Html.ListBox추가합니다. 추가할 매개 변수에는 select list(@class = "chzn-select")의 클래스 이름이 포함됩니다. 완성된 코드는 다음과 같습니다.

<div class="editor-field">

    @Html.ListBox("Countries", ViewBag.Countrieslist as MultiSelectList

     , new

     {

         @class = "chzn-select",

         data_placeholder = "Choose  Countries..."

     }

    )

</div>

위의 코드에서는 HTML 특성 및 특성 값을 class = "chzn-select"추가합니다. 앞에 오는 @ 문자 클래스는 Razor 뷰 엔진과는 아무 상관이 없습니다. class는 C# 키워드(keyword). C# 키워드는 @을 접두사로 포함하지 않는 한 식별자로 사용할 수 없습니다. 위의 예제에서 는 @class 유효한 식별자이지만 클래스는 키워드(keyword) 때문에 클래스가 아닙니다.

Chosen/chosen.jquery.js 및 Chosen/chosen.css 파일에 대한 참조를 추가합니다. 선택한/chosen.jquery.js 및 는 선택한 플러그 인의 기능을 구현합니다. Chosen/chosen.css 파일은 스타일을 제공합니다. Views\Home\MultiSelectCountry.cshtml 파일의 맨 아래에 이러한 참조를 추가합니다. 다음 코드는 선택한 플러그 인을 참조하는 방법을 보여줍니다.

<script src="@Url.Content("~/Chosen/chosen.jquery.js")" type="text/javascript"></script><script src="@Url.Content("~/Chosen/chosen.jquery.js")" type="text/javascript"></script>

<link href="@Url.Content("~/Chosen/chosen.css")" rel="stylesheet"  type="text/css" />

Html.ListBox 코드에 사용되는 클래스 이름을 사용하여 선택한 플러그 인을 활성화합니다. 위의 예제에서 클래스 이름은 입니다 chzn-select. Views\Home\MultiSelectCountry.cshtml 보기 파일의 아래쪽에 다음 줄을 추가합니다. 이 줄은 선택한 플러그 인을 활성화합니다.

<script >    $(".chzn-select").chosen(); </script>  @*Hookup Chosen Plugin*@

다음 줄은 클래스 이름이 chzn-select인 DOM 요소를 선택하는 jQuery ready 함수를 호출하는 구문입니다.

$(".chzn-select")

위의 호출에서 반환된 래핑된 집합은 선택한 메서드(.chosen();)를 적용하여 선택한 플러그 인을 연결합니다.

다음 코드에서는 완료된 Views\Home\MultiSelectCountry.cshtml 보기 파일을 보여 줍니다.

@{

    ViewBag.Title = "MultiSelect Country";

    Layout = "~/Views/Shared/_Simple_Layout.cshtml";

}

@if (ViewBag.YouSelected != null) {

    <div> You Selected:  @ViewBag.YouSelected</div>

}

@using (Html.BeginForm()) {

    <fieldset>

        <legend>Multi-Select Demo</legend>

<div class="editor-field">

    @Html.ListBox("Countries", ViewBag.Countrieslist as MultiSelectList

     , new

     {

         @class = "chzn-select"

     }

    )

</div>

        <p>

            <input type="submit" value="Save" />

        </p>

    </fieldset>

}

<script src="@Url.Content("~/Chosen/chosen.jquery.js")" type="text/javascript"></script>

<link href="@Url.Content("~/Chosen/chosen.css")" rel="stylesheet"  type="text/css" />

<script >    $(".chzn-select").chosen(); </script> @*Hookup Chosen Plugin*@

애플리케이션을 실행하고 보기로 MultiSelectCountry 이동합니다. 국가를 추가하고 삭제해 보세요. 제공된 샘플 다운로드에는 ViewBag 대신 보기 모델을 사용하여 MultiSelectCountry 기능을 구현하는 메서드 및 뷰도 포함되어 MultiCountryVM 있습니다.

다음 섹션에서는 ASP.NET MVC 스캐폴딩 메커니즘이 DropDownList 도우미와 함께 작동하는 방식을 확인할 수 있습니다.