Simple sample of how to populate DropDownList in Razor MVVM (Core 3) RSS

• • Reply
  GeorgeClass

  Member

  30 Points

  183 Posts

  Simple sample of how to populate DropDownList in Razor MVVM (Core 3)

  Jul 26, 2020 08:25 PM|GeorgeClass|LINK

  Hi !,

  I am learning Razor MVVM because is more like WebForms.

  But I just can't find a simple sample of how to fill a dropdownlist in Razor MVVM, this was pretty easy in Webforms, all I see are complicated samples to do an easy task.

  Any help would be appreciated.

• • Reply
  mgebhard

  All-Star

  52971 Points

  23571 Posts

  Re: Simple sample of how to populate DropDownList in Razor MVVM (Core 3)

  Jul 26, 2020 09:45 PM|mgebhard|LINK

  Using an MVVM pattern does not change Razor Pages or HTML fundamentals.   A DropDownList or HTML select has a name and options.  The standard pattern for populating a select's options is using the SelectList or List<SelectListItem>. 

  https://www.learnrazorpages.com/razor-pages/tag-helpers/select-tag-helper

• • Reply
  Rena Ni

  Contributor

  2690 Points

  874 Posts

  Re: Simple sample of how to populate DropDownList in Razor MVVM (Core 3)

  Jul 27, 2020 07:18 AM|Rena Ni|LINK

  Hi GeorgeClass,

  If you want to populate the dropdownlist with the data from database,here is a simple demo like below:

  Model:

  public class ListStatus
  {
      public int Id { get; set; }
      public string SourceStatus { get; set; }
  
  }

  Index.cshtml:

  @page
  @model IndexModel
  <table>
      <tr>
          <td>@Html.LabelFor(m => m.ListStatus.SourceStatus)</td>
          <td>@Html.DropDownListFor(m => m.ListStatus.SourceStatus, ViewBag.StatusOptions as IEnumerable<SelectListItem>, new { @style = "width:200px;" })</td>
      </tr>
  </table>

  Index.cshtml.cs:

  public class IndexModel : PageModel
  {
  
      private readonly YourDbContext _context;
      public IndexModel(YourDbContext context)
      {
          _context = context;
      }
  
      [BindProperty]
      public ListStatus ListStatus { get; set; }      
  
      public void OnGet()
      {
          var selectStatusList = new SelectList(_context.ListStatus.ToList(), "Id", "SourceStatus");
          ViewData["StatusOptions"] = selectStatusList;
      }
  }

  YourDbContext:

  public class YourDbContext: DbContext
  {
      public YourDbContext(DbContextOptions<YourDbContext> options)
          : base(options)
      {
      }
  
      public DbSet<ListStatus> ListStatus { get; set; }
  }

  Register in Startup.cs(my database is mssql):

  services.AddDbContext<YourDbContext>(options =>
          options.UseSqlServer(Configuration.GetConnectionString("Razorpageproj3_1Context")));

  appSettings.json:

  "ConnectionStrings": {
      "Razorpageproj3_1Context": "Server=(localdb)\\mssqllocaldb;Database=YourDatabaseName;Trusted_Connection=True;MultipleActiveResultSets=true"
  }

  Best Regards,

  Rena

  .NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.
• • Reply
  bruce (sqlwo...

  All-Star

  58124 Points

  15640 Posts

  Re: Simple sample of how to populate DropDownList in Razor MVVM (Core 3)

  Jul 27, 2020 02:41 PM|bruce (sqlwork.com)|LINK

  The models in Razor pages are really messages. there is no state persistence like webform serialization of the control state to hidden fields. The postback model only has the values form binding is able to set.

  you will need to recreate the dropdown list data on posback.

  bruce (sqlwork.com)