How to update shared view adminheader.cshtml from a model

Question

I've added a drop down into my shared adminheader.cshtl view and it needs to be dynamically updated from data from a table. So when I use another view like routeplan.cshtml I load the view from routeplancontroller which uses routeplanmodel. It would follow that I need a controller for adminheader.cshtml which would then get confusing. What would be the best way to update the adminheadermodel.cs and subsequently the adminheader.cshtml from routeplancontroller in addition to loading routeplanmodel?

This is the model for adminheader

public class AdminHeaderModel
{
    public string UserId { get; set; } = null!;
    public string Domain { get; set; } = null!;
    public string Link_Type { get; set; } = null!;
    public string Icon { get; set; } = null!;
}

This is the code to load to drop down in adminheader.cshtml

@foreach (AdminHeaderModel hdr in Model)
{
    <div class="dropdown-item light-box-container account selected" rel=".com" data-id=@hdr.DataId>
       <div class="account-info">
          <img src=@hdr.Icon>
          <span class="account-name">@hdr.Domain</span>
       </div>
       <div class="account-actions">
          if (hdr.Link_Type == "0")
          {
               <div class="account-status pass">Connected</div>
               <div class="account-select"><i class="fas fa-check-circle"></i></div>
          }
          else
          {
               <div class="account-status warn"><i class="fas fa-exclamation"></i>Connect</div>
               <div class="account-select"><i class="far fa-check-circle"></i></div>
          }
       </div>                
    </div> 
 }   

Could someone please help me figure out the easiest way to load my adminheadermodel from my routeplancontroller or if I need an adminheadercontroller, how to implement it.

Answer 1

If you want your adminheader.cshtml update data from database dynamically, You can use View Components to achieve it.

First create a folder called ViewComponents, Then create a class called AdminheaderViewComponent in this folder.

public class AdminheaderViewComponent : ViewComponent
    {
        //inject your dbcontext into it.
        private readonly ApplicationDbContext _context;
        public AdminheaderViewComponent(ApplicationDbContext dbContext)
        {
            _context = dbContext;
        }

        public IViewComponentResult Invoke()
        {
            //from your view code, adminheader.cshtml seems to receive list of AdminHeaderModel, So i return List<AdminHeaderModel> to this view.
            var resut = _context.adminHeaderModels.ToList();
            return View("adminheader",resut);
        }
    }

Put your adminheader.cshtml under this construct.

Use @await Component.InvokeAsync("Adminheader") to call adminheader.cshtml in other page.

Gif Demo

From above gif demo, I call adminheader.cshtml in index.cshtml, After i insert a AdminHeaderModel into database in index.cshtml, adminheader.cshtml will dynamically updated data from a database. Hope this demo can help you solve this issue.