Bagikan melalui

Menggunakan DropDownList Helper dengan ASP.NET MVC

  • Artikel

oleh Rick Anderson

Tutorial ini akan mengajari Anda dasar-dasar bekerja dengan pembantu DropDownList dan pembantu ListBox dalam aplikasi Web MVC ASP.NET. Anda dapat menggunakan Microsoft Visual Web Developer 2010 Express Service Pack 1, yang merupakan versi gratis Microsoft Visual Studio untuk mengikuti tutorial. Sebelum memulai, pastikan Anda telah menginstal prasyarat yang tercantum di bawah ini. Anda dapat menginstal semuanya dengan mengklik tautan berikut: Penginstal Platform Web. Atau, Anda dapat menginstal prasyarat secara individual menggunakan tautan berikut:

Jika Anda menggunakan Visual Studio 2010 alih-alih Visual Web Developer 2010, instal prasyarat dengan mengklik tautan berikut: Prasyarat Visual Studio 2010. Tutorial ini mengasumsikan Anda telah menyelesaikan tutorial Intro to ASP.NET MVC ataututorial ASP.NET MVC Music Store atau Anda terbiasa dengan pengembangan MVC ASP.NET. Tutorial ini dimulai dengan proyek yang dimodifikasi dari tutorial ASP.NET MVC Music Store .

Proyek Visual Web Developer dengan tutorial lengkap kode sumber C# tersedia untuk menyertai topik ini. Unduh.

Apa yang akan Anda Bangun

Anda akan membuat metode tindakan dan tampilan yang menggunakan pembantu DropDownList untuk memilih kategori. Anda juga akan menggunakan jQuery untuk menambahkan dialog sisipkan kategori yang dapat digunakan saat kategori baru (seperti genre atau artis) diperlukan. Di bawah ini adalah cuplikan layar tampilan Buat yang memperlihatkan tautan untuk menambahkan genre baru dan menambahkan artis baru.

Gambar menggunakan pembantu daftar drop-down

Keterampilan yang akan Anda Pelajari

Berikut adalah apa yang akan Anda pelajari:

  • Cara menggunakan pembantu DropDownList untuk memilih data kategori.
  • Cara menambahkan dialog jQuery untuk menambahkan kategori baru.

Memulai

Mulailah dengan mengunduh proyek pemula dengan tautan berikut, Unduh. Di Windows Explorer, klik kanan pada file DDL_Starter.zip dan pilih properti. Dalam kotak dialog Properti DDL_Starter.zip, pilih Buka blokir.

Gambar kotak dialog properti pilih buka blokir

Klik kanan file DDL_Starter.zip dan pilih Ekstrak Semua untuk membuka zip file. Buka file StartMusicStore.sln dengan Visual Web Developer 2010 Express ("Visual Web Developer" atau "VWD" singkatnya) atau Visual Studio 2010.

Tekan CTRL+F5 untuk menjalankan aplikasi dan klik tautan Uji .

Gambar tautan uji aplikasi

Pilih tautan Pilih Kategori Film (Sederhana). Daftar Pilih Jenis Film ditampilkan, dengan Kody nilai yang dipilih.

Gambar daftar pilih jenis film

Klik kanan di browser dan pilih tampilkan sumber. HTML untuk halaman ditampilkan. Kode di bawah ini menunjukkan HTML untuk elemen pilih.

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

Anda dapat melihat bahwa setiap item dalam daftar pilihan memiliki nilai (0 untuk Tindakan, 1 untuk Drama, 2 untuk Koma dan 3 untuk Fiksi Sains) dan nama tampilan (Action, Drama, Comedy dan Science Fiction). Kode di atas adalah HTML standar untuk daftar pilihan.

Ubah daftar pilih menjadi Drama dan tekan tombol Kirim . URL di browser adalah http://localhost:2468/Home/CategoryChosen?MovieType=1 dan halaman menampilkan Anda Dipilih: 1.

Gambar U R L di browser

Buka file Controllers\HomeController.cs dan periksa metode .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();

 }

Pembantu DropDownList yang digunakan untuk membuat daftar pemilihan HTML memerlukan IEnumerable<SelectListItem >, baik secara eksplisit maupun implisit. Artinya, Anda dapat meneruskan IEnumerable<SelectListItem > secara eksplisit ke pembantu DropDownList atau Anda dapat menambahkan IEnumerable<SelectListItem > ke ViewBag menggunakan nama yang sama untuk SelectListItem sebagai properti model. Meneruskan SelectListItem secara implisit dan eksplisit tercakup dalam bagian tutorial berikutnya. Kode di atas menunjukkan cara paling sederhana untuk membuat IEnumerable<SelectListItem > dan mengisinya dengan teks dan nilai. Perhatikan bahwa ComedySelectListItem memiliki properti Dipilih yang diatur ke true; ini akan menyebabkan daftar pemilihan yang dirender menampilkan Comedy sebagai item yang dipilih dalam daftar.

IEnumerable<SelectListItem > yang dibuat di atas ditambahkan ke ViewBag dengan nama MovieType. Ini adalah cara kami meneruskan IEnumerable<SelectListItem > secara implisit ke pembantu DropDownList yang ditunjukkan di bawah ini.

Buka file Views\Home\SelectCategory.cshtml dan periksa markup.

@{

    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>

}

Pada baris ketiga, kami mengatur tata letak ke Views/Shared/_Simple_Layout.cshtml, yang merupakan versi sederhana dari file tata letak standar. Kami melakukan ini untuk menjaga tampilan dan html yang dirender sederhana.

Dalam sampel ini kami tidak mengubah status aplikasi, jadi kami akan mengirimkan data menggunakan HTTP GET, bukan HTTP POST. Lihat bagian W3C Daftar Periksa Cepat untuk Memilih HTTP GET atau POST. Karena kami tidak mengubah aplikasi dan memposting formulir, kami menggunakan overload Html.BeginForm yang memungkinkan kami menentukan metode tindakan, pengontrol, dan metode formulir (HTTP POST atau HTTP GET). Biasanya tampilan berisi kelebihan html.BeginForm yang tidak mengambil parameter. Tidak ada versi parameter default untuk memposting data formulir ke versi POST dari metode tindakan dan pengontrol yang sama.

Baris berikut

@Html.DropDownList("MovieType")

meneruskan argumen string ke pembantu DropDownList . String ini, "MovieType" dalam contoh kami, melakukan dua hal:

  • Ini menyediakan kunci bagi pembantu DropDownList untuk menemukan IEnumerable<SelectListItem >di ViewBag.
  • Ini terikat data ke elemen formulir MovieType. Jika metode kirim adalah HTTP GET, MovieType akan menjadi string kueri. Jika metode kirim adalah HTTP POST, MovieType akan ditambahkan di isi pesan. Gambar berikut menunjukkan string kueri dengan nilai 1.

Gambar string kueri dengan nilai 1

Kode berikut menunjukkan metode yang CategoryChosen dikirimkan formulir.

public ViewResult CategoryChosen(string MovieType) {

    ViewBag.messageString = MovieType;

    return View("Information");

}

Navigasi kembali ke halaman pengujian dan pilih tautan SelectList HTML. Halaman HTML merender elemen tertentu yang mirip dengan halaman pengujian MVC ASP.NET sederhana. Klik kanan jendela browser dan pilih tampilkan sumber. Markup HTML untuk daftar pilihan pada dasarnya identik. Uji halaman HTML, ini berfungsi seperti metode tindakan MVC ASP.NET dan lihat yang sebelumnya kami uji.

Meningkatkan Daftar Pemilihan Film dengan Enum

Jika kategori dalam aplikasi Anda diperbaiki dan tidak akan berubah, Anda dapat memanfaatkan enum untuk membuat kode Anda lebih kuat dan lebih sederhana untuk diperluas. Saat Anda menambahkan kategori baru, nilai kategori yang benar dihasilkan. menghindari kesalahan salin dan tempel saat Anda menambahkan kategori baru tetapi lupa memperbarui nilai kategori.

Buka file Controllers\HomeController.cs dan periksa kode berikut:

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");

}

Enum eMovieCategories mengambil empat jenis film. Metode ini SetViewBagMovieType membuat IEnumerable<SelectListItem > darieMovieCategories enum, dan mengatur Selected properti dari selectedMovie parameter . Metode SelectCategoryEnum tindakan menggunakan tampilan yang sama dengan SelectCategory metode tindakan.

Navigasi ke halaman Uji dan klik Select Movie Category (Enum) tautan. Kali ini, alih-alih nilai (angka) yang ditampilkan, string yang mewakili enum ditampilkan.

Memposting Nilai Enum

Formulir HTML biasanya digunakan untuk memposting data ke server. Kode berikut menunjukkan HTTP GET versi SelectCategoryEnumPost dan HTTP POST metode .

public ActionResult SelectCategoryEnumPost() {

    SetViewBagMovieType(eMovieCategories.Comedy);

    return View();

}

[HttpPost]

public ActionResult SelectCategoryEnumPost(eMovieCategories MovieType) {

    ViewBag.messageString = MovieType.ToString() +

                            " val = " + (int)MovieType;

    return View("Information");

}

Dengan meneruskan eMovieCategories enum ke POST metode , kita dapat mengekstrak nilai enum dan string enum. Jalankan sampel dan navigasi ke halaman Uji. Select Movie Category(Enum Post) Klik tautan. Pilih jenis film lalu tekan tombol kirim. Tampilan menunjukkan nilai dan nama jenis film.

Gambar nilai dan nama jenis film

Membuat Beberapa Bagian Pilih Elemen

Pembantu HTML ListBox merender elemen HTML <select> dengan multiple atribut , yang memungkinkan pengguna untuk membuat beberapa pilihan. Navigasi ke tautan Uji, lalu pilih tautan Multi Pilih Negara . UI yang dirender memungkinkan Anda memilih beberapa negara. Pada gambar di bawah ini, Kanada dan Tiongkok dipilih.

Gambar daftar drop-down beberapa pilihan

Memeriksa Kode MultiSelectCountry

Periksa kode berikut dari file 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();

}

Metode ini GetCountries membuat daftar negara, lalu meneruskannya ke MultiSelectList konstruktor. Kelebihan MultiSelectList beban konstruktor yang digunakan dalam metode di GetCountries atas mengambil empat parameter:

public MultiSelectList(

    IEnumerable items,

    string dataValueField,

    string dataTextField,

    IEnumerable selectedValues

)
  1. item: IEnumerable yang berisi item dalam daftar. Dalam contoh di atas, daftar Negara.
  2. dataValueField: Nama properti dalam daftar IEnumerable yang berisi nilai . Dalam contoh di atas, ID properti .
  3. dataTextField: Nama properti dalam daftar IEnumerable yang berisi informasi yang akan ditampilkan. Dalam contoh di atas, name properti .
  4. selectedValues: Daftar nilai yang dipilih.

Dalam contoh di atas, MultiSelectCountry metode meneruskan null nilai untuk negara yang dipilih, sehingga tidak ada negara yang dipilih saat UI ditampilkan. Kode berikut menunjukkan markup Razor yang digunakan untuk merender MultiSelectCountry tampilan.

@{

    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>

}

Metode ListBox pembantu HTML yang digunakan di atas mengambil dua parameter, nama properti untuk memodelkan ikatan dan MultiSelectList yang berisi opsi dan nilai pilihan. Kode ViewBag.YouSelected di atas digunakan untuk menampilkan nilai negara yang Anda pilih saat mengirimkan formulir. Periksa kelebihan beban HTTP POST dari MultiSelectCountry metode .

[HttpPost]

public ActionResult MultiSelectCountry(FormCollection form) {

    ViewBag.YouSelected = form["Countries"];

    string selectedValues = form["Countries"];

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

    return View();

}

Properti ViewBag.YouSelected dinamis berisi negara-negara yang dipilih, yang diperoleh untuk Countries entri dalam koleksi formulir. Dalam versi ini metode GetCountries diteruskan daftar negara yang dipilih, jadi ketika MultiSelectCountry tampilan ditampilkan, negara yang dipilih dipilih di UI.

Membuat Select Element Friendly dengan Plugin jQuery yang Dipilih Panen

Plugin jQuery Yang Dipilih Harvest dapat ditambahkan ke elemen pilih> HTML <untuk membuat UI yang ramah pengguna. Gambar di bawah ini menunjukkan plugin jQuery Pilihan Panen dengan MultiSelectCountry tampilan.

Gambar plugin Kueri Yang Dipilih Panen j

Dalam dua gambar di bawah ini, Kanada dipilih.

Gambar Kanada dipilih

Gambar Kanada dipilih dengan X untuk dihapus

Pada gambar di atas, Kanada dipilih, dan berisi x yang dapat Anda klik untuk menghapus pilihan. Gambar di bawah ini menunjukkan Kanada, Tiongkok, dan Jepang dipilih.

Gambar Kanada Tiongkok dan Jepang dipilih

Menghubungkan Plugin jQuery yang Dipilih Panen

Bagian berikut lebih mudah diikuti jika Anda memiliki pengalaman dengan jQuery. Jika Anda belum pernah menggunakan jQuery sebelumnya, Anda mungkin ingin mencoba salah satu tutorial jQuery berikut.

Plugin Terpilih disertakan dalam proyek sampel pemula dan selesai yang menyertai tutorial ini. Untuk tutorial ini, Anda hanya perlu menggunakan jQuery untuk menghubungkannya ke UI. Untuk menggunakan plugin jQuery Harvest Chosen dalam proyek MVC ASP.NET, Anda harus:

  1. Unduh plugin Terpilih dari github. Langkah ini telah dilakukan untuk Anda.
  2. Tambahkan folder Yang Dipilih ke proyek MVC ASP.NET Anda. Tambahkan aset dari plugin Pilihan yang Anda unduh di langkah sebelumnya ke folder Terpilih. Langkah ini telah dilakukan untuk Anda.
  3. Hubungkan plugin yang dipilih ke pembantu HTML DropDownList atau ListBox .

Menghubungkan Plugin yang Dipilih ke Tampilan MultiSelectCountry.

Buka file Views\Home\MultiSelectCountry.cshtml dan tambahkan htmlAttributes parameter ke Html.ListBox. Parameter yang akan Anda tambahkan berisi nama kelas untuk daftar pilih(@class = "chzn-select"). Kode yang telah selesai ditunjukkan di bawah ini:

<div class="editor-field">

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

     , new

     {

         @class = "chzn-select",

         data_placeholder = "Choose  Countries..."

     }

    )

</div>

Dalam kode di atas, kita menambahkan atribut HTML dan nilai class = "chzn-select"atribut . Kelas sebelumnya karakter @ tidak ada hubungannya dengan mesin tampilan Razor. classadalah kata kunci C#. Kata kunci C# tidak dapat digunakan sebagai pengidentifikasi kecuali menyertakan @ sebagai awalan. Dalam contoh di atas, @class adalah pengidentifikasi yang valid tetapi kelas bukan karena kelas adalah kata kunci.

Tambahkan referensi ke file Yang Dipilih/chosen.jquery.js dan Dipilih/chosen.css . Yang Dipilih/chosen.jquery.js dan mengimplementasikan plugin Yang Dipilih secara fungsional. File Yang Dipilih/chosen.css menyediakan gaya. Tambahkan referensi ini ke bagian bawah file Views\Home\MultiSelectCountry.cshtml . Kode berikut menunjukkan cara mereferensikan plugin Yang Dipilih.

<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" />

Aktifkan plugin Terpilih menggunakan nama kelas yang digunakan dalam kode Html.ListBox . Dalam contoh di atas, nama kelasnya adalah chzn-select. Tambahkan baris berikut ke bagian bawah file tampilan Views\Home\MultiSelectCountry.cshtml . Baris ini mengaktifkan plugin Yang Dipilih.

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

Baris berikut adalah sintaks untuk memanggil fungsi siap jQuery, yang memilih elemen DOM dengan nama chzn-selectkelas .

$(".chzn-select")

Set yang dibungkus yang dikembalikan dari panggilan di atas kemudian menerapkan metode yang dipilih (.chosen();), yang menghubungkan plugin Yang Dipilih.

Kode berikut menunjukkan file tampilan Views\Home\MultiSelectCountry.cshtml yang telah selesai.

@{

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

Jalankan aplikasi dan navigasikan MultiSelectCountry ke tampilan. Coba tambahkan dan hapus negara. Unduhan sampel yang disediakan juga berisi MultiCountryVM metode dan tampilan yang mengimplementasikan fungsionalitas MultiSelectCountry menggunakan model tampilan alih-alih ViewBag.

Di bagian berikutnya Anda akan melihat cara kerja mekanisme perancah MVC ASP.NET dengan pembantu DropDownList .

Berikutnya