🎨 Mastering Reusable UI with Partial Views in .Net Core (Super Easy Guide!)
🌟 Introduction
Welcome again, my friend! 👋
Today, we take a super-important step toward clean, reusable UI development in ASP.NET Core.
Many beginners repeat the same UI code again and again. This makes the project messy. However, .Net Core Partial Views solve this problem beautifully. They help you reuse HTML blocks, keep your views clean, and make your app easier to maintain.
In this tutorial, you will learn exactly how to Create Partial Views in .Net Core, where to use them, and how they magically reduce repeated code. Let’s make UI coding fun! 🚀
📚 What You Are Going to Learn in This Lesson
✔️ What are .Net Core Partial Views
✔️ Why do we use Create Partial Views in .Net Core
✔️ Folder structure & how to name partial views
✔️ How to call partial views using Partial & PartialAsync
✔️ Real-life examples from actual projects
✔️ Output screenshots & flow chart
✔️ Best practices for clean & reusable UI
Imagine you are running a small shop website. You have the same product card (image, price, Buy Now button) shown on the homepage, product list page, search page, and even in the cart suggestions.
Now think of this situation 👇
You want to change the button color from blue to green.
If you manually edit 12 different pages, it becomes a headache 😩.
But if the product card was created once as a Partial View, you just update it in one file, and the change appears everywhere instantly.
That’s the true magic of .Net Core Partial Views — they save your time, reduce repeated code, and keep your project clean.
In this lesson, you’ll learn how to Create Partial Views in .Net Core in a fun, beginner-friendly way. Let’s make your UI reusable and smart! 🚀
🔎 What Are .Net Core Partial Views?
.Net Core Partial Views are small, reusable HTML components that you can share across multiple views.
Think of them like Lego blocks.
You snap them wherever you need the same UI section again — like headers, footers, menus, product cards, form sections, alerts, etc.
Because of this, you can:
- Write less code
- Avoid copy–paste
- Change in one place → updates everywhere
- Keep everything clean and professional
🎯 Why Do We Use Partial Views?
✔️ To reuse UI
✔️ To reduce repeated HTML
✔️ To simplify layouts
✔️ To separate small UI blocks from big pages
✔️ To keep controllers clean
In short, whenever the UI repeats → Use .Net Core Partial Views.
🧠 Simple Code Example — FULL Beginner Explanation (Step-by-Step)
In this example, we will create the simplest possible partial view called _Message.cshtml.
This example is perfect for beginners because it shows the core idea of how Partial Views work.
👉 Step 1: Decide the Partial View Name
Partial views must always start with an underscore (_).
This is a naming convention used everywhere in ASP.NET Core.
Why underscore?
It tells ASP.NET Core:
“This file will not be used as a full page, only as a reusable component.”
So we will name our partial:
_Message.cshtml
👉 Step 2: Choose the Correct Folder
For most partial views, Microsoft recommends storing them inside:
Views/Shared/
Why Shared?
Because partial views in this folder can be used in any page of your application (Home, Product, Contact, Layout, etc.).
So create this file:
Views
└── Shared
└── _Message.cshtml
✔️ This location is best for common and reusable UI components.
👉 Step 3: Create the Partial View File
Inside _Message.cshtml, add this:
<div class="message-box">
<strong>@Model</strong>
</div>
✔️ Very Important Note
For this simple example, the partial view is expecting a string — not a model class.
So whatever you pass to this partial will appear inside <strong>...</strong>.
👉 Step 4: Call This Partial View From Another Page
Open any normal Razor view, for example:
Views/Home/Index.cshtml
Now we call the partial view like this:
@{
var message = "Welcome to Partial Views!";
}
@await Html.PartialAsync("_Message", message)
What is happening here?
1. We created a message string
var message = "Welcome to Partial Views!";
- We passed this string to the partial view
- The partial view received the string as
@Model - The partial printed it on the screen using:
<strong>@Model</strong>
👉 Step 5: Expected Output
Welcome to Partial Views!
It will appear exactly like text wrapped in a bold font.
To help you visualize it, think of the screen looking like this:
Welcome to Partial Views!
🛠️ Example 1 : Reusable Card
Step 1: Create the Partial View
Views/Shared/_UserCard.cshtml
Code:
<div class="user-card">
<h3>@Model.Name</h3>
<p>Email: @Model.Email</p>
</div>
Step 2: Create the Model (Optional but recommended)
public class UserModel
{
public string Name { get; set; }
public string Email { get; set; }
}
Step 3: Call the Partial View inside a normal view
@model List<UserModel>
<h2>User List</h2>
@foreach (var user in Model)
{
@await Html.PartialAsync("_UserCard", user)
}
🧩 Example 2 : Reusable Navigation Menu
_Menu.cshtml
<ul>
<li><a href="/">Home</a></li>
<li><a href="/products">Products</a></li>
<li><a href="/about">About</a></li>
</ul>
Use inside layout
@await Html.PartialAsync("_Menu")
🧰 Real-Life Scenario: Fixing a Repeated UI Bug
Imagine you built a shopping website.
You used the same product card on 12 pages.
But suddenly, one day, the price color is wrong, and customers cannot see the discount clearly.
If you used .Net Core Partial Views, then:
✔️ Fix in _ProductCard.cshtml
✔️ All 12 pages automatically updated
✔️ No stress
✔️ No searching manually
✔️ No chance of missing anything
This is why Create Partial Views in .Net Core is a real-life saver.
👉 Next what?
In the next chapter, you will learn Tag Helpers in Views — a super important feature to make Razor views cleaner and more modern. ✨
