officefileapi-403798-integration-guide-blazor-integration-use-spreadsheet-document-api-to-create-a-loan-amortization-schedule-within-a-blazor-server-app.md
This topic describes how to create a Blazor Server application that uses the Spreadsheet Document API to build a loan amortization schedule.
View Example: Create a Loan Amortization Schedule within a Blazor Server App
The image below shows the resulting application. Users enter the following loan information: loan amount, repayment period in years, annual interest rate, and start date. Once users enter the data, the spreadsheet recalculates loan payments and updates the application page. Users can save the result in XLSX and PDF formats.
Create a new project in Visual Studio and select the Blazor App template. Specify the project name and location in the next window.
In the Additional information window, set the target framework to .NET 8.0 , interactive server mode to Server , and click Create.
Install the following DevExpress packages from the NuGet source:
DevExpress.Document.Processor This package includes the Spreadsheet Document API and other Office File API libraries. You need a license for the DevExpress Office File API Subscription or DevExpress Universal Subscription to use this package in production code.DevExpress.Blazor Contains DevExpress UI Components for Blazor. This product line is available as part of the DevExpress Universal, DXperience, or ASP.NET Subscription.DevExpress.Drawing.Skia Contains the cross-platform drawing functionality based on the Skia Graphics Library.
If you are new to NuGet packages, see the following installation guide for assistance: Install DevExpress Packages Using NuGet Package Manager.
Register the DevExpress.Blazor namespace in the _Imports.razor file.
Call the AddDevExpressBlazor method in the Program.cs file.
Apply the DevExpress Blazing Berry theme to the app as described in this help topic: Apply a DevExpress Bootstrap Theme. Open the App.razor file and add the following line to the end of the HEAD section:
Add the following DevExpress Blazor UI components to the application:
This example also uses an inline frame (defined by the <iframe> tag) to display the generated loan amortization schedule on the page.
Open the Home.razor file and change its code as follows:
@page "/"
<div class="container">
<DxFormLayout>
<DxFormLayoutGroup Caption="Loan Amortization Schedule" ColSpanMd="11">
<DxFormLayoutItem ColSpanMd="12">
<Template>
<p>
This example uses the Spreadsheet Document API
to create a loan amortization schedule.
Specify the loan amount, loan period in years,
annual interest rate, and start date to calculate
your loan payments. Click <b>Export to XLSX</b>
or <b>Export to PDF</b> to save the result as XLSX or PDF.
</p>
</Template>
</DxFormLayoutItem>
<DxFormLayoutItem Caption="Loan Amount:" ColSpanMd="5">
<Template>
<DxSpinEdit @bind-Value="LoanAmount"
DisplayFormat="c"
Increment="100"
MinValue="100"
MaxValue="1000000" />
</Template>
</DxFormLayoutItem>
<DxFormLayoutItem Caption="Period in Years:" ColSpanMd="5">
<Template>
<DxSpinEdit @bind-Value="PeriodInYears"
Increment="1"
MinValue="1"
MaxValue="100" />
</Template>
</DxFormLayoutItem>
<DxFormLayoutItem ColSpanMd="2">
<Template>
<DxButton CssClass="btn-block" Text="Export to XLSX" />
</Template>
</DxFormLayoutItem>
<DxFormLayoutItem Caption="Interest Rate:" ColSpanMd="5">
<Template>
<DxSpinEdit @bind-Value="InterestRate"
DisplayFormat="p"
Increment="0.01"
MinValue="0.001"
MaxValue="100" />
</Template>
</DxFormLayoutItem>
<DxFormLayoutItem Caption="Start Date of Loan:" ColSpanMd="5">
<Template>
<DxDateEdit @bind-Date="StartDate"></DxDateEdit>
</Template>
</DxFormLayoutItem>
<DxFormLayoutItem ColSpanMd="2">
<Template>
<DxButton CssClass="btn-block" Text="Export to PDF" />
</Template>
</DxFormLayoutItem>
<DxFormLayoutItem ColSpanMd="12">
<Template>
<iframe class="col p-0 preview" height="500" />
</Template>
</DxFormLayoutItem>
</DxFormLayoutGroup>
</DxFormLayout>
</div>
@code{
double loanAmount = 19000;
int periodInYears = 2;
double interestRate = 0.055d;
DateTime startDate = DateTime.Now;
double LoanAmount
{
get => loanAmount;
set { loanAmount = value; UpdateValue(); }
}
int PeriodInYears
{
get => periodInYears;
set { periodInYears = value; UpdateValue(); }
}
double InterestRate
{
get => interestRate;
set { interestRate = value; UpdateValue(); }
}
DateTime StartDate
{
get => startDate;
set { startDate = value; UpdateValue(); }
}
protected override async Task OnInitializedAsync()
{
await base.OnInitializedAsync();
}
void UpdateValue() =>
InvokeAsync(StateHasChanged);
}
Create a Loan Amortization Schedule template. You can download the following document to proceed: LoanAmortizationScheduleTemplate.xltx. Add this file to the Data folder of your project.
Add a new Code folder to the project and create a DocumentGenerator.cs file within the folder.
Implement a LoanAmortizationScheduleGenerator class, as shown below. This class calculates loan payments based on the specified loan information (loan amount, repayment period in years, annual interest rate, and start date) and generates an amortization table.
Add a new DocumentService.cs class file to the Code folder. This class contains asynchronous methods used to generate a document and export it to various file formats (XLSX, HTML, and PDF).
Implement the following method within the DocumentService.cs class to asynchronously generate a loan amortization schedule based on the document template and loan information entered by users:
Convert the generated document to HTML to display its content within the application.
Add the following method to the DocumentService.cs class. This method calls DocumentService.GenerateDocumentAsync to build an amortization schedule and export the document to HTML.
Open the Home.razor page and inject an instance of the DocumentService object into the page.
Implement the UpdatePreview method. This method calls DocumentService.GetHtmlDocumentAsync to generate an HTML preview of the amortization schedule and displays the result on the page within the <iframe> element. The UpdatePreview method executes each time a user updates loan information in the application.
You can use a web API to download the calculated amortization schedule in XLSX and PDF formats on the client side.
Open the DocumentService.cs class and add the following methods to generate and export a loan amortization schedule to XLSX and PDF:
Implement a web API controller. Add a new Controllers folder to the project and create an ExportController.cs class within the folder. This class contains action methods that handle HTTP GET requests and return files in XLSX and PDF formats.
Open the Program.cs file. Call the MapControllers method to map incoming HTTP requests to the controller’s action methods.
Open the _Imports.razor file and add the following namespaces:
Open the Home.razor page and inject an instance of the IJSRuntime object into the page.
Handle the Click events of the Export to XLSX and Export to PDF buttons. These buttons call the following methods:
See Also
Use the Word Document API to Generate and Send Business Letters within a Blazor Server App