Talking about ASP.NET Partial view of core 2.0

Time:2020-11-11

problem

How to ASP.NET Using partial views in core 2.0 to reuse common parts of a page?

answer

Create an empty project and add MVC service and Middleware in startup


public void ConfigureServices(IServiceCollection services)

{

  services.AddMvc();

}

 

public void Configure(IApplicationBuilder app, IHostingEnvironment env)

{

  if (env.IsDevelopment())

  {

    app.UseDeveloperExceptionPage();

  }

 

  app.UseMvc(routes =>

  {

    routes.MapRoute(

      name: "default",

      template: "{controller=Home}/{action=Index}/{id?}");

  });

} 

Add two models:


 public class EmployeeViewModel

{

  public int Id { get; set; }

  public string Firstname { get; set; }

  public string Surname { get; set; }

  public AddressViewModel Address { get; set; }

}

 

public class AddressViewModel

{

  public string Line1 { get; set; }

  public string Line2 { get; set; }

  public string Line3 { get; set; }

} 

Add a controller, return viewresult and pass in the model instance:


public class HomeController : Controller

{

  public IActionResult Index()

  {

    var model = new EmployeeViewModel

    {

      Id = 1,

      Firstname = "James",

      Surname = "Bond",

      Address = new AddressViewModel

      {

        Line1 = "Secret Location",

        Line2 = "London",

        Line3 = "UK"

      }

    };

    return View(model);

  }

} 

Add view page Index.cshtml :


@using PartialView.Models;

@model EmployeeViewModel

 

<div style="border: 1px solid black; margin: 5px">

  <h2>Employee Details (parent view)</h2>

 

  <p>Firstname: @Model.Firstname</p>

  <p>Surname: @Model.Surname</p>

 

  @Html.Partial("_Address.cshtml", Model.Address)

</div> 

Add partial view_ Address.cshtml :


@using PartialView.Models

@model AddressViewModel

 

<div style="border: 1px dashed red; margin: 5px">

  <h3>Address Details (partial view)</h3>

 

  <p>Lin1: @Model.Line1</p>

  <p>Line2: @Model.Line2</p>

  <p>Line3: @Model.Line3</p>

</div> 

Now, the directory structure in the solution:

 

Run, the page displays:

 

discuss

A partial view is a special view that is rendered inside other views. This can be useful for reusing part of the structure of a view or separating a large view into small components.

Some views can be created like normal views, and viewresult can be returned through controller methods. The key difference is that some views do not run before rendering_ ViewStart.cshtml And it is usually rendered inside other views.

Inside the view, part of the view passes through [email protected] Html.Partial () method, and pass in the name of the partial view and an optional model instance. Partial view names can be absolute or relative paths, and the view engine will find the corresponding partial views in the current directory and shared directory.

Some views can get a copy of the parent view’s viewdata data. You can also pass in the model, which is usually part of the parent view model.

Note: ASP.NET Not only does it provide a more flexible solution to run code without depending on the parent view. It’s the view component, which we’ll cover in the next section.

Source code download

Original text: https://tahirnaushad.com/2017/08/24/asp-net-core-2-0-mvc-partial-views/

The above is the whole content of this article, I hope to help you in your study, and I hope you can support developeppaer more.