c# - ASP.NET Core MVC में टैग हेल्पर का चयन करें




asp.net-core asp.net-core-mvc (4)

चयन तत्व का चयन करने के लिए टैग हेल्पर्स का उपयोग करना

अपनी 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);
}

और आपके विचार में, EmployeeList प्रॉपर्टी से एक नया SelectList ऑब्जेक्ट बनाएं और 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 , जिसे Employees कहा जाता है, जो DbSet<Employee> प्रकार का है, जहाँ Employee वर्ग की Id और Id जैसी संपत्ति है

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 एक्शन में, आप व्यू मॉडल के Employees प्रॉपर्टी को पॉप्युलेट करने के लिए SelectList कंस्ट्रक्टर का उपयोग कर सकते हैं। सुनिश्चित करें कि आप 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 गुण हैं और मैं उन गुणों का उपयोग करता हूं जो हमने बनाई गई SelectList ऑब्जेक्ट के SelectList और 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>

आइटम समूहीकरण

चयन टैग सहायक विधि एक ड्रॉपडाउन में समूहीकरण विकल्पों का समर्थन करती है। आपको बस इतना करना है कि अपनी कार्य पद्धति में प्रत्येक SelectListItem के Group गुण मान को निर्दिष्ट करें।

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 आइटम के अंदर विकल्पों को प्रस्तुत करेगा।

मुझे ASP.NET कोर में सेलेक्ट टैग हेल्पर की कुछ मदद चाहिए।

मेरे पास कर्मचारियों की एक सूची है जो मैं एक चुनिंदा टैग सहायक को बांधने की कोशिश कर रहा हूं। मेरे कर्मचारी एक List<Employee> EmployeesList और चयनित मूल्य EmployeeId संपत्ति में जाएंगे। मेरा दृश्य मॉडल इस तरह दिखता है:

public class MyViewModel
{
   public int EmployeeId { get; set; }
   public string Comments { get; set; }
   public List<Employee> EmployeesList {get; set; }
}

मेरा कर्मचारी वर्ग ऐसा दिखता है:

public class Employee
{
   public int Id { get; set; }
   public string FullName { get; set; }
}

मेरा सवाल यह है कि मैं ड्रॉप डाउन सूची में FullName प्रदर्शित करते समय अपने चुनिंदा टैग सहायक को Id रूप में मान का उपयोग करने के लिए कैसे कहूं?

<select asp-for="EmployeeId" asp-items="???" />

मैं इस के साथ कुछ मदद की सराहना करेंगे। धन्यवाद।


आप IHtmlHelper.GetEnumSelectList का भी उपयोग कर सकते हैं

    // Summary:
    //     Returns a select list for the given TEnum.
    //
    // Type parameters:
    //   TEnum:
    //     Type to generate a select list for.
    //
    // Returns:
    //     An System.Collections.Generic.IEnumerable`1 containing the select list for the
    //     given TEnum.
    //
    // Exceptions:
    //   T:System.ArgumentException:
    //     Thrown if TEnum is not an System.Enum or if it has a System.FlagsAttribute.
    IEnumerable<SelectListItem> GetEnumSelectList<TEnum>() where TEnum : struct;

नीचे दिए गए मेरे जवाब से सवाल हल नहीं होता है लेकिन यह संबंधित है।

यदि कोई क्लास मॉडल के बजाय enum का उपयोग कर रहा है, तो इस उदाहरण की तरह:

public enum Counter
{
    [Display(Name = "Number 1")]
    No1 = 1,
    [Display(Name = "Number 2")]
    No2 = 2,
    [Display(Name = "Number 3")]
    No3 = 3
}

और जमा करते समय मूल्य प्राप्त करने के लिए एक संपत्ति:

public int No { get; set; }

रेज़र पेज में, आप Enum गुण प्राप्त करने के लिए Html.GetEnumSelectList<Counter>() का उपयोग कर सकते हैं।

<select asp-for="No" asp-items="@Html.GetEnumSelectList<Counter>()"></select>

यह निम्नलिखित HTML उत्पन्न करता है:

<select id="No" name="No">
    <option value="1">Number 1</option>
    <option value="2">Number 2</option>
    <option value="3">Number 3</option>
</select>

प्राप्त करें:

public IActionResult Create()
{
    ViewData["Tags"] = new SelectList(_context.Tags, "Id", "Name");
    return View();
}

पोस्ट में:

var selectedIds= Request.Form["Tags"];

दृश्य में :

<label>Tags</label>
<select  asp-for="Tags"  id="Tags" name="Tags" class="form-control" asp-items="ViewBag.Tags" multiple></select>




tag-helpers