Menambahkan Kategori Baru ke DropDownList menggunakan jQuery UI

2023-06-16

Tag HTML Select sangat ideal untuk menyajikan daftar data kategori tetap, tetapi sering kali Anda perlu menambahkan kategori baru. Misalkan kita ingin menambahkan genre "Opera" ke kategori dalam database kita? Di bagian ini, kita akan menggunakan UI jQuery untuk menambahkan kotak dialog yang dapat kita gunakan untuk menambahkan kategori baru. Gambar di bawah ini menunjukkan bagaimana UI akan hadir di browser.

Gambar U I di jendela browser

Saat pengguna memilih tautan Tambahkan Genre Baru, kotak dialog pop-up meminta nama genre baru kepada pengguna (dan deskripsi secara opsional). Gambar di bawah ini memperlihatkan dialog pop-up Tambahkan Genre .

Gambar dialog pop-up tambahkan genre

Saat nama genre baru dimasukkan dan tombol Simpan didorong, hal berikut ini terjadi:

Panggilan AJAX memposting data ke metode Buat Pengontrol Genre, yang menyimpan genre baru ke database dan mengembalikan informasi genre baru (nama genre dan ID) sebagai JSON.
JavaScript menambahkan data genre baru ke daftar pilih.
JavaScript menjadikan genre baru sebagai item yang dipilih.

Pada gambar di bawah ini, Opera ditambahkan ke database dan dipilih di daftar drop-down Genre .

Gambar pilihan daftar drop-down

Buka file Views\StoreManager\Create.cshtml dan ganti markup genre dengan kode berikut:

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

     @Html.Partial("_ChooseGenre")

</div>

Tampilan _ChooseGenre parsial akan berisi semua logika untuk menghubungkan JavaScript dan jQuery yang digunakan untuk mengimplementasikan fitur tambahkan genre baru. Setelah kita menyelesaikan kode, akan mudah untuk melakukan hal yang sama dengan UI artis.

Di Penjelajah Solusi, klik kanan folder Views\StoreManager dan pilih Tambahkan, lalu Lihat. Di input Nama tampilan, masukkan _ChooseGenre lalu pilih Tambahkan. Ganti markup dalam file Views\StoreManager\_ChooseGenre.cshtml dengan yang berikut ini:

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

Baris pertama menyatakan bahwa kita meneruskan Album sebagai model kita, pernyataan model yang sama persis yang ditemukan dalam tampilan Buat. Beberapa baris berikutnya adalah markup pembantu Label . Baris berikutnya adalah panggilan pembantu DropDownList , persis sama seperti dalam tampilan Buat asli. Baris berikutnya menambahkan tautan dengan nama Add New Genre, dan menatanya seperti tombol. Baris yang berisi ValidationMessageFor disalin langsung dari tampilan Buat. Baris berikut:

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

</div>

membuat div tersembunyi, dengan ID .genreDialog Kami akan menggunakan jQuery untuk menghubungkan kotak dialog Tambahkan Genre kami dengan ID genreDialog di div ini. Dua tag skrip terakhir berisi tautan ke file JavaScript yang akan kami gunakan untuk mengimplementasikan fitur tambahkan genre baru. File /Scripts/chooseGenre.js disediakan untuk Anda dalam proyek, kami akan memeriksanya nanti dalam tutorial.

Jalankan aplikasi dan klik tombol Tambahkan Genre Baru. Dalam kotak dialog Tambahkan Genre , masukkan Opera di kotak Input nama .

Gambar kotak dialog tambahkan genre

Klik tombol Simpan. Panggilan AJAX membuat kategori Opera lalu mengisi daftar dropdown dengan Opera, dan mengatur Opera sebagai genre yang dipilih.

Gambar daftar drop-down yang diisi

Masukkan artis, judul, dan harga, lalu pilih tombol Buat . Jika Anda memasukkan harga kurang dari $8,99, album baru akan muncul di bagian atas tampilan Indeks. Verifikasi bahwa entri album baru disimpan dalam database.

Gambar yang memverifikasi entri album baru disimpan dalam database

Coba buat genre baru hanya dengan satu huruf. Kode berikut dalam file Models\Genre.cs menetapkan panjang minimum dan maksimum nama genre.

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

Laporan validasi sisi klien, Anda harus memasukkan string antara 2 dan 20 karakter.

Gambar validasi sisi klien

Memeriksa Bagaimana Genre Baru Ditambahkan ke Database dan Pilih Daftar.

Buka file Scripts\chooseGenre.js dan periksa kode.

$(function () {

    $('#genreDialog').dialog({

        autoOpen: false,

        width: 400,

        height: 300,

        modal: true,

        title: 'Add Genre',

        buttons: {

            'Save': function () {

                // Omitted 

            },

            'Cancel': function () {

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

            }

        }

    });

Baris kedua menggunakan ID genreDialog untuk membuat kotak dialog pada tag div di file Views\StoreManager\_ChooseGenre.cshtml . Sebagian besar parameter bernama adalah penjelasan diri sendiri. Parameter autoOpen diatur ke false, memilih tombol Buat Genre akan membuka dialog secara eksplisit (ini dijelaskan terakhir). Dialog memiliki dua tombol, Simpan dan Batalkan. Tombol Batal menutup dialog. Kode berikut menunjukkan fungsi tombol Simpan .

'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 dipilih dari createGenreForm ID. createGenreForm ID diatur dalam kode berikut yang ditemukan di file Views\Genre\_CreateGenre.cshtml.

@model MvcMusicStore.Models.Genre

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

{

    @*Omitted for clarity.*@

}

Kelebihan pembantu Html.BeginForm yang digunakan dalam file Views\Genre\_CreateGenre.cshtml menghasilkan HTML dengan atribut tindakan yang berisi URL untuk mengirimkan formulir. Anda dapat melihat ini dengan menampilkan halaman buat album di browser dan memilih tampilkan sumber di browser. Markup berikut menunjukkan HTML yang dihasilkan yang berisi tag formulir.

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

Baris jQuery $.post melakukan panggilan AJAX ke atribut tindakan (/StoreManager/Create) dan meneruskan data dari kotak dialog Buat Genre . Data terdiri dari nama untuk genre baru dan deskripsi opsional. Jika panggilan AJAX berhasil, nama dan nilai genre baru ditambahkan ke markup Pilih, dan genre baru diatur ke nilai yang dipilih. Karena ini adalah markup yang dihasilkan secara dinamis, Anda tidak dapat melihat opsi pilih baru dengan melihat sumber di browser. Anda dapat melihat HTML baru dengan alat pengembang IE 9 F12. Untuk melihat opsi pilih baru, di Internet Explorer 9, tekan tombol F12 untuk memulai alat pengembang F12. Navigasi ke halaman Buat dan tambahkan genre baru sehingga genre baru dipilih di daftar pemilih genre. Di alat pengembang F12:

Pilih tab HTML.
Tekan ikon refresh.
Dalam kotak pencarian, masukkan GenreID.
Menggunakan ikon berikutnya,

navigasikan ke tag pilih berikut:
```
<select name="GenreId" id="GenreId" >
```
Perluas nilai opsi terakhir.

Gambar tampilan yang diperluas

Kode berikut dalam file Scripts\chooseGenre.js memperlihatkan cara tombol Tambahkan Genre Baru tersambung ke peristiwa klik, dan cara kotak dialog Tambahkan Genre Baru dibuat.

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

});

Baris pertama membuat fungsi klik yang dilampirkan ke tombol Tambahkan Genre Baru. Markup berikut dari file Views\StoreManager\_ChooseGenre.cshtml memperlihatkan bagaimana tombol Tambahkan Genre Baru dibuat:

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

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

Metode pemuatan membuat dan membuka dialog Tambahkan Genre dan memanggil metode jQuery parse sehingga validasi klien terjadi pada data yang dimasukkan dalam dialog.

Di bagian ini Anda telah mempelajari cara membuat dialog yang dapat digunakan untuk menambahkan data kategori baru ke daftar pilihan. Anda dapat mengikuti prosedur yang sama untuk membuat UI untuk menambahkan artis baru ke daftar pemilih artis. Tutorial ini telah memberikan gambaran umum tentang bekerja dengan dropDownList pembantu HTML MVC ASP.NET. Untuk informasi tambahan tentang bekerja dengan DropDownList, lihat bagian referensi tambahan di bawah ini. Harap beri tahu kami jika tutorial ini telah membantu.

Referensi Tambahan

ASP.NET Tutorial Daftar Dropdown MVC–Cascading oleh Radu Enuca
Memilih plugin JavaScript yang mendukung multi-pilih dan pemfilteran.

Kontributor

Radu Enuca
Jean-Sébastien Goupil
Brad Wilson

Peninjau

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

Mantan

Bagikan melalui

Menambahkan Kategori Baru ke DropDownList menggunakan jQuery UI

Memeriksa Bagaimana Genre Baru Ditambahkan ke Database dan Pilih Daftar.

Referensi Tambahan

Kontributor

Peninjau

Saran dan Komentar

Sumber Daya Tambahan: