在 MVC 框架中使用部分视图
4.91/5 (16投票s)
在 Asp.net MVC 中使用部分视图
引言
随着 Web 应用程序的复杂性不断增长，我们必须决定何时创建新项以及何时尽可能地重用它们：）。这样做可以使应用程序保持尽可能简单和易于维护。因此，我们应该对 HTML 页面的布局和设计结构有基本的了解。
描述
例如，母版页（Web Farms）或布局（Asp.net MVC）提供了一种有用的方式来重用标记的一部分，并在多个页面中保持一致的外观和感觉。但有时会出现一种场景，可能需要更集中的方法来在多个位置显示一些高级信息，但并非全部。为了实现此功能，Asp.net MVC 框架提供了**部分视图**的解决方案，它允许我们将页面的一部分控件与整个页面分开，从而使我们能够在多个页面中放置一致的功能，而无需重写代码。
部分视图是包含有针对性的标记的视图，旨在作为大型视图的一部分进行渲染。它不指定任何布局。或者我们可以说，部分视图是 ASP.NET Web Forms 中的用户控件的 MVC 替代品。
详细了解
在本节中，我们将向您展示如何创建和使用部分视图，解释它们的工作原理，并演示可用于将视图数据传递到部分视图的技术。
我们可以创建两种部分视图
1. 空部分视图 - 创建部分视图时，如果未选择任何脚手架模板选项，则将创建一个空部分视图。
之后，如果我们要使用模型，可以像下面的语法一样附加它
@model ApplicationName.Models.ModelName
2. 强类型部分视图 - 创建部分视图时，如果我们在**模型类选项**中选择或输入了一个类型，则将创建一个强类型部分视图。现在创建了部分视图文件，其中仅包含 @model 标记来指定视图模型类型。然后，在渲染部分视图时，我们必须传递视图模型对象。
@model ApplicationName.Models.ModelName
1. @Html.Partial ("PartialViewName", modelName)
2. @{ Html.RenderPartial("PartialViewName", modelName); }
在这两种情况下，第一个参数是部分视图的名称，第二个参数是模型名称（可选）。当未指定第二个参数时，它默认为调用 Html.Partial() 帮助程序的视图中的模型。
@Html.Partial() - 它生成 HTML 片段，而不是完整的 HTML 文档。Partial 帮助程序返回 MVCHtmlString 并将部分视图渲染为 HTML 编码的字符串。
@Html.RenderPartial- 与大多数其他帮助程序方法不同，它不返回 HTML 标记，而是直接将内容写入响应流，这就是为什么我们必须使用分号（;）将其作为完整的 C# 代码行调用。
两种方式都可以用来将部分视图作为视图的一部分进行渲染，唯一的区别在于性能。**RenderPartial** 比 **Partial** 更高效。
从控制器渲染部分视图
Controller.PartialView() - 它创建一个 **PartialViewResult** 对象，该对象渲染一个部分视图。PartialViewResult 仅渲染视图本身的标记，而不渲染视图可能指定的任何布局或母版页。由于部分页面不执行布局，因此您可能需要在部分视图中直接包含一些依赖项（如 CSS 或 Javascript），而不是将其包含在页面的布局中。
让我们演示一下
1. 创建一个演示 Web 项目来演示部分视图。文件 → 新建项目 → 选择 Asp.net MVC 框架，为您的项目命名并选择位置。
并选择项目模板和 Razor 作为视图引擎
项目结构如下：
2. 在控制器文件夹中创建 Home 控制器，请遵循下面的截图。
并使用空的 MVC 控制器模板创建 HomeController。
并在 home 控制器中写入以下代码
public ActionResult Index()
{
var model = new Company();
model.Department = GetDepartmentList();
return View(model);
}
public List<department> GetDepartmentList()
{
var model = new List<department>();
for (var count = 1; count <= 5; count++)
{
var data = new Department();
data.DepartmentName = "IT " + count;
data.DepartmentRule = "Rule " + count;
data.AdminComment = "Admin omment " + count;
model.Add(data);
}
return model;
}
public PartialViewResult ShowPartailView()
{
return PartialView("_MyView");
}
3. 创建模型类 -> 右键单击模型文件夹并选择添加 -> 选择类，然后创建模型类。
public class Department
{
public string DepartmentName { get; set; }
public string DepartmentRule { get; set; }
public string AdminComment { get; set; }
}
public class Company
{
public List<department> Department { get; set; }
}
4. 在 **Views** 文件夹下创建一个名为 **Home** 的新文件夹，并创建一个 Index 视图
并复制以下代码
@model PartialViewDemo.Models.Company
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
<h1>This is from main view upper.</h1>
</div>
<div>
@Html.Partial("_MyPartialView", Model.Department )
@{
Html.RenderPartial("_MyPartialView", Model.Department);
}
</div>
<div>
<h1>This is from main view lower.</h1>
</div>
<div id="divTest">
</div>
<input type="button" value="Click" id="btnClick"/>
</body>
<script src="~/Content/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function() {
$('#btnClick').click(function(data) {
$.post("@Url.Action("ShowPartailView", "Home")", function(data) {
if (data) {
$('#divTest').append(data);
}
});
});
});
</script>
</html>
<meta content="width=device-width" name="viewport" /> <title></title>
5. 在 **Views** 文件夹下创建一个名为 **shared** 的新文件夹 - 部分视图、布局或母版页存储在共享文件夹中，因为它们是可共享的并且可以重复使用。然后添加两个部分视图（i）_MyPartialview 和 MySecondPartialView。
在 _MyPartialView 中复制以下代码
@model List<PartialViewDemo.Models.Department>
<h6> This below table content is from partial view</h6>
@if (Model != null)
{
<div>
<table cellspacing="0"width="50%" border="1">
<thead>
<tr>
<th>
Department Name
</th>
<th>
Department Rule
</th>
<th>
Admin Comment
</th>
</tr>
</thead>
<tbody>
@foreach (var dept in Model)
{
<tr>
<td align="center">
@dept.DepartmentName
</td>
<td align="center">
@dept.DepartmentRule
</td>
<td align="center">
@dept.AdminComment
</td>
</tr>
}
</tbody>
</table>
</div>
}
在 _MySecondPartial.cshtml 中
<h3> Testing for partial view</h3>
现在我们已经完成了编码部分。让我们调试它。运行并检查。
请下载演示版进行检查。