এএসপি.নেট কোর এমভিসিতে ট্যাগ হেল্পার নির্বাচন করুন


162

আমার এএসপি.নেট কোরের নির্বাচিত ট্যাগ সহায়কের সাথে কিছু সহায়তা দরকার।

আমার কর্মীদের একটি তালিকা রয়েছে যা আমি একটি নির্বাচিত ট্যাগ সহায়ককে বাঁধতে চেষ্টা করছি। আমার কর্মীরা একটিতে রয়েছে 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="???" />

আমি এই সাহায্যে কিছু সহায়তার কৃতজ্ঞ। ধন্যবাদ।


3
আমার কিছু যুক্ত হওয়া উচিত বলে মনে হয়েছিল, আপনি যদি নির্বাচিত ট্যাগটি তত্ক্ষণাত বন্ধ করেন তবে এটি কাজ করবে না বলে মনে হয় </ সিলেক্ট> ট্যাগ
সহায়কটি

শুধু একটি টিপ। স্ক্যাফোোল্ডিং কন্ট্রোলারগুলি সাধারণত আপনাকে এই জাতীয় জিনিসগুলির সেরা উপায়গুলি দেখায়
নেভিল নাজিরেন

উত্তর:


379

একটি নির্বাচন উপাদান রেন্ডার করতে নির্বাচন করুন সহায়ক নির্বাচন করুন

আপনার জিইটি অ্যাকশনে আপনার ভিউ মডেলের একটি অবজেক্ট তৈরি করুন, 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]
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>

সত্তা ফ্রেমওয়ার্ক ব্যবহার করে আপনার ডাটাবেস টেবিল থেকে ডেটা প্রাপ্ত করা

উপরের উদাহরণগুলি বিকল্পগুলির জন্য হার্ড কোডিং আইটেমগুলি ব্যবহার করছে। সুতরাং আমি ভেবেছিলাম যে সত্ত্বার কাঠামো ব্যবহার করে ডেটা পেতে আমি কিছু নমুনা কোড যুক্ত করব কারণ অনেক লোক এটি ব্যবহার করে use

চলুন, আপনার DbContext বস্তুর একটি সম্পত্তি বলা অনুমান Employees, টাইপ করা হয়, যা DbSet<Employee>যেখানে Employeeসত্তা বর্গ একটি হয়েছে Idএবং Nameএই মত সম্পত্তি

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

আপনি কর্মচারীদের পেতে একটি লিনকিউ ক্যোয়ারী ব্যবহার করতে পারেন 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নেওয়া আপনার ডিবি কনটেক্সট অবজেক্ট। ভিউ কোডটি উপরের মতো।

নির্বাচন করা তালিকা ব্যবহার করা হচ্ছে Using

কিছু লোক SelectListবিকল্পগুলি রেন্ডার করতে প্রয়োজনীয় আইটেমগুলি ধরে রাখতে ক্লাস ব্যবহার করতে পছন্দ করে ।

public class MyViewModel
{
    public int EmployeeId { get; set; }
    public SelectList Employees { set; 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);

ভিউ কোডটি একই হবে।

নির্বাচিত বিকল্পগুলি সেট করা হচ্ছে

কিছু সময়, আপনি 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);
}

পৃষ্ঠাটি যখন রেন্ডার করা হয় তখন এটি নির্বাচনের উপাদানটিতে টম বিকল্পটি নির্বাচন করবে।

একাধিক নির্বাচন ড্রপডাউন

আপনি যদি কোনও মাল্টি সিলেক্ট ড্রপডাউন রেন্ডার করতে চান তবে আপনি কেবল নিজের ভিউ মডেল প্রপার্টিটি পরিবর্তন করতে পারেন যা আপনি asp-forআপনার দৃষ্টিতে বৈশিষ্ট্যের জন্য ব্যবহার করেন অ্যারের প্রকারে।

public class MyViewModel
{
    public int[] EmployeeIds { get; set; }
    public List<SelectListItem> Employees { set; get; }
}

এটি 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);
}

পৃষ্ঠাটি যখন রেন্ডার করা হবে তখন এটি মাল্টি সিলেক্ট এলিমেন্টে টম এবং জেরি বিকল্পটি নির্বাচন করবে।

আইটেমের তালিকা স্থানান্তর করতে ভিউব্যাগ ব্যবহার করা

যদি আপনি একটি সংগ্রহে টাইপ সম্পত্তি রাখার দৃশ্যে অপশনের তালিকা পাস করতে পছন্দ না করেন, তাহলে আপনি এটা করতে গতিশীল 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>

আইটেমের তালিকা স্থানান্তর করতে ও নির্বাচিত বিকল্পটি সেট করতে ভিউব্যাগ ব্যবহার করা

এটি উপরের মতোই। আপনাকে যা করতে হবে তা হল, সম্পত্তি নির্বাচন করুন (যার জন্য আপনি ড্রপডাউনকে বাধ্য করছেন) আপনি যে বিকল্পটি নির্বাচন করতে চান তার মান নির্ধারণ করুন।

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 অপটগ্রুপ আইটেমের মধ্যে বিকল্পগুলি রেন্ডার করবে ।


1
ধন্যবাদ! পুরানো রেজার সিনট্যাক্সের মতো ধরণের যেখানে আমাদের সিলেক্টলিস্টে রূপান্তর করতে হবে। আবার ধন্যবাদ.
স্যাম

7
আমি কীভাবে একটি খালি বিকল্প যুক্ত করতে চাইছি তা ব্যবহার করার জন্য ধন্যবাদ<option>Please select one</option>
সেরজ সাগান

5
মনে রাখবেন যে আপনার কাছে একটি ক্লোজিং </ সিলেক্ট> ট্যাগ থাকা আবশ্যক - আপনি <সিলেক্ট ... /> এর মতো সিলেক্ট ট্যাগটি স্ব-বন্ধ করার চেষ্টা করলে এটি কাজ করবে না। এছাড়াও, যদি আপনি "দয়া করে একটি নির্বাচন করুন" এর মতো একটি খালি বিকল্প ব্যবহার করেন তবে প্রয়োজনীয় ক্ষেত্রের বৈধতা কাজ করার জন্য আপনাকে খালি স্ট্রিংয়ের একটি মান দিতে হবে need
অ্যান্ডি

3
"নিশ্চিত করুন যে আপনি নির্বাচিত উপাদানটির জন্য একটি সুস্পষ্ট ক্লোজিং ট্যাগ ব্যবহার করছেন you আপনি যদি স্ব-ক্লোজিং ট্যাগ পদ্ধতির ব্যবহার করেন তবে ট্যাগ সহায়কটি একটি খালি SELECT উপাদান রেন্ডার করবে!" এটি আমার ক্ষেত্রে বিষয়টি ছিল। চিয়ার্স!
মারিউজ

2
এই উত্তরে এত প্রচেষ্টা করার জন্য ধন্যবাদ!
ভিদার

11

আমি এর জন্য একটি ইন্টারফেস এবং একটি <options>ট্যাগ সহায়ক তৈরি করেছি। সুতরাং প্রতিবার নিয়ন্ত্রণ নিয়ন্ত্রণ করতে গেলে আমাকে IEnumerable<T>আইটেমগুলিতে রূপান্তর করতে হয় নি ।IEnumerable<SelectListItem><select>

এবং আমি মনে করি এটি সুন্দরভাবে কাজ করে ...

ব্যবহারটি এমন কিছু:

<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>");
            }
        }
    }
}

কিছু টাইপও থাকতে পারে তবে লক্ষ্যটি স্পষ্ট আমি মনে করি। আমাকে কিছুটা সম্পাদনা করতে হয়েছিল।


4

আপনি 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;

4

নীচে আমার উত্তরটি প্রশ্নের সমাধান করে না তবে এটি সম্পর্কিত

যদি কেউ 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; }

রেজার পৃষ্ঠায়, আপনি 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>

3

আপনি একাধিক নির্বাচনের জন্য নীচে কোড ব্যবহার করতে পারেন :

<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

পাওয়া:

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>
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.