Question 86862 in ASP.NET Question posted in
The official documentation can be found here.

Binding Dropdown list on Razor Page to Database Table – Asp.net

I am an absolute beginner with razor pages, asp.net and visual studio. I followed a wonderful tutorial on asp.net and razor pages to get me started on YouTube.

However, now I am stuck. What I am trying to do:

I have a page Create.cshtml that users input data into and it posts to a database table (InfoSite). This works well, but I wanted to create a drop-down list for one of the fields. I can create a static list the drop-down, but I would like to create a drop-down list that is based on the values in another database table (ResCategory), so that users can update those ResCategory values if needed and they will then automatically appear in the drop-down.

I now have part of it working. The drop-down list on the Create.cshtml page will read the values in the ResCategory table, but when I click the Submit button to add that record, it will not post/bind the drop-down box selection to the InfoSite table. It posts/binds everything else from that page though.

Likely, I am missing something simple, but just cannot figure out what. One of my biggest issues right now is not knowing "where" certain code needs to go yet!

Here is what I have so far:

On the Create.cshtml page, I have this code:

<select id="ResType" asp-items="@(new SelectList(Model.displayResCatdata,"ID","Description"))" class="form-select">  
                        <option value="" selected disabled>---Select Residence Type---</option>
</select>

On the Create.cshtml.cs, I have this:

public IEnumerable<ResCategory> displayResCatdata { get; set; }

    public async Task OnGet()
    {
        displayResCatdata = await _db.ResCategory.ToListAsync();
    }

    public async Task<IActionResult> OnPost()
    {
        await _db.InfoSite.AddAsync(InfoSite);
        await _db.SaveChangesAsync();
        TempData["success"] = "Site Information added successfully.";
        return RedirectToPage("Index");
    }

And, then on my InfoSite.cs, I have:

    public class InfoSite
    {
        [Key]
        public int ID { get; set; }
        [Required]
        public string Name { get; set; }
        [Display(Name = "Office Type")]
        public string? Specialty { get; set; }
        [Display(Name = "Res Type")]
        public string? ResType { get; set; }
        [Display(Name = "Res Sub Type")]
        public string? ResSubType { get; set; }.....

I’m sure that I shouldn’t be putting "public string? for the Res Type { get; set; }, but I am not sure what to use. Also, I think something must be off somewhere else.

Could someone please give specific instruction as to what I may be missing and EXACTLY where I might be missing it?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    After much trial and error and reading, reading, reading, I have answered my own question.

    What was missing was actually on one tiny thing on my Create.cshtml page.

    I was missing the 'asp-for' in order to bind the selected choice. So, instead of:

    <select id="ResType" asp-items="@(new SelectList(Model.displayResCatdata,"ID","Description"))" class="form-select">  
                        <option value="" selected disabled>---Select Residence Type---</option>
</select>

    I should have had:

    <select asp-for="InfoSite.ResType" id="Select1" class="form-select" asp-items="@(new SelectList(Model.DisplayResCatData,"ID", "Description"))"><option value="" selected disabled>---Select Residence Type---</option></select>

    My only remaining question is that even though the ID is being bound, I would prefer to be able to bind the description as that is what I would really like in the InfoSite table, but at least it is binding. That will be a question for another thread!


  2. 0

    You are not passing the data to your method in the controller.

    The solution:

    public async Task<IActionResult> OnPost(InfoSite InfoSite)
{
    await _db.InfoSite.AddAsync(InfoSite);
    await _db.SaveChangesAsync();
    TempData["success"] = "Site Information added successfully.";
    return RedirectToPage("Index");
}

    Or

    public IActionResult OnPost()
{
    var infoSite = new InfoSite();
    return this.View(infoSite);
}

public async Task<IActionResult> OnPost(InfoSite InfoSite)
{
    await _db.InfoSite.AddAsync(InfoSite);
    await _db.SaveChangesAsync();
    TempData["success"] = "Site Information added successfully.";
    return RedirectToPage("Index");
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search