How to build an online bill calculation tool with ASP.NET Core + JavaScript?

Olivia Jones 20 Reputation points
2025-09-10T07:37:56.78+00:00

Hi everyone,

I am trying to build a small online electricity bill calculator where users can enter their consumed units and instantly see the calculated bill based on the latest tariff slabs.

My requirements are:

  • Input field for number of units

Backend logic (ASP.NET Core) to apply the correct tariff slab (e.g., 1–100 units, 101–200 units, etc.)

Show the calculated bill instantly on the same page (using JavaScript or AJAX)

Optionally allow the user to download the result as a PDF

Where I’m stuck:

I’m not sure how to best structure the tariff calculation logic (hardcode values in C#, or load them dynamically from a database?).

What’s the recommended way in ASP.NET Core to expose this calculation so that the front-end (JavaScript) can fetch the bill amount without refreshing the page?

Any guidance on generating a simple downloadable PDF of the bill (library recommendations)?

Stack I’m using:

ASP.NET Core 7.0 (MVC)

SQL Server (if needed for tariff storage)

JavaScript/jQuery for the front-end

Has anyone here built something similar or can suggest the best approach to implement this feature?

Thanks in advance for your help! 🙏Hi everyone,

I am trying to build a small online electricity bill calculator where users can enter their consumed units and instantly see the calculated bill based on the latest tariff slabs.

My requirements are:

Input field for number of units

Backend logic (ASP.NET Core) to apply the correct tariff slab (e.g., 1–100 units, 101–200 units, etc.)

Show the calculated bill instantly on the same page (using JavaScript or AJAX)

Optionally allow the user to download the result as a PDF

Where I’m stuck:

I’m not sure how to best structure the tariff calculation logic (hardcode values in C#, or load them dynamically from a database?).

What’s the recommended way in ASP.NET Core to expose this calculation so that the front-end (JavaScript) can fetch the bill amount without refreshing the page?

Any guidance on generating a simple downloadable PDF of the bill (library recommendations)?

Stack I’m using:

ASP.NET Core 7.0 (MVC)

SQL Server (if needed for tariff storage)

JavaScript/jQuery for the front-end

Has anyone here built something similar or can suggest the best approach to implement this feature?

Thanks in advance for your help! 🙏

Developer technologies | ASP.NET Core | Other

Locked Question. You can vote on whether it's helpful, but you can't add comments or replies or follow the question.

0 comments No comments

Answer accepted by question author

Danny Nguyen (WICLOUD CORPORATION) 8,020 Reputation points Microsoft External Staff Moderator
2025-09-10T09:28:52.3566667+00:00

Hi @Olivia Jones ,

Thanks for sharing the details of your project. I will address the three areas you asked about:

1. Structuring the calculation logic You have a few options depending on how often tariffs change and who maintains them:

  • Hardcoded in C# – simplest to start with, good if tariffs rarely change and only developers update them.
  • Stored in appsettings.json – still simple, allows updating tariff slabs without recompiling, but requires an app restart after edits.
  • Stored in a database (SQL Server) – best if tariffs change frequently or need to be updated by non-developers (e.g., via an admin UI).

For a quick prototype, hardcoding the slabs in a service class is fine. If this is going into production where tariffs may change, a database-driven approach is more maintainable.

2. Exposing the calculation to the frontend The recommended way in ASP.NET Core is to create an API endpoint that accepts the unit count and returns the calculated bill as JSON.

  • Your frontend (JavaScript/jQuery) can call this endpoint using fetch or AJAX.
  • This lets you update the page dynamically without a full reload.
  • Example:
    • Endpoint: /api/bill/calculate?units=150
    • Response: { "amount": 300 }
    • JavaScript uses the response to update the DOM.

This keeps the frontend lightweight and the calculation logic centralized on the backend.

You can check this guide out for how to create call an ASP.NET Core web API with JavaScript: Tutorial: Call an ASP.NET Core web API with JavaScript

3. Generating a downloadable PDF A common approach is to:

  • Render the bill content (units, amount, etc.) into HTML or a simple document object.
  • Pass that to a PDF library that can output a proper PDF.
  • Return the PDF file from an endpoint so the browser can download it.

Libraries you can consider:

  • QuestPDF (C# fluent API for building documents, modern and actively maintained).
  • DinkToPdf (wrapper around wkhtmltopdf, converts HTML directly to PDF).

Both are widely used in ASP.NET Core apps.

Here's a small sample on how to implement QuestPDF in ASP.NET projects Integration with ASP.NET


Hope this helps, feel free to reach out if you need any clarification.

Was this answer helpful?

1 person found this answer helpful.

2 additional answers

Sort by: Most helpful
  1. Deleted

    This answer has been deleted due to a violation of our Code of Conduct. The answer was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.


    Comments have been turned off. Learn more

  2. Deleted

    This answer has been deleted due to a violation of our Code of Conduct. The answer was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.


    Comments have been turned off. Learn more