如何从模型更新共享视图 adminheader.cshtml

huangapple go评论68阅读模式
英文:

How to update shared view adminheader.cshtml from a model

问题

I've translated the content you provided. Here's the translated text:

我在我的shared adminheader.cshtl视图中添加了一个下拉菜单,它需要从表格中的数据动态更新。因此,当我使用像routeplan.cshtml这样的另一个视图时,我会从routeplancontroller加载视图,该控制器使用routeplanmodel。因此,我需要一个用于adminheader.cshtml的控制器,这可能会让人感到困惑。如何最好地从routeplancontroller更新adminheadermodel.cs以及随后更新adminheader.cshtml呢?

这是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!;
}

这是在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> 
 }

请问是否有人能够帮助我找出从routeplancontroller加载adminheadermodel的最简单方法,或者是否需要一个adminheadercontroller以及如何实现它。

英文:

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)
{
    &lt;div class=&quot;dropdown-item light-box-container account selected&quot; rel=&quot;.com&quot; data-id=@hdr.DataId&gt;
       &lt;div class=&quot;account-info&quot;&gt;
          &lt;img src=@hdr.Icon&gt;
          &lt;span class=&quot;account-name&quot;&gt;@hdr.Domain&lt;/span&gt;
       &lt;/div&gt;
       &lt;div class=&quot;account-actions&quot;&gt;
          if (hdr.Link_Type == &quot;0&quot;)
          {
               &lt;div class=&quot;account-status pass&quot;&gt;Connected&lt;/div&gt;
               &lt;div class=&quot;account-select&quot;&gt;&lt;i class=&quot;fas fa-check-circle&quot;&gt;&lt;/i&gt;&lt;/div&gt;
          }
          else
          {
               &lt;div class=&quot;account-status warn&quot;&gt;&lt;i class=&quot;fas fa-exclamation&quot;&gt;&lt;/i&gt;Connect&lt;/div&gt;
               &lt;div class=&quot;account-select&quot;&gt;&lt;i class=&quot;far fa-check-circle&quot;&gt;&lt;/i&gt;&lt;/div&gt;
          }
       &lt;/div&gt;                
    &lt;/div&gt; 
 }   

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.

答案1

得分: 0

如果您希望从数据库动态更新您的 adminheader.cshtml,您可以使用View Components来实现。

首先创建一个名为 ViewComponents 的文件夹,然后在该文件夹中创建一个名为 AdminheaderViewComponent 的类。

public class AdminheaderViewComponent : ViewComponent
{
    //将您的 dbcontext 注入其中。
    private readonly ApplicationDbContext _context;
    public AdminheaderViewComponent(ApplicationDbContext dbContext)
    {
        _context = dbContext;
    }

    public IViewComponentResult Invoke()
    {
        //从您的视图代码中看,adminheader.cshtml 似乎接收 AdminHeaderModel 列表,因此我返回 List<AdminHeaderModel> 到这个视图。
        var result = _context.adminHeaderModels.ToList();
        return View("adminheader", result);
    }
}

将您的 adminheader.cshtml 放在此结构下。

在其他页面中使用 @await Component.InvokeAsync("Adminheader") 调用 adminheader.cshtml

演示GIF

从上面的GIF演示中,我在 index.cshtml 中调用了 adminheader.cshtml,在 index.cshtml 中插入了一个 AdminHeaderModel 到数据库后,adminheader.cshtml 将动态更新来自数据库的数据。希望这个演示可以帮助您解决这个问题。

英文:

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&lt;AdminHeaderModel&gt; to this view.
            var resut = _context.adminHeaderModels.ToList();
            return View(&quot;adminheader&quot;,resut);
        }
    }

Put your adminheader.cshtml under this construct.

如何从模型更新共享视图 adminheader.cshtml

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

Gif Demo

如何从模型更新共享视图 adminheader.cshtml

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.

huangapple
  • 本文由 发表于 2023年5月29日 17:23:43
  • 转载请务必保留本文链接:https://go.coder-hub.com/76356119.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定