In this Post, we’ll cover how to create and render a printable invoice using ASP.NET Core with Razor Pages or MVC
Generating Invoices in ASP.NET Core: A Step-by-Step Guide
Getting Started
An invoice is a commercial document issued by a seller to a buyer, detailing the products or services provided, their quantities, prices, and the total amount due. It serves as a request for payment and often includes payment terms, due dates, and other relevant information.
In many business applications, generating and printing invoices is a core requirement. Here we are covering:- Creating ASP.NET Core MVC Project
- Creating an invoice model
- Creating an invoice template in view
Creating ASP.NET Core MVC Project
Creating an ASP.NET Core MVC project is straightforward using Visual Studio, .NET CLI, or Visual Studio Code. Below is a step-by-step guide for each method:
- Open Visual Studio
- Click "Create a new project"
- Search for "ASP.NET Core Web App (Model-View-Controller)"
- Click Next
- Enter project name, location, and solution name → Click Next
- Choose:
- .NET version (e.g., .NET 8.0)
- Authentication Type (e.g., None, Individual Accounts)
- Check Enable Razor runtime compilation if needed
- Uncheck Enable HTTPS for development (optional)
- Click Create
Creating Invoice Model
Creating an Invoice model in ASP.NET Core involves defining a class that represents an invoice and includes relevant properties such as invoice number, date, customer, total amount, etc. This model can then be used for database operations. Here’s a simple example of an Invoice model in ASP.NET Core
Invoice Model public class Invoice
{
public string Organization { get; set; }
public string Address { get; set; }
public string InvoiceNumber { get; set; }
public DateTime InvoiceDate { get; set; }
public string CustomerName { get; set; }
public string CustomerNo { get; set; }
public string CustomerEmail { get; set; }
public List<InvoiceItem> Items { get; set; }
}
public class InvoiceItem
{
public string Description { get; set; }
public int Quantity { get; set; }
public decimal UnitPrice { get; set; }
public decimal Amount
{
get
{
return Quantity * UnitPrice;
}
}
}
Create Invoice Template in View
To create an invoice template in the view, you’ll typically use a View that displays invoice details along with its line items in a printable format. Here’s how to make an invoice template in Razor (.cshtml), assuming you're passing an Invoice model to the view. Here are the sample code of creating an invoice template.
Invoice.cshtml
@page
@model GenerateInvoice.Pages.InvoiceModel
@{
<div class="border-box-raduis">
<h2>Nidhi Enterprises</h2>
<p>Nageswar Nagar, Road #8, Lingaraj Square, Bhubaneswar, Odisha-40072</p>
<h3>Invoice #@Model.Invoice.InvoiceNumber</h3>
<div class="border-box"/>
<p><strong>Customer:</strong> @Model.Invoice.CustomerName</p>
<p><strong>Date:</strong> @Model.Invoice.InvoiceDate.ToString("yyyy-MM-dd")</p>
<table class="styled-table">
<thead>
<tr>
<th>Description</th>
<th>Qty</th>
<th>Unit Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model.Invoice.Items)
{
<tr>
<td>@item.Description</td>
<td>@item.Quantity</td>
<td>@item.UnitPrice.ToString("C")</td>
<td>@item.Amount.ToString("C")</td>
</tr>
}
</tbody>
<tfoot>
<tr>
<td colspan="3" class="total">Total</td>
<td>@Model.TotalAmount.ToString("C")</td>
</tr>
</tfoot>
</table>
</div>
<button onclick="window.print()">Print Invoice</button>
}
site.css
.border-box-raduis {
border: 2px solid gray;
border-radius: 5px;
padding: 20px;
margin: 20px;
}
.border-box {
border: 2px solid gray;
padding: 20px;
}
.styled-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
font-size: 16px;
font-family: sans-serif;
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.styled-table thead {
color: black;
text-align: left;
}
.styled-table th, .styled-table td {
padding: 12px 15px;
border-bottom: 1px solid #ddd;
}
.styled-table tbody tr:nth-child(even) {
background-color: #f3f3f3;
}
.styled-table tbody tr:hover {
background-color: #e0f0ff;
cursor: pointer;
}
Invoice.cshtml.cs
using GenerateInvoice.Models;
using Microsoft.AspNetCore.Mvc.RazorPages;
namespace GenerateInvoice.Pages
{
public class InvoiceModel : PageModel
{
public Invoice Invoice { get; set; }
public decimal TotalAmount { get; set; }
public void OnGet()
{
this.Invoice = new Invoice();
this.Invoice.InvoiceNumber = "INV-1001";
this.Invoice.InvoiceDate = DateTime.Today;
this.Invoice.CustomerName = "John Doe";
this.Invoice.Items = new List<InvoiceItem>();
for (int ind = 1; ind <= 10; ind++)
{
InvoiceItem item = new InvoiceItem { Description = "Product " + ind, Quantity = 1, UnitPrice = 50 };
this.TotalAmount += item.Amount;
this.Invoice.Items.Add(item);
}
}
}
}
The above codes for generating invoice in the view page. use the codes in your View (Invoice.cshtml), site.css and view model class (Invoice.cshtml.cs)
Testing
Run your poject and navigato to invoice page, replace the port number displayed in the URL filed. https://localhost:[port]/invoice
Summary
Creating a printable invoice in ASP.NET Core is straightforward using Razor Views and HTML/CSS. You now have a fully functional invoice generator in ASP.NET Core. I hope this was helpful to you.
Thanks