How to send additional model data to a razor page in Asp.Net Core 6

Sherpa 221 Reputation points
2024-06-26T15:36:46.6833333+00:00

I am working on Asp.Net Core 6 MVC. I am new to Razor pages. On the Register.cshtml page, as part of the identity, it has the following line which is used to gather user-entered values and save them in the database on the Register.cshtml.cs

@page

@model RegisterModel

Now I want to change two of the input fields into dropdownboxes. For that, I have created a View Model (VM) with SelectListItem data populated from the database. The VM code is shown below.

public class RegistrationVM

{

[ValidateNever]

public IEnumerable<SelectListItem> TitleList { get; set; }

[ValidateNever]

public IEnumerable<SelectListItem> SalutationList { get; set; }

}

I would like to know how to pass this VM to the cshtml page in addition to the existing RegisterModel and populate the dropdowns.

ASP.NET Core
ASP.NET Core
A set of technologies in the .NET Framework for building web applications and XML web services.
4,338 questions
0 comments
Accepted answer
  1. SurferOnWww 2,326 Reputation points
    2024-06-26T23:00:56.28+00:00

    The following Miccrosoft document is helpful:

    The Select Tag Helper

    I understand that you have obtained the Register.cshtml and Register.cshtml.cs by scaffolding according to the Microsoft document Scaffold Identity in ASP.NET Core projects.

    If my understanding is correct you will be able to add the dropdowns to the Register razor page as described below.

    (1) Add properties to the Register.cshtml.cs, as follow:

    enter image description here

    enter image description here

    (2) Add select tag helpers to the Register.cshtml, as follows:

    enter image description here

    (3) Result is:

    enter image description here

    (4) User-selected Salutation and Title are obtained together with email and password in the OnPostAsync method, as shown blow:

    enter image description here

    0 comments

2 additional answers

Sort by: Most helpful
Most helpful Newest Oldest
  1. Bruce (SqlWork.com) 60,201 Reputation points
    2024-06-26T17:16:31.81+00:00

    you pass data to razor view via ViewData and ViewBag collections or the Model property passed to the page via the action

    return View(myModel); // type should match @model type attribute in view

  2. Ping Ni-MSFT 3,040 Reputation points Microsoft Vendor
    2024-06-27T02:26:33.5466667+00:00

    Hi @Sherpa,

    1.Modify the Register.cshtml.cs file

    public class RegisterModel : PageModel
{
    [BindProperty]
    public InputModel Input { get; set; }
    public RegistrationVM RegistrationVM { get; set; }
    public class InputModel
    {
        // Existing properties
        public string Title { get; set; }
        public string Salutation { get; set; }
    }
    public async Task OnGetAsync()
    {
        // Populate the RegistrationVM with SelectListItems
        RegistrationVM = new RegistrationVM
        {
            TitleList = new List<SelectListItem>
            {
                new SelectListItem { Value = "title1", Text = "title1" },
                new SelectListItem { Value = "title2", Text = "title2" },
                new SelectListItem { Value = "title3", Text = "title3" }
            },
            SalutationList = new List<SelectListItem>
            {
                new SelectListItem { Value = "Salutation1", Text = "Salutation1" },
                new SelectListItem { Value = "Salutation2", Text = "Salutation2" }
            }
        };
    }
    public async Task<IActionResult> OnPostAsync()
    {
        // Handle registration logic
        return RedirectToPage("Index");
    }
}

    2.Modify the Register.cshtml file

    @page
@model RegisterModel
@{
    ViewData["Title"] = "Register";
}
<h1>@ViewData["Title"]</h1>
<form method="post">
    <div>
        <label asp-for="Input.Title"></label>
        <select asp-for="Input.Title" asp-items="Model.RegistrationVM.TitleList"></select>
        <span asp-validation-for="Input.Title"></span>
    </div>
    <div>
        <label asp-for="Input.Salutation"></label>
        <select asp-for="Input.Salutation" asp-items="Model.RegistrationVM.SalutationList"></select>
        <span asp-validation-for="Input.Salutation"></span>
    </div>
    <button type="submit">Register</button>
</form>

    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    Best regards,
    Rena

    0 comments