jQuery kullanıcı arabirimini kullanarak DropDownList’e Yeni Kategori ekleme

tarafından Rick Anderson

HTML Select etiketi, sabit kategori verilerinin listesini sunmak için idealdir, ancak genellikle yeni bir kategori eklemeniz gerekir. Veritabanımızdaki kategorilere "Opera" türünü eklemek istediğimizi varsayalım. Bu bölümde, yeni bir kategori eklemek için kullanabileceğimiz bir iletişim kutusu eklemek için jQuery kullanıcı arabirimini kullanacağız. Aşağıdaki görüntüde kullanıcı arabiriminin tarayıcıda nasıl sunılacağı gösterilmektedir.

Tarayıcı penceresindeki U I görüntüsü

Kullanıcı Yeni Tarz Ekle bağlantısını seçtiğinde, bir açılır iletişim kutusu kullanıcıdan yeni bir tarz adı (ve isteğe bağlı olarak bir açıklama) ister. Aşağıdaki resimde Tarz Ekle açılır iletişim kutusu gösterilmektedir.

Tarz ekle açılır iletişim kutusunun görüntüsü

Yeni bir tür adı girildiğinde ve Kaydet düğmesine basıldığında, aşağıdakiler gerçekleşir:

AJAX çağrısı, verileri Tür Denetleyicisi'nin Create yöntemine göndererek yeni türü veritabanına kaydeder ve yeni tarz bilgilerini (tarz adı ve kimlik) JSON olarak döndürür.
JavaScript, yeni tarz verilerini seçme listesine ekler.
JavaScript, yeni türü seçili öğe yapar.

Aşağıdaki resimde Opera veritabanına eklenmiş ve Tarz açılan listesinde seçilmiştir.

Açılan liste seçiminin resmi

Views\StoreManager\Create.cshtml dosyasını açın ve tür işaretlemesini aşağıdaki kodla değiştirin:

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

     @Html.Partial("_ChooseGenre")

</div>

Kısmi görünüm, _ChooseGenre yeni tür ekleme özelliğini uygulamak için kullanılan JavaScript ve jQuery'yi bağlamaya ilişkin tüm mantığı içerir. Kodu tamamladıktan sonra aynı işlemi sanatçı kullanıcı arabirimiyle yapmak kolay olacaktır.

Çözüm Gezgini Görünümler\StoreManager klasörüne sağ tıklayın ve Ekle'yi ve ardından Görünüm'ü seçin. Görünüm adı girişine girin _ChooseGenre ve Ekle'yi seçin. Views\StoreManager\_ChooseGenre.cshtml dosyasındaki işaretlemeyi aşağıdakilerle değiştirin:

@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>

İlk satır, modelimiz olarak, Oluşturma görünümünde bulunan model deyiminin tam olarak aynı olduğunu bildirir Album . Sonraki birkaç satır Etiket yardımcı işaretlemesidir. Sonraki satır DropDownList yardımcı çağrısıdır ve özgün Oluşturma görünümündekiyle tam olarak aynıdır. Sonraki satır adıyla Add New Genrebir bağlantı ekler ve düğme gibi stil ekler. Içeren ValidationMessageFor satır doğrudan Oluştur görünümünden kopyalanır. Aşağıdaki satırlar:

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

</div>

kimliğiyle genreDialoggizli bir div oluşturur. Bu div'deki kimlikle genreDialog Tarz Ekle iletişim kutumuzu bağlamak için jQuery kullanacağız. Son iki betik etiketi, yeni tür ekleme özelliğini uygulamak için kullanacağımız JavaScript dosyalarının bağlantılarını içerir. /Scripts/chooseGenre.js dosyası projede sizin için sağlanmıştır, öğreticinin ilerleyen bölümlerinde inceleyeceğiz.

Uygulamayı çalıştırın ve Yeni Tarz Ekle düğmesine tıklayın. Tür Ekle iletişim kutusunda, Ad giriş kutusuna Opera yazın.

Tarz ekle iletişim kutusunun resmi

Kaydet düğmesine tıklayın. AJAX çağrısı Opera kategorisini oluşturur ve açılan listeyi Opera ile doldurur ve Opera'yı seçili tür olarak ayarlar.

Açılan listenin doldurulan görüntüsü

Bir sanatçı, başlık ve fiyat girin, ardından Oluştur düğmesini seçin. 8,99 TL'den küçük bir fiyat girerseniz, yeni albüm Dizin görünümünün en üstünde görünür. Yeni albüm girişinin veritabanına kaydedildiği doğrulayın.

Yeni albüm girişinin veritabanına kaydedildiği doğrulanan görüntü

Yalnızca bir harfle yeni bir tür oluşturmayı deneyin. Models\Genre.cs dosyasındaki aşağıdaki kod, tür adının en düşük ve en uzun uzunluğunu ayarlar.

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

İstemci tarafı doğrulama raporları, 2 ile 20 karakter arasında bir dize girmeniz gerekir.

İstemci tarafı doğrulama görüntüsü

Veritabanına ve Seçme Listesine Yeni Bir Türün Nasıl Eklendiğini inceleme.

Scripts\chooseGenre.js dosyasını açın ve kodu inceleyin.

$(function () {

    $('#genreDialog').dialog({

        autoOpen: false,

        width: 400,

        height: 300,

        modal: true,

        title: 'Add Genre',

        buttons: {

            'Save': function () {

                // Omitted 

            },

            'Cancel': function () {

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

            }

        }

    });

İkinci satır, Views\StoreManager\_ChooseGenre.cshtml dosyasındaki div etiketinde bir iletişim kutusu oluşturmak için kimliğini genreDialog kullanır. Adlandırılmış parametrelerin çoğu kendi kendine açıklayıcıdır. autoOpen parametresi false olarak ayarlanır ve Tür Oluştur düğmesi seçildiğinde iletişim kutusu açıkça açılır (bu, ikincisinde açıklanmıştır). İletişim kutusunda Kaydet ve İptal şeklinde iki düğme vardır. İptal düğmesi iletişim kutusunu kapatır. Aşağıdaki kod, Kaydet düğmesi işlevini gösterir.

'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 kimliğinden createGenreForm seçilir. Kimlik, createGenreForm Views\Genre\_CreateGenre.cshtml dosyasında bulunan aşağıdaki kodda ayarlanmıştır.

@model MvcMusicStore.Models.Genre

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

{

    @*Omitted for clarity.*@

}

Views\Genre\_CreateGenre.cshtml dosyasında kullanılan Html.BeginForm yardımcı aşırı yüklemesi, formu göndermek için URL'yi içeren bir eylem özniteliğiyle HTML oluşturur. Albüm oluştur sayfasını tarayıcıda görüntüleyip kaynağı tarayıcıda göster'i seçerek bunu görebilirsiniz. Aşağıdaki işaretleme, form etiketini içeren oluşturulan HTML'yi gösterir.

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

jQuery $.post satırı, eylem özniteliğine (/StoreManager/Create) bir AJAX çağrısı yapar ve Tür Oluştur iletişim kutusundan verileri geçirir. Veriler, yeni türün adından ve isteğe bağlı bir açıklamadan oluşur. AJAX çağrısı başarılı olursa, yeni tür adı ve değeri Seç işaretlemesine eklenir ve yeni tarz seçili değere ayarlanır. Bu dinamik olarak oluşturulan işaretleme olduğundan, kaynağı tarayıcıda görüntüleyerek yeni seçme seçeneğini göremezsiniz. IE 9 F12 geliştirici araçlarıyla yeni HTML'yi görebilirsiniz. Yeni seçim seçeneğini görüntülemek için Internet Explorer 9'da F12 tuşuna basarak F12 geliştirici araçlarını başlatın. Oluştur sayfasına gidin ve yeni bir tarz ekleyerek yeni türün tür seçme listesinde seçilmesini sağlayın. F12 geliştirici araçlarında:

HTML sekmesini seçin.
Yenileme simgesine tıklayın.
Arama kutusuna GenreID yazın.
Sonraki simgeyi kullanarak

aşağıdaki select etiketine gidin:
```
<select name="GenreId" id="GenreId" >
```
Son seçenek değerini genişletin.

Genişletilmiş görünümün resmi

Scripts\chooseGenre.js dosyasındaki aşağıdaki kod, Yeni Tarz Ekle düğmesinin tıklama olayına nasıl bağlanıp Yeni Tarz Ekle iletişim kutusunun oluşturulduğunu gösterir.

$('#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;

});

İlk satır, Yeni Tarz Ekle düğmesine eklenmiş bir tıklama işlevi oluşturur. Views\StoreManager\_ChooseGenre.cshtml dosyasındaki aşağıdaki işaretleme, Yeni Tarz Ekle düğmesinin nasıl oluşturulduğunu gösterir:

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

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

Load yöntemi, Tür Ekle iletişim kutusunu oluşturur ve açar ve istemci doğrulamanın iletişim kutusuna girilen verilerde gerçekleşmesi için jQuery parse yöntemini çağırır.

Bu bölümde, seçme listesine yeni kategori verileri eklemek için kullanılabilecek bir iletişim kutusu oluşturmayı öğrendiniz. Kullanıcı arabirimi oluşturmak için aynı yordamı izleyerek sanatçı seçme listesine yeni bir sanatçı ekleyebilirsiniz. Bu öğreticide, ASP.NET MVC HTML yardımcı DropDownList ile çalışmaya genel bir bakış verilmiştir. DropDownList ile çalışma hakkında ek bilgi için aşağıdaki ekleme başvuruları bölümüne bakın. Lütfen bu öğreticinin yararlı olup olmadığını bize bildirin.

Ek Referanslar

Radu Enuca tarafından ASP.NET MVC-Basamaklı Açılan Listeler Öğreticisi
Seçilen Çoklu seçim ve filtrelemeyi destekleyen bir JavaScript eklentisi.

Katkıda Bulunanlar

Radu Enuca
Jean-Sébastien Goupil
Brad Wilson

Gözden Geçirenler

Jean-Sébastien Goupil
Brad Wilson
Mike Pope
Tom Dykstra

Geri

Geri Bildirim

Bu sayfayı yararlı buldunuz mu?

Last updated on 2024-08-24