How to fill data i get it on pge model on drop down list on view ?

Question

I worked on asp.net mvc razor pages . I face issue I can't pass data from page model to view

what i try

1- I create view model as

public class AddUserViewModel
    {
       
        public int SelectedBranchId { get; set; }
        public List<Branch> Branches { get; set; }
    }

2-Branch Model

public class Branch
    {
        [Key]
        public string iBranchCode { get; set; }
        public string vBranchDesc { get; set; }
    }

3 - on razor pages AddUser.cshtml.cs I get 81 rows on userModel.Branches

public class AddUserModel : PageModel
    {
        [BindProperty]
        public AddUserViewModel userModel { get; set; }
        private readonly ADCContext _db;
        public AddUserModel(ADCContext db)
        {
            _db = db;
            userModel = new AddUserViewModel();
        }
        public void OnGet()
        {
            userModel.Branches= _db.Branch.ToList();// from debug get 81 rows
           //userModel.Branches have 81 rows
        }
       }

4 - on view AddUser.cshtml (main issue )

How to access userModel.Branches Branch List from page model to view

meaning How to fill (81 rows) on drop down list on view from data I received on page model

@page "/AddUser"
@model UC.ADC.Host.Pages.Users.AddUserModel

 <div class="form-group row">
            <label for="branch-select" class="col-sm-1 col-form-label" style="font-size:15px;font-family: 'Open Sans', sans-serif;font-weight: bold;">Branch</label>
            <div class="col-sm-3">
                <select id="branch-select" name="SelectedBranchId"  class="form-control" style=" margin-left:10px;font-size:15px;font-family: 'Open Sans' , sans-serif;font-weight: bold;">
                    <option value="">-- Select Branch --</option>
                    
                    @foreach (var branch in Model.????)
                    {
                        <option value="@branch.iBranchCode">@branch.vBranchDesc</option>
                    }
                </select>
            </div>
        </div>

Answer 1

Hi @ahmed salah

How to access userModel.Branches Branch List from page model to view

Since in the AddUser.cshtml.cs file, the property name is userModel, to access the branches, you should also access the data from the userModel.

Try to use the following code:

                <select id="branch-select" name="SelectedBranchId"  class="form-control" style=" margin-left:10px;font-size:15px;font-family: 'Open Sans' , sans-serif;font-weight: bold;">
                    <option value="">-- Select Branch --</option>
                    
                    @foreach (var branch in Model.userModel.Branches)
                    {
                        <option value="@branch.iBranchCode">@branch.vBranchDesc</option>
                    }
                </select>

The output as below:

---

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,

Dillion

Answer 2

with Razor pages, the page is view model. the the Model, AddUserViewModel is the property userModel. is its:

<select id="branch-select" name="userModel.SelectedBranchId"  class="form-control" style=" margin-left:10px;font-size:15px;font-family: 'Open Sans' , sans-serif;font-weight: bold;">
   @foreach (var branch in userModel.Branches)
   {
      <option value="@branch.iBranchCode">@branch.vBranchDesc</option>
   }
</select>

there is really no reason for the extra class, I'd remove it and build a select item list

public class AddUserModel : PageModel
{
        [BindProperty]
        public int SelectedBranchId { get; set; }
 
        public List<SelectListItems> BranchList { get; set; }
        private readonly ADCContext _db;

        public AddUserModel(ADCContext db)
        {
            _db = db;
        }

        public async Task OnGetAsync()
        {
            BranchList = await _db.Branch.Select(b => new SelectListItem
            {
                Value = b.iBranchCode.ToString(),
                Text = b.vBranchDesc
            } ToList();
        }
}

<select id="branch-select" 
	asp-for="SelectedBranchId" 
	asp-items="Model.BranchList"
    class="form-control" 
    style="margin-left:10px;font-size:15px;font-family:'Open Sans',sans-serif;font-weight: bold;"
/>