jQuery UI를 사용하여 DropDownList에 새 범주 추가

작성자: Rick Anderson

HTML Select 태그는 고정 범주 데이터 목록을 표시하는 데 적합하지만 새 범주를 추가해야 하는 경우가 많습니다. 데이터베이스의 범주에 장르 "Opera"를 추가하려는 경우를 가정해 보겠습니다. 이 섹션에서는 jQuery UI를 사용하여 새 범주를 추가하는 데 사용할 수 있는 대화 상자를 추가합니다. 아래 이미지는 UI가 브라우저에 표시되는 방법을 보여 줍니다.

사용자가 새 장르 추가 링크를 선택하면 팝업 대화 상자에서 사용자에게 새 장르 이름(및 선택적으로 설명)을 묻는 메시지가 표시됩니다. 아래 이미지는 장르 추가 팝업 대화 상자를 보여줍니다.

새 장르 이름을 입력하고 저장 단추를 누르면 다음이 발생합니다.

1. AJAX 호출은 데이터를 장르 컨트롤러의 Create 메서드에 게시합니다. 이 메서드는 새 장르를 데이터베이스에 저장하고 새 장르 정보(장르 이름 및 ID)를 JSON으로 반환합니다.

2. JavaScript는 새 장르 데이터를 선택 목록에 추가합니다.

3. JavaScript는 새 장르를 선택한 항목으로 만듭니다.

   아래 이미지에서 Opera가 데이터베이스에 추가되고 장르 드롭다운 목록에서 선택되었습니다.

Views\StoreManager\Create.cshtml 파일을 열고 장르 태그를 다음 코드로 바꿉니다.

<div class="editor-field ui-widget">

     @Html.Partial("_ChooseGenre")

</div>

부분 보기에는 _ChooseGenre 새 장르 추가 기능을 구현하는 데 사용되는 JavaScript 및 jQuery를 연결하는 모든 논리가 포함됩니다. 코드를 완료하면 아티스트 UI와 동일한 작업을 수행하는 것이 간단합니다.

솔루션 탐색기 Views\StoreManager 폴더를 마우스 오른쪽 단추로 클릭하고 추가, 보기를 차례로 선택합니다. 보기 이름 입력에서 다음을 입력 _ChooseGenre 한 다음, 추가를 선택합니다. Views\StoreManager\_ChooseGenre.cshtml 파일의 태그를 다음으로 바꿉니다.

@model MvcMusicStore.Models.Album

<div class="editor-label">

    @Html.LabelFor(model => model.GenreId, "Genre" )

</div>

@Html.DropDownList("GenreId", ViewBag.Genres as SelectList, String.Empty)

<a class="button" href="@Url.Content("~/Genre/Create")" 

    id="genreAddLink">Add New Genre</a>

@Html.ValidationMessageFor(model => model.GenreId)

<div id="genreDialog" class="hidden">

</div>

<script src="@Url.Content( "~/Scripts/ui/jquery.ui.combobox.js" )"></script>

<script src="@Url.Content("~/Scripts/chooseGenre.js")"></script>

첫 번째 줄은 만들기 뷰에 있는 Album 것과 정확히 동일한 모델 문인 모델로 전달한다고 선언합니다. 다음 몇 줄은 레이블 도우미 태그입니다. 다음 줄은 원래 만들기 보기와 정확히 동일한 DropDownList 도우미 호출입니다. 다음 줄은 이름이 Add New Genre있는 링크를 추가하고 단추처럼 스타일을 지정합니다. 포함된 ValidationMessageFor 줄은 만들기 보기에서 직접 복사됩니다. 다음 줄은 다음과 같습니다.

<div id="genreDialog" class="hidden">

</div>

는 ID genreDialog를 사용하여 숨겨진 div를 만듭니다. jQuery를 사용하여 장르 추가 대화 상자를 이 div의 ID genreDialog 와 연결합니다. 마지막 두 스크립트 태그에는 새 장르 추가 기능을 구현하는 데 사용할 JavaScript 파일에 대한 링크가 포함되어 있습니다. 프로젝트에서 /Scripts/chooseGenre.js 파일이 제공됩니다. 자습서의 뒷부분에서 살펴보겠습니다.

애플리케이션을 실행하고 새 장르 추가 단추를 클릭합니다. 장르 추가 대화 상자의 이름 입력 상자에 Opera를 입력합니다.

저장 버튼을 클릭합니다. AJAX 호출은 Opera 범주를 만든 다음 드롭다운 목록을 Opera로 채우고 Opera를 선택한 장르로 설정합니다.

아티스트, 제목 및 가격을 입력한 다음 만들기 단추를 선택합니다. $8.99 미만의 가격을 입력하면 새 앨범이 인덱스 보기의 맨 위에 표시됩니다. 새 앨범 항목이 데이터베이스에 저장되었는지 확인합니다.

한 글자로만 새 장르를 만들어 보세요. Models\Genre.cs 파일의 다음 코드는 장르 이름의 최소 및 최대 길이를 설정합니다.

[StringLength(20, MinimumLength = 2)]
public string Name { get; set; }

클라이언트 쪽 유효성 검사 보고서는 2자에서 20자 사이의 문자열을 입력해야 합니다.

데이터베이스 및 선택 목록에 새 장르가 추가되는 방법을 검사합니다.

Scripts\chooseGenre.js 파일을 열고 코드를 검사합니다.

$(function () {

    $('#genreDialog').dialog({

        autoOpen: false,

        width: 400,

        height: 300,

        modal: true,

        title: 'Add Genre',

        buttons: {

            'Save': function () {

                // Omitted 

            },

            'Cancel': function () {

                $(this).dialog('close');

            }

        }

    });

두 번째 줄은 ID genreDialog 를 사용하여 Views\StoreManager\_ChooseGenre.cshtml 파일의 div 태그에 대화 상자를 만듭니다. 명명된 매개 변수의 대부분은 자체 설명입니다. autoOpen 매개 변수가 false로 설정되고, 장르 만들기 단추를 선택하면 대화 상자가 명시적으로 열립니다(후자에 설명됨). 대화 상자에는 저장 및 취소의 두 단추가 있습니다. 취소 단추가 대화 상자를 닫습니다. 다음 코드에서는 저장 단추 함수를 보여 줍니다.

'Save': function () {

    var createGenreForm = $('#createGenreForm');

    if (createGenreForm.valid()) {

        $.post(createGenreForm.attr('action'), createGenreForm.serialize(), function (data) {

            if (data.Error != '') {

                alert(data.Error);

            }

            else {

                // Add the new genre to the dropdown list and select it

                $('#GenreId').append(

                        $('<option></option>')

                            .val(data.Genre.GenreId)

                            .html(data.Genre.Name)

                            .prop('selected', true)  // Selects the new Genre in the DropDown LB

                    );

                $('#genreDialog').dialog('close');

            }

        });

    }

},

var createGenreForm ID에서 createGenreForm 선택됩니다. ID는 createGenreForm Views\Genre\_CreateGenre.cshtml 파일에 있는 다음 코드에서 설정되었습니다.

@model MvcMusicStore.Models.Genre

@using (Html.BeginForm("Create", "Genre", FormMethod.Post, new { id = "createGenreForm" }))

{

    @*Omitted for clarity.*@

}

Views\Genre\_CreateGenre.cshtml 파일에 사용되는 Html.BeginForm 도우미 오버로드는 양식을 제출할 URL이 포함된 작업 특성을 사용하여 HTML을 생성합니다. 브라우저에서 앨범 만들기 페이지를 표시하고 브라우저에서 표시 원본을 선택하여 이를 확인할 수 있습니다. 다음 태그는 양식 태그를 포함하는 생성된 HTML을 보여 줍니다.

<form action="/StoreManager/Create" method="post">

jQuery $.post 줄은 작업 특성(/StoreManager/Create)에 대한 AJAX 호출을 수행하고 장르 만들기 대화 상자에서 데이터를 전달합니다. 데이터는 새 장르의 이름과 선택적 설명으로 구성됩니다. AJAX 호출이 성공하면 새 장르 이름과 값이 Select 태그에 추가되고 새 장르가 선택한 값으로 설정됩니다. 동적으로 생성된 태그이므로 브라우저에서 원본을 확인하여 새 선택 옵션을 볼 수 없습니다. IE 9 F12 개발자 도구를 사용하여 새 HTML을 볼 수 있습니다. 새 선택 옵션을 보려면 Internet Explorer 9에서 F12 키를 눌러 F12 개발자 도구를 시작합니다. 만들기 페이지로 이동하여 장르 선택 목록에서 새 장르가 선택되도록 새 장르를 추가합니다. F12 개발자 도구에서:

1. HTML 탭을 선택합니다.

2. 새로 고침 아이콘을 누릅니다.
   

3. 검색 상자에 GenreID를 입력합니다.

4. 다음 아이콘을 사용하여
   
   다음 선택 태그로 이동합니다.

   <select name="GenreId" id="GenreId" >
   

5. 마지막 옵션 값을 확장합니다.

Scripts\chooseGenre.js 파일의 다음 코드에서는 새 장르 추가 단추가 클릭 이벤트에 연결되는 방법과 새 장르 추가 대화 상자가 만들어지는 방법을 보여 줍니다.

$('#genreAddLink').click(function () {

    var createFormUrl = $(this).attr('href');  

    $('#genreDialog').html('')

    .load(createFormUrl, function () {  

        // The createGenreForm is loaded on the fly using jQuery load. 

        // In order to have client validation working it is necessary to tell the 

        // jQuery.validator to parse the newly added content

        jQuery.validator.unobtrusive.parse('#createGenreForm');

        $('#genreDialog').dialog('open');

    });

    return false;

});

첫 번째 줄은 새 장르 추가 단추에 연결된 클릭 함수를 만듭니다. Views\StoreManager\_ChooseGenre.cshtml 파일의 다음 태그는 새 장르 추가 단추를 만드는 방법을 보여 줍니다.

<a class="button" href="@Url.Content("~/Genre/Create")" 

    id="genreAddLink">Add New Genre</a>

로드 메서드는 장르 추가 대화 상자를 만들고 열고 jQuery parse 메서드를 호출하여 대화 상자에 입력된 데이터에 대해 클라이언트 유효성 검사가 수행되도록 합니다.

이 섹션에서는 선택 목록에 새 범주 데이터를 추가하는 데 사용할 수 있는 대화 상자를 만드는 방법을 알아보았습니다. 동일한 절차에 따라 UI를 만들어 아티스트 선택 목록에 새 아티스트를 추가할 수 있습니다. 이 자습서에서는 ASP.NET MVC HTML 도우미 DropDownList 작업에 대한 개요를 제공했습니다. DropDownList 작업에 대한 자세한 내용은 아래의 추가 참조 섹션을 참조하세요. 이 자습서가 도움이 되었는지 알려주세요.

추가 참조

• ASP.NET MVC-Cascading 드롭다운 목록 자습서 by Radu Enuca
• 다중 선택 및 필터링을 지원하는 JavaScript 플러그 인을 선택 했습니다.

참가자

• Radu Enuca
• 장 세바스티앙 구필
• 브래드 윌슨

검토자

• 장 세바스티앙 구필
• 브래드 윌슨
• Mike Pope
• 톰 다이크스트라