Partial view in Asp.net Core Razor Page

Here you learn how to create partial view in razor page application, as I described in earlier razor page post, this works almost same way like MVC application, however, every page has its own model definition, so let's learn how to use partial view in this type of single page application.

@{ Html.RenderPartial("shared/_menu"); }
Asp.net Core Razor Partial Page

Partial view is just like a razor page file, some people call it partial page, only difference that partial view can be a part of main page, we can write html and server side code in partial view, in one page we can have any number of partial views.

Add partial view in razor page

You can create a partial view under Pages folder or in any other sub folder.
Here we have created a partial view called "_menu" under pages=>shared folder.

add partial view in razor page

In above example we have created a simple partial view where we want to add all common menu items
Remember Partial view doesn't have an @page directive at the top

File Name: _menu
    <div>
    Link 1 | Link 2 | Link 3 | Link 4
    </div>

Now calling this partial view from any razor page

@Html.Partial("shared/_menu")

In Asp.Net Core 2.1 there is new partial tag helper.
The name attribute takes the name of partial file, with or without the file extension, it works both ways

<partial name="shared/_menu" />

Html helper also offers 3 other methods for implementing partial view, RenderPartial , RenderPartialAsync and PartialAsync

@{ Html.RenderPartial("shared/_menu"); }
Partial Pages Location and Naming Convention

There is no rule for partial view location and naming convention, you can give any name, but as a standard practice we usually use underscore at beginning for all naming partial view name, for example you can see the above partial view name is "_menu".

Where to create the file?

You can create partial view in anywhere under “Pages”, But the best practice would be to create a folder with name “shared” or “partial”, then create all partial view under that folder.

There is also an advantage of keeping all partial views under one folder; you can configure the location in ConfigureServices method under startup.cs file.

public void ConfigureServices(IServiceCollection services)
{
services.AddMvc().AddRazorOptions(options =>
    {
       options.PageViewLocationFormats
        .Add("/Pages/shared/{0}.cshtml");
    });
}

Now while accessing the partial view, you don’t need to provide the full path like @Html.Partial("shared/_menu"), you can call @Html.Partial("_menu"), Automatically razor page view engine will search that particular folder for all views

Razor pages partial view with model example

We can use model with partial view in asp.net core razor page, Here we learn how to work with strongly type partial view (with model) in asp.net core razor page application.

In this example we have created following items

  • One content razor page called "about.chtml" with AboutModel:PageModel about.chtml.cs
  • One partial view "_studentQuery" with a form to capture student data
  • One model class called student

Now we see how to use student model in partial view _studentQuery then call that partial view from main page about.chtml

Step 1:
Create Student Model class with few properties

public class Student
{
    public string Name { get; set; }
    public string Email { get; set; }
    public string Mobile { get; set; }
}

Step 2:
Create partial view with name "_studentQuery", then add the model reference, and create a simple form to capture student data.

@model  AspNetCoreWebApplication.Models.Student;
<form method="post">
Name: <input asp-for="Name" />
Mobile: <input asp-for="Mobile" />
Email: <input asp-for="Email" />
<input type="submit" value="Join" />
</form>

Step 3:
Now create the main content page about.chtml , and call the partial view with model reference like @Html.Partial("_studentQuery", model:Model.Student)

@page
@model AboutModel
 
@Html.Partial("_studentQuery", model:Model.Student)
            

Notice in above code, Model.Student is actually AboutModel.Student So we need to create a property of Student type in AboutModel class

Step 4:
In About.chtml.cs file capture the submitted data

public class AboutModel : PageModel
    {
        public Student Student { get; set; }
       
        public void OnGet()
        {
            Message = "Your application description page.";
        }
        public void OnPost()
        {
            string _email = Request.Form["Email"];
        }
    }

Hope you understood how to use strongly type partial view in asp.net core razor page

Asp.Net Core C# Examples | Join Asp.Net MVC Course