در این مقاله چگونگی استفاده از select tag helper و چگونگی اتصال آن با استفاده از مقادیر enum مانند دیگر منابع داده را نشان می دهیم که تمام قابلیت های ارائه شده توسط select tag helper در MVC 6 را پوشش می دهد.

تگ های Helper در ASP.NET MVC 6 معرفی شدند و یکی از تگ های helper ، Select tag helper است. Select tag helper برای تولید dropdown list استفاده می شود و جایگزینی برای Html.DropDownList است. در این پست خواهیم دید که چگونه از select tag helper استفاده کنیم و چگونه select tag helper را با model data یا مقادیر enum الحاق کنیم. همچنین چگونگی استفاده از image tag helper در ASP.NET Core MVC 1.0 را مطالعه کنید.

چگونه از select tag helper در ASP.NET MVC 6 استفاده کنیم؟

select tag helper از asp-for استفاده می کند تا نام ویژگی مدل خاصی را از HTML رندرشده استخراج کند برای مثال:

<select asp-for="TimeZone"></select>

سپس مدل شما باید یک ویژگی تعریف شده ی “TimeZone” داشته باشد.

public class RegisterViewModel
{
    [Display(Name = "TimeZone")]
    public string TimeZone { get; set; }
}

اما این یک لیست خالی بدون هیچ گزینه ای خواهد بود زیرا ما هیچ گزینه ای در لیست select پیدا نکردیم. چندین راه برای اضافه کردن گزینه به select tag helper وجود دارد.

مستقیما در Markup تعریف کنید

شما می توانید گزینه های خود را مستقیما در Markup تعریف کنید.

<select asp-for="TimeZone">
   <option value="-12">(UTC-12:00)</option>
   <option value="-11">(UTC-11:00)</option>
</select>

و زمانی که صفحه دوباره نمایش داده می شود گزینه های انتخاب شده به عنوان “selected” مشخص می شوند .

با استفاده از یک منبع داده، تعریف کنید

زمانی که شما می خواهید گزینه های لیست select خود را با هر جدول پایگاه داده ی دیگر یا هر لیست سمت سرور دیگری  الحاق کنید این روش معمول ترین روش است. در این مورد از ویژگی asp-items در تگ helper باید استفاده شود.

<select asp-for="TimeZone" asp-items="ViewBag.TimeZoneList"></select>

حال نیاز داریم که TimeZoneList را در ViewBag قرار دهیم. ابتدا اجازه دهید که یک لیست بسازیم و گزینه ها را به آن اضافه کنیم.

public List<SelectListItem> TimeZoneList { get; private set; }
public RegisterViewModel()
{
     TimeZoneList = new List<SelectListItem>();
     TimeZoneList.Add(new SelectListItem
     {
         Text = "Select",
         Value = ""
     });
     foreach (TimeZoneInfo z in TimeZoneInfo.GetSystemTimeZones())
     {
          TimeZoneList.Add(new SelectListItem
          {
               Text = z.DisplayName,
               Value = z.Id
          });
     }
}

و از controller خود لیست را به ViewBag اضافه کنید.

// GET: /Account/Register
[HttpGet]
[AllowAnonymous]
public IActionResult Register()
{
    RegisterViewModel rs = new RegisterViewModel();
    ViewBag.TimeZoneList = rs.TimeZoneList;
    return View();
}

الحاق مقادیر enum

شما همچنین می توانید مقادیر enum را به لیست select الحاق کنید.

public List<SelectListItem> PriorityList { get; private set; }
public RegisterViewModel()
{
    PriorityList = new List<SelectListItem>();
    PriorityList.Add(new SelectListItem
    {
       Text = "Select",
       Value = ""
    });
    foreach (ePriority eVal in Enum.GetValues(typeof(ePriority)))
    {
      PriorityList.Add(new SelectListItem { Text = Enum.GetName(typeof(ePriority), eVal), Value = eVal.ToString() });
    }
}

شما همچنین می توانید به جای ViewBag از یک تابع استاتیک برای الحاق در لیست Select استفاده کنید.

public static List<SelectItemList> GetTimeZoneList()
{
    List<SelectListItem> TimeZoneList = new List<SelectListItem>();
    TimeZoneList.Add(new SelectListItem
    {
       Text = "Select",
       Value = ""
    });
    foreach (TimeZoneInfo z in TimeZoneInfo.GetSystemTimeZones())
     {
          TimeZoneList.Add(new SelectListItem
          {
               Text = z.DisplayName,
               Value = z.Id
          });
     }
    return TimeZoneList;
}

از آنجا که توابع استاتیک تنها از طریق نام کلاس قابل دسترسی هستند بنابراین در این مثال خواهیم داشت: RegisterViewModel.GetTimeZoneList()

<select asp-for="TimeZone" 
   asp-items="RegisterViewModel.GetTimeZoneList()"></select>

آموزش asp.net mvc