การใช้ตัวช่วยเลือกแท็กเพื่อสร้างองค์ประกอบที่เลือก
ในการดำเนินการ GET ของคุณให้สร้างวัตถุของโมเดลการดูของคุณโหลดEmployeeList
คุณสมบัติการรวบรวมและส่งไปที่มุมมอง
public IActionResult Create()
{
var vm = new MyViewModel();
vm.EmployeesList = new List<Employee>
{
new Employee { Id = 1, FullName = "Shyju" },
new Employee { Id = 2, FullName = "Bryan" }
};
return View(vm);
}
และในมุมมองการสร้างของคุณให้สร้างSelectList
วัตถุใหม่จากEmployeeList
คุณสมบัติและส่งต่อให้เป็นค่าของasp-items
คุณสมบัติ
@model MyViewModel
<form asp-controller="Home" asp-action="Create">
<select asp-for="EmployeeId"
asp-items="@(new SelectList(Model.EmployeesList,"Id","FullName"))">
<option>Please select one</option>
</select>
<input type="submit"/>
</form>
และวิธีการดำเนินการ HttpPost ของคุณเพื่อยอมรับข้อมูลแบบฟอร์มที่ส่ง
[HttpPost]
public IActionResult Create(MyViewModel model)
{
// check model.EmployeeId
// to do : Save and redirect
}
หรือ
หากโมเดลการดูของคุณมีList<SelectListItem>
คุณสมบัติเป็นรายการดรอปดาวน์ของคุณ
public class MyViewModel
{
public int EmployeeId { get; set; }
public string Comments { get; set; }
public List<SelectListItem> Employees { set; get; }
}
และในการกระทำของคุณ
public IActionResult Create()
{
var vm = new MyViewModel();
vm.Employees = new List<SelectListItem>
{
new SelectListItem {Text = "Shyju", Value = "1"},
new SelectListItem {Text = "Sean", Value = "2"}
};
return View(vm);
}
และในมุมมองของคุณโดยตรงสามารถใช้สถานที่ให้บริการสำหรับEmployees
asp-items
@model MyViewModel
<form asp-controller="Home" asp-action="Create">
<label>Comments</label>
<input type="text" asp-for="Comments"/>
<label>Lucky Employee</label>
<select asp-for="EmployeeId" asp-items="@Model.Employees" >
<option>Please select one</option>
</select>
<input type="submit"/>
</form>
คลาสSelectListItem
เป็นของMicrosoft.AspNet.Mvc.Rendering
เนมสเปซ
ตรวจสอบให้แน่ใจว่าคุณใช้แท็กปิดที่ชัดเจนสำหรับองค์ประกอบที่เลือก หากคุณใช้วิธีปิดแท็กด้วยตนเองตัวช่วยแท็กจะแสดงองค์ประกอบ SELECT ที่ว่างเปล่า!
วิธีการด้านล่างจะไม่ทำงาน
<select asp-for="EmployeeId" asp-items="@Model.Employees" />
แต่สิ่งนี้จะได้ผล
<select asp-for="EmployeeId" asp-items="@Model.Employees"></select>
รับข้อมูลจากตารางฐานข้อมูลของคุณโดยใช้เฟรมเวิร์กเอนทิตี
ตัวอย่างข้างต้นกำลังใช้รายการฮาร์ดโค้ดสำหรับตัวเลือก ดังนั้นฉันคิดว่าฉันจะเพิ่มโค้ดตัวอย่างบางส่วนเพื่อรับข้อมูลโดยใช้ Entity framework เนื่องจากผู้ใช้จำนวนมากใช้
สมมติว่าวัตถุ DbContext ของคุณมีคุณสมบัติที่เรียกว่าEmployees
ซึ่งเป็นประเภทDbSet<Employee>
ที่Employee
คลาสเอนทิตีมีคุณสมบัติId
และName
คุณสมบัติเช่นนี้
public class Employee
{
public int Id { set; get; }
public string Name { set; get; }
}
คุณสามารถใช้แบบสอบถาม LINQ เพื่อรับพนักงานและใช้วิธีเลือกในนิพจน์ LINQ ของคุณเพื่อสร้างรายการSelectListItem
วัตถุสำหรับพนักงานแต่ละคน
public IActionResult Create()
{
var vm = new MyViewModel();
vm.Employees = context.Employees
.Select(a => new SelectListItem() {
Value = a.Id.ToString(),
Text = a.Name
})
.ToList();
return View(vm);
}
สมมติว่าcontext
เป็นวัตถุบริบท db ของคุณ รหัสมุมมองเหมือนด้านบน
ใช้ SelectList
บางคนชอบใช้SelectList
คลาสเพื่อเก็บไอเท็มที่จำเป็นในการเรนเดอร์ตัวเลือก
public class MyViewModel
{
public int EmployeeId { get; set; }
public SelectList Employees { set; get; }
}
ขณะนี้ในการดำเนินการ GET ของคุณคุณสามารถใช้ตัวSelectList
สร้างเพื่อเติมEmployees
คุณสมบัติของโมเดลมุมมอง ตรวจสอบให้แน่ใจว่าคุณกำลังระบุ dataValueField
และdataTextField
พารามิเตอร์
public IActionResult Create()
{
var vm = new MyViewModel();
vm.Employees = new SelectList(GetEmployees(),"Id","FirstName");
return View(vm);
}
public IEnumerable<Employee> GetEmployees()
{
// hard coded list for demo.
// You may replace with real data from database to create Employee objects
return new List<Employee>
{
new Employee { Id = 1, FirstName = "Shyju" },
new Employee { Id = 2, FirstName = "Bryan" }
};
}
นี่ฉันเรียกGetEmployees
วิธีการที่จะได้รับรายชื่อของวัตถุของพนักงานแต่ละคนที่มีId
และFirstName
คุณสมบัติและฉันจะใช้คุณสมบัติเหล่านั้นDataValueField
และDataTextField
ของSelectList
วัตถุที่เราสร้างขึ้น คุณสามารถเปลี่ยนรายการ hardcoded เป็นรหัสที่อ่านข้อมูลจากตารางฐานข้อมูล
รหัสการดูจะเหมือนกัน
<select asp-for="EmployeeId" asp-items="@Model.Employees" >
<option>Please select one</option>
</select>
แสดงองค์ประกอบ SELECT จากรายการสตริง
บางครั้งคุณอาจต้องการแสดงองค์ประกอบที่เลือกจากรายการสตริง ในกรณีนี้คุณสามารถใช้SelectList
Constructor ที่ใช้เวลาเท่านั้นIEnumerable<T>
var vm = new MyViewModel();
var items = new List<string> {"Monday", "Tuesday", "Wednesday"};
vm.Employees = new SelectList(items);
return View(vm);
รหัสการดูจะเหมือนกัน
การตั้งค่าตัวเลือกที่เลือก
บางครั้งคุณอาจต้องการตั้งค่าหนึ่งตัวเลือกเป็นตัวเลือกเริ่มต้นในองค์ประกอบ SELECT (ตัวอย่างเช่นในหน้าจอแก้ไขคุณต้องการโหลดค่าตัวเลือกที่บันทึกไว้ก่อนหน้านี้) ในการทำเช่นนั้นคุณอาจเพียงตั้งค่าEmployeeId
คุณสมบัติเป็นค่าของตัวเลือกที่คุณต้องการเลือก
public IActionResult Create()
{
var vm = new MyViewModel();
vm.Employees = new List<SelectListItem>
{
new SelectListItem {Text = "Shyju", Value = "11"},
new SelectListItem {Text = "Tom", Value = "12"},
new SelectListItem {Text = "Jerry", Value = "13"}
};
vm.EmployeeId = 12; // Here you set the value
return View(vm);
}
สิ่งนี้จะเลือกตัวเลือก Tom ในองค์ประกอบที่เลือกเมื่อมีการแสดงหน้าเว็บ
เลือกแบบเลื่อนลง
หากคุณต้องการแสดงรายการแบบหล่นลงเลือกหลายคุณสามารถเปลี่ยนคุณสมบัติรูปแบบมุมมองของคุณที่คุณใช้สำหรับasp-for
คุณลักษณะในมุมมองของคุณเป็นประเภทอาร์เรย์
public class MyViewModel
{
public int[] EmployeeIds { get; set; }
public List<SelectListItem> Employees { set; get; }
}
สิ่งนี้จะแสดงมาร์กอัพ HTML สำหรับองค์ประกอบที่เลือกพร้อมmultiple
แอตทริบิวต์ซึ่งจะทำให้ผู้ใช้สามารถเลือกได้หลายตัวเลือก
@model MyViewModel
<select id="EmployeeIds" multiple="multiple" name="EmployeeIds">
<option>Please select one</option>
<option value="1">Shyju</option>
<option value="2">Sean</option>
</select>
การตั้งค่าตัวเลือกที่เลือกในแบบเลือกหลายแบบ
คล้ายกับการเลือกครั้งเดียวตั้งค่าEmployeeIds
คุณสมบัติเป็นอาร์เรย์ของค่าที่คุณต้องการ
public IActionResult Create()
{
var vm = new MyViewModel();
vm.Employees = new List<SelectListItem>
{
new SelectListItem {Text = "Shyju", Value = "11"},
new SelectListItem {Text = "Tom", Value = "12"},
new SelectListItem {Text = "Jerry", Value = "13"}
};
vm.EmployeeIds= new int[] { 12,13} ;
return View(vm);
}
สิ่งนี้จะเลือกตัวเลือก Tom and Jerry ในองค์ประกอบเลือกหลายตัวเมื่อมีการแสดงหน้าเว็บ
ใช้ ViewBag เพื่อถ่ายโอนรายการ
หากคุณไม่ต้องการเก็บคุณสมบัติประเภทคอลเล็กชันเพื่อส่งผ่านรายการตัวเลือกไปยังมุมมองคุณสามารถใช้ ViewBag แบบไดนามิกเพื่อทำสิ่งนี้ ( นี่ไม่ใช่วิธีการที่ฉันแนะนำเป็นการส่วนตัวเนื่องจาก viewbag เป็นแบบไดนามิกและรหัสของคุณมักจะไม่ตรงกัน ข้อผิดพลาดของการพิมพ์ผิด )
public IActionResult Create()
{
ViewBag.Employees = new List<SelectListItem>
{
new SelectListItem {Text = "Shyju", Value = "1"},
new SelectListItem {Text = "Sean", Value = "2"}
};
return View(new MyViewModel());
}
และในมุมมอง
<select asp-for="EmployeeId" asp-items="@ViewBag.Employees">
<option>Please select one</option>
</select>
ใช้ ViewBag เพื่อถ่ายโอนรายการและตั้งค่าตัวเลือกที่เลือก
มันเหมือนกับข้างต้น สิ่งที่คุณต้องทำคือตั้งค่าคุณสมบัติ (ซึ่งคุณจะเชื่อมโยงกับดรอปดาวน์) เป็นค่าของตัวเลือกที่คุณต้องการเลือก
public IActionResult Create()
{
ViewBag.Employees = new List<SelectListItem>
{
new SelectListItem {Text = "Shyju", Value = "1"},
new SelectListItem {Text = "Bryan", Value = "2"},
new SelectListItem {Text = "Sean", Value = "3"}
};
vm.EmployeeId = 2; // This will set Bryan as selected
return View(new MyViewModel());
}
และในมุมมอง
<select asp-for="EmployeeId" asp-items="@ViewBag.Employees">
<option>Please select one</option>
</select>
จัดกลุ่มรายการ
เมธอดตัวเลือกแท็กตัวเลือกสนับสนุนตัวเลือกการจัดกลุ่มในรายการแบบหล่นลง สิ่งที่คุณต้องทำคือระบุ Group
ค่าคุณสมบัติของแต่ละSelectListItem
วิธีในวิธีการกระทำของคุณ
public IActionResult Create()
{
var vm = new MyViewModel();
var group1 = new SelectListGroup { Name = "Dev Team" };
var group2 = new SelectListGroup { Name = "QA Team" };
var employeeList = new List<SelectListItem>()
{
new SelectListItem() { Value = "1", Text = "Shyju", Group = group1 },
new SelectListItem() { Value = "2", Text = "Bryan", Group = group1 },
new SelectListItem() { Value = "3", Text = "Kevin", Group = group2 },
new SelectListItem() { Value = "4", Text = "Alex", Group = group2 }
};
vm.Employees = employeeList;
return View(vm);
}
ไม่มีการเปลี่ยนแปลงในรหัสมุมมอง เลือกผู้ช่วยแท็กในขณะนี้จะทำให้ตัวเลือกภายใน 2 optgroupรายการ