ASP. NET Core MVC Partial View of Basic Learning (Partial Views)

1. What is a partial view

A partial view is a view rendered in other views. The HTML output generated by executing the local view is rendered in the call view. Like View 1, the partial view uses the. cshtml file extension. You can use partial views when you want to share reusable parts of a Web page between different views.

2. When to use partial views

Partial view is an effective way to divide large view into small widgets. Common layout elements should be specified in _ Layout. cshtml, and non-layout reusable content can be encapsulated into local views.

If you have a complex page that consists of several logical parts, it is useful to have each logical part as a partial view. There is no semantic difference between layout view and normal view, they are just rendered in different ways. You can return the view directly from the ViewResult of the controller, and this view can also be used as a partial view. The main difference between a view and a partial view is the way it is rendered. The partial view does not run _ ViewStart. cshtml, but the view does.

3. Referencing a partial view

There are several ways to render a partial view in the View page. The simplest is to use Html. Partial, which is called with the @ prefix and returns IHtmlString ： @Html.Partial("AuthorPartial") .

The PartialAsync method is available for partial views that contain asynchronous code: @await Html.PartialAsync("AuthorPartial")  .

You can also use the RenderPartial method to render a partial view. This method does not return a result: It outputs the rendered result directly to the response. Because it does not return a response, it must be called in the Razor code block. General also has an asynchronous method RenderPartialAsync:

@{
 Html.RenderPartial("AuthorPartial");
}

4. Discover local views

When you reference a local view, you can find its location in several ways:

// Use the view under the current folder with the view name, and if it is not found, search Shared  Folder 
@Html.Partial("ViewName")

// Views with this name must be in the same folder 
@Html.Partial("ViewName.cshtml")

// Locate the view according to the application root path to " / "   Or   " ~/ "   The path at the beginning represents the application root path 
@Html.Partial("~/Views/Folder/ViewName.cshtml")

// Use relative paths 
@Html.Partial("../Account/ViewName.cshtml")

Partial views can be linked. That is, one local view can call another local view (as long as no loop is created).

5. Partial View Access Data

When the partial view is instantiated, it gets a copy of the parent view's ViewData dictionary. Updates to data in a partial view do not affect the parent view. When the local view returns, the changed ViewData in the local view will be lost.

You can pass an instance of ViewDataDictionary to a local view: @Html.Partial("PartialName",customViewData) .

You can also pass the model to a local view: @Html.Partial("PartialName",viewModel) .

You can also pass both ViewDataDictionary and the model to the view: @Html.Partial("PartialName",viewModel，customViewData) .

6. Simple combat

Create the model used first:

namespace MVCTest.Models
{
 public class Article
 {

 　　　　　　 public Article()
   　　　　　　 {
     　　　　　　 　　 Sections = new List<ArticleSection>();
   　　　　　　 }
public string AuthorName { get; set; }
  public List<ArticleSection> Sections { get; set; }
 }

 public class ArticleSection
 {
  public string Title { get; set; }
  public string Content { get; set; }
 }
}

Then instantiate the model in the controller:

public class ArticleController : Controller
 {
  // GET: Article
  public ActionResult Index()
  {
   var article = new Article();
   article.AuthorName = "test";
   article.Sections.Add(new ArticleSection() { Title="title",Content="content"});
   return View(article);
  }

 }

Parent view:

@model MVCTest.Models.Article

@{
 ViewData["Title"] = "Index";
}

<h2>@Model.AuthorName</h2>
@Html.Partial("AuthorPartial",Model.AuthorName);

@foreach (var section in @Model.Sections)
{
 @Html.Partial("ArticleSection", section);
}

AuthorPartial. cshtml:

@model string

<h3>@Model</h3>

ArticleSection. cshtml:

@model MVCTest.Models.ArticleSection

<h3>@Model.Title</h3>
<h2>@Model.Content</h2>

Summarize