CODEWITHSUNDEEP
c#razorasp.net-core-1.0tag-helpers
Darren Evans
Darren Evans

Reputation: 741

How to populate a Select taghelper in Razor using data from a SQL database table

I'm using ASP.NET Core 1.0 and EF Core 1.0 and have the following code-first class in my SQL database.

namespace GigHub.Models
{
  public class Genre
  {
    public byte Id { get; set; }

    [Required]
    [StringLength(255)]
    public string Name { get; set; }
  }
}

I also have the following ViewModel class I use in a Razor view form:

namespace GigHub.ViewModels
{
  public class GigFormViewModel
  {
    public string Venue { get; set; }
    public string Date { get; set; }
    public string Time { get; set; }
    public List<Genre> Genres { get; set; }
  }
}

I also have this controller:

using GigHub.Data;
using GigHub.ViewModels;
using Microsoft.AspNetCore.Mvc;

namespace GigHub.Controllers
{
  public class GigsController : Controller
  {
    private readonly ApplicationDbContext _context;

    public GigsController(ApplicationDbContext context)
    {
      _context = context;
    }
    public IActionResult Create()
    {
      var vm = new GigFormViewModel();

      // Need to get my Genre list from the DbSet<Genre> in my database context injected above
      // into the GigFormViewModel for the Select taghelper to consume

      return View(vm);
    }
  }
}

I have my Razor view set up to use the ViewModel fine but I'm unsure how the Select taghelper code below should be set up to access the Genre property.

    <div class="form-group">
      <label asp-for="????" class="col-md-2 control-label"></label>
      <div class="col-md-10">
        <select asp-for="????" asp-items="????" class="form-control"></select>
        <span asp-validation-for="????" class="text-danger" />
      </div>
    </div>

I'm basically having trouble grokking how to get my list of genres from my database into the ViewModel property in a form that the Select taghelper asp-items= can consume. The many trial & error contortions I've gone through generally result in conversion issues going from generic List<> type to MVCs SelectListItem type. I suspect my ViewModel Genre class needs adjusting but my research thus far has only resulted in articles covering previous versions of ASP.NET and Entity Framework and I struggle to map them to ASP.NET core 1.0 RC2 and EF Core 1.0.

Upvotes: 1

Views: 3511

Answers (1)

Reza Aghaei
Reza Aghaei

Reputation: 125247

You can use asp-for to specify the model property name for the select element and asp-items to specify the option elements. 

<select asp-for="SomeFiles" asp-items="Model.SomeOptions"></select>

You can also use ViewBag.SomeOptions if you don't want to add the SomeOptions filed to the mode.

For more information take a look at The Select Tag Helper documentation.

Example

View

<select asp-for="Country" asp-items="Model.Countries"></select>

Model

using Microsoft.AspNetCore.Mvc.Rendering;
using System.Collections.Generic;

namespace FormsTagHelper.ViewModels
{
    public class CountryViewModel
    {
        public string Country { get; set; }

        public List<SelectListItem> Countries { get; set; }
    }
}

Controller

The Index method initializes the CountryViewModel, sets the selected country and list of countries and passes the model to the Index view.

public IActionResult Index()
{
    var model = new CountryViewModel();
    model.Country = "CA";
    model.Countries = db.Countries
                        .Select(x => new SelectListItem { Value = x.Id, Text = x.Name })
                        .ToList();

    return View(model);
}

Upvotes: 1

Related Questions