चयन तत्व का चयन करने के लिए टैग हेल्पर्स का उपयोग करना
अपने 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 asp-for="EmployeeId" asp-items="@Model.Employees" />
लेकिन यह काम करेगा।
<select asp-for="EmployeeId" asp-items="@Model.Employees"></select>
इकाई ढांचे का उपयोग करके अपने डेटाबेस तालिका से डेटा प्राप्त करना
उपरोक्त उदाहरण विकल्पों के लिए हार्ड कोडित वस्तुओं का उपयोग कर रहे हैं। इसलिए मैंने सोचा कि मैं कुछ नमूना कोड जोड़ूंगा ताकि इकाई ढांचे का उपयोग करके डेटा प्राप्त किया जा सके क्योंकि बहुत सारे लोग इसका उपयोग करते हैं।
चलो अपने DbContext वस्तु एक संपत्ति कहा जाता है मान लेते हैं Employees, इस प्रकार का है जो DbSet<Employee>जहां Employeeइकाई वर्ग एक है Idऔर Nameइस तरह की संपत्ति
public class Employee
{
public int Id { set; get; }
public string Name { set; get; }
}
आप कर्मचारियों को प्राप्त करने के लिए एक LINQ क्वेरी का उपयोग कर सकते हैं और SelectListItemप्रत्येक कर्मचारी के लिए वस्तुओं की सूची बनाने के लिए अपनी LINQ अभिव्यक्ति में चयन विधि का उपयोग कर सकते हैं ।
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वस्तु हम बनाया। आप हार्डकोड सूची को एक कोड में बदल सकते हैं जो डेटाबेस तालिका से डेटा पढ़ता है।
व्यू कोड समान होगा।
<select asp-for="EmployeeId" asp-items="@Model.Employees" >
<option>Please select one</option>
</select>
तार की सूची से एक चयन तत्व का प्रतिपादन करें।
कभी-कभी आप स्ट्रिंग्स की एक सूची से एक चुनिंदा तत्व को प्रस्तुत करना चाह सकते हैं। उस स्थिति में, आप SelectListकंस्ट्रक्टर का उपयोग कर सकते हैं जो केवल लेता हैIEnumerable<T>
var vm = new MyViewModel();
var items = new List<string> {"Monday", "Tuesday", "Wednesday"};
vm.Employees = new SelectList(items);
return View(vm);
व्यू कोड समान होगा।
चयनित विकल्प सेट करना
कुछ बार, आप एक विकल्प को सेलेक्ट एलिमेंट में डिफ़ॉल्ट विकल्प के रूप में सेट करना चाहते हैं (उदाहरण के लिए, एक एडिट स्क्रीन में, आप पहले से सेव किए गए ऑप्शन वैल्यू को लोड करना चाहते हैं)। ऐसा करने के लिए, आप केवल उस 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);
}
जब पृष्ठ प्रदान किया जाता है तो यह विकल्प तत्व में विकल्प टॉम का चयन करेगा।
बहु चयन ड्रॉपडाउन
यदि आप एक बहु चयन ड्रॉपडाउन प्रस्तुत करना चाहते हैं, तो आप अपनी व्यू मॉडल प्रॉपर्टी को बदल सकते हैं, जिसे आप asp-forअपने व्यू में एट्रिब्यूट टाइप के लिए प्रयोग करते हैं।
public class MyViewModel
{
public int[] EmployeeIds { get; set; }
public List<SelectListItem> Employees { set; get; }
}
यह multipleगुण के साथ चयनित तत्व के लिए HTML मार्कअप को प्रस्तुत करेगा जो उपयोगकर्ता को कई विकल्पों का चयन करने की अनुमति देगा।
@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);
}
जब पृष्ठ प्रदान किया जाता है तो यह मल्टी सेलेक्ट एलिमेंट में टॉम एंड जेरी विकल्प का चयन करेगा।
आइटम की सूची को स्थानांतरित करने के लिए ViewBag का उपयोग करना
यदि आप विकल्पों की सूची को पास करने के लिए संग्रह प्रकार की संपत्ति रखना पसंद नहीं करते हैं, तो आप ऐसा करने के लिए गतिशील ViewB का उपयोग कर सकते हैं। ( यह मेरा व्यक्तिगत रूप से अनुशंसित दृष्टिकोण नहीं है क्योंकि व्यूबैग गतिशील है और आपका कोड अनियंत्रित है। टाइपो त्रुटियां )
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 ऑप्टग्रुप आइटम के अंदर विकल्पों को प्रस्तुत करेगा ।