部分视图 PartialView的详细介绍与经典用法

PartialView的详细介绍

什么是 PartialView？
PartialView 是一种可重用的视图组件，它代表网页的一部分内容，可以在多个父视图中共享使用。类似于 Web Forms 中的用户控件（User Control）。
也类似于WPF中的自定义控件UControl功能一样，
只不过 一个是用于Web程序，一个是应用程序。

主要特点

可重用性：同一 PartialView 可以在多个地方使用

独立性：拥有自己的视图逻辑和数据

轻量级：不包含完整的 HTML 结构（如、标签）

模块化：有助于将复杂页面分解为更小的、可管理的部分

使用场景

重复组件：如导航菜单、页脚、侧边栏

复杂区域：将复杂页面拆分为多个独立部分

动态内容：通过 AJAX 异步加载的部分内容

组件复用：在多个页面中使用的相同 UI 组件

个人推荐：用于左侧菜单动态生成 ，头部用户菜单和用户信息显示、以及卡片展示。

PartialView 与 View 的区别

命名约定

通常以下划线开头：_PartialViewName.cshtml

放置在 Shared 文件夹或其他特定文件夹中

PartialView的经典用法（一）

2.1 PartialView作卡片、头部菜单、和提示信息 功能展示

2.2创建模型

// Models/Product.cspublicclassProduct{publicintId{get;set;}publicstringName{get;set;}publicdecimalPrice{get;set;}publicstringDescription{get;set;}publicstringImageUrl{get;set;}publicboolInStock{get;set;}}

创建 PartialView

示例 1：简单的产品卡片 PartialView

<!-- Views/Shared/_ProductCard.cshtml -->@model Product<divclass="product-card"style="border:1px solid #ddd;padding:15px;margin:10px;border-radius:5px;"><imgsrc="@Model.ImageUrl"alt="@Model.Name"style="max-width:100%;height:150px;object-fit:cover;"/><h3>@Model.Name</h3><pclass="price"style="color:green;font-size:1.2em;">￥@Model.Price.ToString("N2")</p><p>@Model.Description</p><div>@if (Model.InStock) {<buttonclass="btn btn-primary"onclick="addToCart(@Model.Id)">加入购物车</button>} else {<buttonclass="btn btn-secondary"disabled>缺货</button>}</div></div>

示例 2：带参数的 Header PartialView

<!-- Views/Shared/_Header.cshtml -->@model dynamic<headerstyle="background:#333;color:white;padding:15px;"><divstyle="display:flex;justify-content:space-between;align-items:center;"><h1>@ViewData["SiteName"]</h1><nav><ahref="/"style="color:white;margin:0 10px;">首页</a><ahref="/Product"style="color:white;margin:0 10px;">产品</a><ahref="/About"style="color:white;margin:0 10px;">关于</a>@if (User.Identity.IsAuthenticated) {<span>欢迎, @User.Identity.Name</span><ahref="/Account/Logout"style="color:white;margin:0 10px;">退出</a>} else {<ahref="/Account/Login"style="color:white;margin:0 10px;">登录</a>}</nav></div></header>

示例 3：静态 Newsletter PartialView

<!-- Views/Shared/_Newsletter.cshtml --><divclass="newsletter"style="background:#f5f5f5;padding:20px;text-align:center;"><h3>订阅我们的 Newsletter</h3><p>获取最新产品和优惠信息</p><formasp-controller="Home"asp-action="Subscribe"method="post"><inputtype="email"name="email"placeholder="请输入邮箱"requiredstyle="padding:8px;width:250px;"/><buttontype="submit"class="btn btn-success">订阅</button></form></div>

2.4. 创建 Controller

usingMicrosoft.AspNetCore.Mvc;usingPartialViewWebAppTest.Models;usingSystem.Diagnostics;namespacePartialViewWebAppTest.Controllers{publicclassHomeController:Controller{privatereadonlyILogger<HomeController>_logger;publicHomeController(ILogger<HomeController>logger){_logger=logger;}publicIActionResultIndex(){// 准备数据varproducts=newList<Product>{newProduct{Id=1,Name="笔记本电脑",Price=5999.99m,Description="高性能轻薄本",ImageUrl="images/DN.jpeg",InStock=true},newProduct{Id=2,Name="无线鼠标",Price=99.99m,Description="人体工学设计",ImageUrl="Images/sb.jpeg",InStock=true},newProduct{Id=3,Name="机械键盘",Price=299.99m,Description="青轴机械键盘",ImageUrl="Images/JB.jpeg",InStock=false}};// 设置 ViewData 用于 HeaderViewData["SiteName"]="我的网上商城";// 将数据传递给视图returnView(products);}[HttpPost]publicIActionResultSubscribe(stringemail){// 处理订阅逻辑TempData["Message"]=$"感谢{email}订阅我们的 Newsletter！";returnRedirectToAction("Index");}// AJAX 加载更多产品的 ActionpublicIActionResultLoadMoreProducts(intpage=1){varmoreProducts=GetMoreProducts(page);returnPartialView("_ProductCard",moreProducts);}privateList<Product>GetMoreProducts(intpage){// 模拟分页数据returnnewList<Product>(){newProduct{Id=1,Name="笔记本电脑2",Price=5999.99m,Description="高性能轻薄本",ImageUrl="/images/laptop.jpg",InStock=true},newProduct{Id=2,Name="无线鼠标2",Price=99.99m,Description="人体工学设计",ImageUrl="/images/mouse.jpg",InStock=true},newProduct{Id=3,Name="机械键盘",Price=299.99m,Description="青轴机械键盘",ImageUrl="/images/keyboard.jpg",InStock=false}};}publicIActionResultPrivacy(){returnView();}[ResponseCache(Duration=0,Location=ResponseCacheLocation.None,NoStore=true)]publicIActionResultError(){returnView(newErrorViewModel{RequestId=Activity.Current?.Id??HttpContext.TraceIdentifier});}}}

2.5. 在视图中使用 PartialView

<!-- Views/Home/Index.cshtml --><!-- Views/Home/Index.cshtml -->@model IEnumerable<Product>@{ ViewData["Title"] = "首页"; }<!-- 使用 Header PartialView -->@await Html.PartialAsync("_Header")<divclass="container"style="max-width:1200px;margin:0 auto;padding:20px;"><!-- 显示成功消息 -->@if (TempData["Message"] != null) {<divclass="alert alert-success">@TempData["Message"]</div>}<h2>热门产品推荐</h2>@*<!-- 方法1：使用 Partial 同步方法（不推荐） --><divclass="product-list"style="display:grid;grid-template-columns:repeat(3,1fr);gap:20px;">@foreach (var product in Model) { @Html.Partial("_ProductCard", product) }</div>*@<!-- 方法2：使用 PartialAsync 异步方法（推荐） --><divclass="product-list"style="display:grid;grid-template-columns:repeat(3,1fr);gap:20px;">@foreach (var product in Model) { @await Html.PartialAsync("_ProductCard", product) }</div><!-- 方法3：使用 RenderPartialAsync（性能最佳，适合大型 PartialView） -->@{ foreach (var product in Model) { await Html.RenderPartialAsync("_ProductCard", product); } }<!-- 在循环外使用 Newsletter PartialView --><divstyle="margin-top:40px;">@await Html.PartialAsync("_Newsletter")</div><!-- 使用 AJAX 动态加载 --><divid="more-products"></div><buttononclick="loadMore()"class="btn btn-primary">加载更多</button></div>@section Scripts {<script>functionloadMore(){$.get('/Home/LoadMoreProducts',{page:2},function(data){$('#more-products').append(data);});}functionaddToCart(productId){alert('产品 '+productId+' 已添加到购物车');}</script>}

2.6. PartialView 的三种调用方式对比