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

  • Question

  • User-1063667917 posted

    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.

    Sunday, July 26, 2020 8:25 PM

Answers

  • User711641945 posted

    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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, July 27, 2020 7:18 AM

All replies

  • User475983607 posted

    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

    Sunday, July 26, 2020 9:45 PM
  • User711641945 posted

    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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, July 27, 2020 7:18 AM
  • User-474980206 posted

    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.

    Monday, July 27, 2020 2:41 PM