2016-01-06 9 views
63

में चयन टैग हेल्पर मैं ASP.NET कोर में चुनिंदा टैग सहायक के साथ कुछ मदद की जरूरत है।ASP.NET कोर MVC

मुझे लगता है कि मैं एक का चयन टैग सहायक के लिए बाध्य करने के लिए कोशिश कर रहा हूँ कर्मचारियों की एक सूची है। मेरे कर्मचारियों को एक 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; } 
} 

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

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

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

+1

बस कुछ मैं मैं जोड़ने चाहिए सोचा, यदि आप इसे बंद का चयन टैग तुरंत हमेशा साथ टैग बंद टैग सहायक के साथ काम नहीं किया काम करने के लिए नहीं दिखाई देता है RoughPlace

+0

बस एक टिप के लिए। मचान नियंत्रक आमतौर पर आपको ऐसी चीजों के सर्वोत्तम तरीके दिखाते हैं –

उत्तर

130

टैग सहायकों का चयन का उपयोग करना, आपके विचार

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

और अपने 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> 

वर्ग SelectListItemMicrosoft.AspNet.Mvc.Rendering नाम स्थान के अंतर्गत आता है। अपने डेटाबेस तालिका से

हो रही डेटा इकाई की रूपरेखा

उपरोक्त उदाहरण का उपयोग करते हुए विकल्प के लिए कठिन कोडित आइटम का उपयोग कर रहे हैं। तो मैंने सोचा कि मैं इकाई फ्रेमवर्क का उपयोग कर डेटा प्राप्त करने के लिए कुछ नमूना कोड जोड़ूंगा क्योंकि बहुत से लोग इसका उपयोग करते हैं।

के अपने DbContext वस्तु मान लेते हैं एक संपत्ति Employees कहा जाता है, प्रकार DbSet<Employee> जहां Employee इकाई वर्ग इस

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

आप एक LINQ क्वेरी का उपयोग कर सकते कर्मचारियों प्राप्त करने के लिए की तरह एक Id और Name संपत्ति है की है जो है और प्रत्येक कर्मचारी के लिए 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 अपने डाटाबेस संदर्भ वस्तु है। व्यू कोड ऊपर जैसा ही है।

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() 
{ 
    return new List<Employee> 
    { 
     new Employee { Id=1, FirstName="Shyju"}, 
     new Employee { Id=2, FirstName="Bryan"} 
    }; 
} 

यहाँ मैं एक Id और FirstName संपत्ति के साथ, प्रत्येक कर्मचारी वस्तुओं की एक सूची प्राप्त करने के लिए GetEmployees विधि बुला रहा हूँ और मैं DataValueField और SelectList वस्तु हमारे द्वारा बनाए गए DataTextField के रूप में उन गुणों का उपयोग करें। आप हार्डकोडेड सूची को उस कोड में बदल सकते हैं जो डेटाबेस तालिका से डेटा पढ़ता है।

दृश्य कोड एक ही हो जाएगा।

<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 उपयोग करके, आप ऐसा करने के लिए गतिशील ViewBag उपयोग कर सकते हैं। (यह मेरा viewbag के रूप में व्यक्तिगत रूप से सिफारिश की दृष्टिकोण गतिशील नहीं है और अपने कोड uncatched टाइपो त्रुटियों की संभावना है)

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> 

ग्रुपिंग आइटम

चुनिंदा टैग सहायक विधि ड्रॉपडाउन में समूह विकल्पों का समर्थन करता है। आपको बस इतना करना है, अपनी क्रिया विधि में प्रत्येक 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 आइटमों के अंदर विकल्प प्रस्तुत करेगा।

+0

धन्यवाद! पुराने रेजर सिंटैक्स की तरह, जहां हमें सिलेक्टलिस्ट में रूपांतरण करने की आवश्यकता है। एक बार फिर धन्यवाद। – Sam

+0

आपका स्वागत है! यदि आप अपने दृश्य मॉडल में संपत्ति के रूप में 'सूची ' का उपयोग करते हैं, तो आपको इसे दृश्य में रूपांतरित करने की आवश्यकता नहीं है। उत्तर में मेरा अपडेट देखें। – Shyju

+0

@Shyju क्या यह सूची 'संपत्ति प्रकार संबंधित मॉडल वर्ग (इस पोस्ट में Emoplyee क्लास) में होना चाहिए, साथ ही साथ? – nam

8

मैंने इसके लिए इंटरफेस और <options> टैग सहायक बनाया। इसलिए मैं IEnumerable<SelectListItem> में हर बार जब मैं <select> नियंत्रण को भरने के लिए है IEnumerable<T> आइटम परिवर्तित करने के लिए नहीं था।

<select asp-for="EmployeeId"> 
    <option value="">Please select...</option> 
    <options asp-items="@Model.EmployeesList" /> 
</select> 

और यह टैग सहायक आप अपनी कक्षा में है कि इंटरफ़ेस को लागू करने के लिए है के साथ काम करने के लिए:

और मैं यह खूबसूरती से काम करता है लगता है ...

उपयोग की तरह कुछ है

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

    public int Value { return Id; } 
    public string Text{ return FullName ; } 
} 

ये हैं की जरूरत कोड:

इंटरफ़ेस:

public interface IIntegerListItem 
{ 
    int Value { get; } 
    string Text { get; } 
} 

<options> टैग सहायक:

[HtmlTargetElement("options", Attributes = "asp-items")] 
public class OptionsTagHelper : TagHelper 
{ 
    public OptionsTagHelper(IHtmlGenerator generator) 
    { 
     Generator = generator; 
    } 

    [HtmlAttributeNotBound] 
    public IHtmlGenerator Generator { get; set; } 

    [HtmlAttributeName("asp-items")] 
    public object Items { get; set; } 

    public override void Process(TagHelperContext context, TagHelperOutput output) 
    { 
     output.SuppressOutput(); 
     // Is this <options /> element a child of a <select/> element the SelectTagHelper targeted? 
     object formDataEntry; 
     context.Items.TryGetValue(typeof(SelectTagHelper), out formDataEntry); 

     var selectedValues = formDataEntry as ICollection<string>; 
     var encodedValues = new HashSet<string>(StringComparer.OrdinalIgnoreCase); 
     if (selectedValues != null && selectedValues.Count != 0) 
     { 
      foreach (var selectedValue in selectedValues) 
      { 
       encodedValues.Add(Generator.Encode(selectedValue)); 
      } 
     } 

     IEnumerable<SelectListItem> items = null; 
     if (Items != null) 
     { 
      if (Items is IEnumerable) 
      { 
       var enumerable = Items as IEnumerable; 
       if (Items is IEnumerable<SelectListItem>) 
        items = Items as IEnumerable<SelectListItem>; 
       else if (Items is IEnumerable<IIntegerListItem>) 
        items = ((IEnumerable<IIntegerListItem>)Items).Select(x => new SelectListItem() { Selected = false, Value = ((IIntegerListItem)x).Value.ToString(), Text = ((IIntegerListItem)x).Text }); 
       else 
        throw new InvalidOperationException(string.Format("The {2} was unable to provide metadata about '{1}' expression value '{3}' for <options>.", 
         "<options>", 
         "ForAttributeName", 
         nameof(IModelMetadataProvider), 
         "For.Name")); 
      } 
      else 
      { 
       throw new InvalidOperationException("Invalid items for <options>"); 
      } 

      foreach (var item in items) 
      { 
       bool selected = (selectedValues != null && selectedValues.Contains(item.Value)) || encodedValues.Contains(item.Value); 
       var selectedAttr = selected ? "selected='selected'" : ""; 

       if (item.Value != null) 
        output.Content.AppendHtml($"<option value='{item.Value}' {selectedAttr}>{item.Text}</option>"); 
       else 
        output.Content.AppendHtml($"<option>{item.Text}</option>"); 
      } 
     } 
    } 
} 

कुछ टाइपो हो सकता है लेकिन उद्देश्य स्पष्ट मुझे लगता है कि है। मैं थोड़ा संपादित करने के लिए किया था।

3

आप 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; 
1

आप कई के लिए नीचे दिए गए कोड का उपयोग कर सकते का चयन करें:

<select asp-for="EmployeeId" multiple="multiple" asp-items="@ViewBag.Employees"> 
    <option>Please select</option> 
</select> 

आप भी उपयोग कर सकते हैं:

<select id="EmployeeId" name="EmployeeId" multiple="multiple" asp-items="@ViewBag.Employees"> 
     <option>Please select</option> 
    </select> 
0

मिल में: // प्राप्त: सार्वजनिक IActionResult बनाएं() {

 ViewData["Tags"] = new SelectList(_context.Tags, "Id", "Name"); 

     return View(); 
    } 

पोस्ट में: var चयनित आईडी = Request.Form ["टैग"];

देखें में:

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