如何在ASP.NET Core MVC的cshtml视图中重用HTML代码片段？

在ASP.NET Core MVC里重用你的TopBar.cshtml导航代码片段，有几种实用的方式，根据你的需求来选：

方法1：使用部分视图（Partial View） #

这是最直接的方案，适合静态HTML或者只需要简单数据绑定的片段。

步骤： #

1. 把你的TopBar.cshtml文件重命名为_TopBar.cshtml（下划线开头是ASP.NET里的约定，标识这是一个可重用的部分视图），然后放到Views/Shared文件夹下——这个目录下的部分视图可以被所有视图访问到。
2. 在需要引用导航栏的视图（或者布局页）里，用以下两种方式之一调用它：
   • 使用标签助手（推荐，更简洁）：

     <partial name="_TopBar" />
     

   • 使用HTML Helper：

     @Html.Partial("_TopBar")
     

方法2：使用视图组件（View Component） #

如果你的导航栏需要加载动态数据（比如显示登录用户名称、动态生成菜单选项），视图组件是更合适的选择，它支持独立的逻辑处理。

步骤： #

1. 创建一个视图组件类，比如在项目里新建Components/TopBarViewComponent.cs：

   using Microsoft.AspNetCore.Mvc;
   
   namespace YourProjectNamespace.Components
   {
       public class TopBarViewComponent : ViewComponent
       {
           // 这里可以注入服务，比如用户服务、菜单服务
           public IViewComponentResult Invoke()
           {
               // 编写动态逻辑，比如获取当前用户信息
               // var user = User.Identity.Name;
               // 可以把数据传给视图，比如 return View(user);
               return View();
           }
       }
   }
   

2. 创建对应的视图文件：在Views/Shared/Components/TopBar目录下新建Default.cshtml，把你原来的导航栏HTML代码放进去：

   <nav class="white" role="navigation">
       <div class="nav-wrapper container">
           <a id="logo-container" href="#" class="brand-logo">Logo</a>
           <ul class="left hide-on-med-and-down">
               <li><a href="#">Navbar Link</a></li>
           </ul>
           <ul id="nav-mobile" class="sidenav">
               <li><a href="#">Navbar Link</a></li>
           </ul>
           <a href="#" data-target="nav-mobile" class="sidenav-trigger"><i class="material-icons">menu</i></a>
       </div>
   </nav>
   

3. 在需要引用的视图里调用视图组件：
   • 使用异步调用（推荐）：

     @await Component.InvokeAsync("TopBar")
     

   • 或者用标签助手（需要先在_ViewImports.cshtml里添加@addTagHelper *, YourProjectNamespace）：

     <vc:top-bar></vc:top-bar>
     

方法3：整合到布局页（Layout） #

如果这个导航栏是全站所有页面都需要的，直接把它加到布局页里是最高效的方式。

步骤： #

1. 按照方法1把_TopBar.cshtml放到Views/Shared。
2. 打开你的布局文件（通常是Views/Shared/_Layout.cshtml），在合适的位置（比如<body>标签开头）添加部分视图的引用：

   <partial name="_TopBar" />
   

这样所有使用这个布局的视图都会自动显示这个导航栏，不用每个视图单独引用。

内容的提问来源于stack exchange，提问作者mohammad rostami siahgeli