Saya butuh bantuan dengan penolong tag pilih di ASP.NET Core.
Saya memiliki daftar karyawan yang saya coba ikat ke penolong tag tertentu. Karyawan saya ada di List<Employee> EmployeesList
dan nilai yang dipilih akan masuk ke EmployeeId
properti. Model tampilan saya terlihat seperti ini:
public class MyViewModel
{
public int EmployeeId { get; set; }
public string Comments { get; set; }
public List<Employee> EmployeesList {get; set; }
}
Kelas karyawan saya terlihat seperti ini:
public class Employee
{
public int Id { get; set; }
public string FullName { get; set; }
}
Pertanyaan saya adalah bagaimana saya memberi tahu penolong tag pilih saya untuk menggunakan Id
sebagai nilai saat ditampilkan FullName
dalam daftar drop-down?
<select asp-for="EmployeeId" asp-items="???" />
Saya menghargai bantuan dengan ini. Terima kasih.
Jawaban:
Menggunakan bantuan Tag Pilih untuk merender elemen SELECT
Dalam tindakan GET Anda, buat objek model tampilan Anda, muat
EmployeeList
properti koleksi dan kirimkan ke tampilan.Dan di tampilan buat Anda, buat
SelectList
objek baru dariEmployeeList
properti dan berikan itu sebagai nilai untukasp-items
properti.Dan metode tindakan HttpPost Anda untuk menerima data formulir yang dikirimkan.
Atau
Jika model tampilan Anda memiliki
List<SelectListItem>
sebagai properti untuk item dropdown Anda.Dan dalam tindakan Anda,
Dan dalam tampilan, Anda dapat langsung menggunakan
Employees
properti untukasp-items
.Kelas
SelectListItem
milikMicrosoft.AspNet.Mvc.Rendering
namespace.Pastikan Anda menggunakan tag penutup eksplisit untuk elemen pilih. Jika Anda menggunakan pendekatan tag penutup diri, tag helper akan membuat elemen SELECT kosong!
Pendekatan di bawah ini tidak akan berhasil
Tetapi ini akan berhasil.
Mendapatkan data dari tabel database Anda menggunakan framework entitas
Contoh di atas menggunakan item kode keras untuk opsi. Jadi saya pikir saya akan menambahkan beberapa kode sampel untuk mendapatkan data menggunakan kerangka kerja Entity karena banyak orang menggunakannya.
Mari kita asumsikan objek DbContext Anda memiliki properti yang disebut
Employees
, yang merupakan tipe diDbSet<Employee>
manaEmployee
kelas entitas memilikiId
danName
properti seperti iniAnda bisa menggunakan kueri LINQ untuk mendapatkan karyawan dan menggunakan metode Pilih dalam ekspresi LINQ Anda untuk membuat daftar
SelectListItem
objek untuk setiap karyawan.Dengan asumsi
context
adalah objek konteks db Anda. Kode tampilan sama seperti di atas.Menggunakan SelectList
Beberapa orang lebih suka menggunakan
SelectList
kelas untuk menyimpan item yang diperlukan untuk memberikan opsi.Sekarang dalam tindakan GET Anda, Anda bisa menggunakan
SelectList
konstruktor untuk mengisiEmployees
properti model tampilan. Pastikan Anda menentukan parameterdataValueField
dandataTextField
.Di sini saya memanggil
GetEmployees
metode untuk mendapatkan daftar objek Karyawan, masing-masing denganId
danFirstName
properti dan saya menggunakan properti tersebut sebagaiDataValueField
danDataTextField
dariSelectList
objek yang kami buat. Anda dapat mengubah daftar hardcoded ke kode yang membaca data dari tabel database.Kode tampilan akan sama.
Render elemen SELECT dari daftar string.
Kadang-kadang Anda mungkin ingin membuat elemen pilih dari daftar string. Dalam hal ini, Anda dapat menggunakan
SelectList
konstruktor yang hanya dibutuhkanIEnumerable<T>
Kode tampilan akan sama.
Pengaturan opsi yang dipilih
Beberapa kali, Anda mungkin ingin menetapkan satu opsi sebagai opsi default di elemen SELECT (Misalnya, di layar edit, Anda ingin memuat nilai opsi yang disimpan sebelumnya). Untuk melakukan itu, Anda cukup mengatur nilai
EmployeeId
properti ke nilai opsi yang ingin Anda pilih.Ini akan memilih opsi Tom di elemen pilih ketika halaman diberikan.
Dropdown multi pilih
Jika Anda ingin merender dropdown multi pilih, Anda cukup mengubah properti model tampilan yang Anda gunakan untuk
asp-for
atribut dalam tampilan Anda menjadi tipe array.Ini akan membuat markup HTML untuk elemen pilih dengan
multiple
atribut yang akan memungkinkan pengguna untuk memilih beberapa opsi.Pengaturan opsi yang dipilih dalam multi pilih
Mirip dengan pemilihan tunggal, atur nilai
EmployeeIds
properti ke array nilai yang Anda inginkan.Ini akan memilih opsi Tom and Jerry di elemen multi-pilih ketika halaman diberikan.
Menggunakan ViewBag untuk mentransfer daftar item
Jika Anda tidak memilih untuk menyimpan properti tipe koleksi untuk meneruskan daftar opsi ke tampilan, Anda dapat menggunakan ViewBag dinamis untuk melakukannya. ( Ini bukan pendekatan yang saya sarankan secara pribadi karena viewbag dinamis dan kode Anda cenderung tidak ditambal kesalahan ketik )
dan dalam tampilan
Menggunakan ViewBag untuk mentransfer daftar item dan mengatur opsi yang dipilih
Sama seperti di atas. Yang harus Anda lakukan adalah, atur nilai properti (yang Anda ikatkan dropdown untuk) ke nilai opsi yang ingin Anda pilih.
dan dalam tampilan
Mengelompokkan item
Metode tag pembantu pilih mendukung opsi pengelompokan dalam dropdown. Yang harus Anda lakukan adalah, tentukan nilai
Group
properti masing-masingSelectListItem
dalam metode tindakan Anda.Tidak ada perubahan dalam kode tampilan. pembantu tag pilih sekarang akan memberikan opsi di dalam 2 item grup optg .
sumber
<option>Please select one</option>
Saya membuat Antarmuka dan
<options>
penolong tag untuk ini. Jadi saya tidak perlu mengubahIEnumerable<T>
item menjadiIEnumerable<SelectListItem>
setiap kali saya harus mengisi<select>
kontrol.Dan saya pikir itu bekerja dengan indah ...
Penggunaannya seperti:
Dan untuk membuatnya bekerja dengan tag helper, Anda harus mengimplementasikan antarmuka itu di kelas Anda:
Ini adalah kode yang diperlukan:
Antarmuka:
The
<options>
tag helper:Mungkin ada kesalahan ketik tetapi tujuannya jelas saya pikir. Saya harus mengedit sedikit.
sumber
Anda juga dapat menggunakan IHtmlHelper.GetEnumSelectList.
sumber
Jawaban saya di bawah ini tidak memecahkan pertanyaan tetapi berkaitan dengan.
Jika seseorang menggunakan
enum
model kelas, seperti contoh ini:Dan properti untuk mendapatkan nilai saat mengirimkan:
Di halaman pisau cukur, Anda bisa menggunakan
Html.GetEnumSelectList<Counter>()
untuk mendapatkan properti enum.Ini menghasilkan HTML berikut:
sumber
Anda dapat menggunakan kode di bawah ini untuk beberapa pilihan :
Anda juga bisa menggunakan:
sumber
Di Dapatkan:
Dalam Posting:
Dalam penglihatan :
sumber