Introduction

We are learning to use jQuery in an ASP.NET Web application. In this project, we will create a semi-small application that has a webpage equipped with various Web controls on a form. The user will provide the values of the times worked. We will collect those values and calculate some values, including the net pay.

Practical Learning: Creating the Application

1. Start Microsoft Visual Studio
2. In the Visual Studio 2026 dialog box, click Create a New Project
3. In the Create a New Project dialog box, in the Languages combo box, select C#
4. In the list of projects templates, click ASP.NET Core Web App (Razor Pages)
5. Click Next
6. Specify the Project Name as PayrollEvaluation2
7. Click Next
8. In Framework combo box of the Additional Information dialog box, select the highest version (.NET 10.0 (Long Term Support)).
   Click Create
9. In the Solution Explorer, expand wwwroot and expand css
10. Double-click site.css
11. In the document, add the following styles:

    html {
      font-size: 14px;
    }
    
    @media (min-width: 768px) {
      html {
        font-size: 16px;
      }
    }
    
    .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
      box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
    }
    
    html {
      position: relative;
      min-height: 100%;
    }
    
    body {
      margin-bottom: 60px;
    }
    
    .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
      color: var(--bs-secondary-color);
      text-align: end;
    }
    
    .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
      text-align: start;
    }
    
    .encloser    { margin:      auto;
                   width:       450px; }
    .common-font { font-family: Garamond, Georgia, Cambria, 'Times New Roman', Times, serif }

12. In the Solution Explorer, expand Pages
13. Below Pages, double-click Index.cshtml
14. Change the document as follows:

    @page
    @model IndexModel
    @{
        ViewData["Title"] = "Payroll Evaluation";
    }
    
    <h2 class="common-font text-center fw-bold">Payroll Evaluation</h2>
    
    <hr />
    
    <form name="PayrollEvaluation" method="post">
        <div class="work-contents common-font">
            <table class="table table-striped">
                <tr>
                    <td class="fw-bold large-text">First Name:</td>
                    <td><input type="text" class="form-control" it="txtFirstName" style="width: 150px" /></td>
                </tr>
                <tr>
                    <td class="fw-bold large-text">Last Name:</td>
                    <td><input type="text" class="form-control" it="txtLastName" style="width: 150px" /></td>
                </tr>
                <tr>
                    <td class="fw-bold">Hourly Salary:</td>
                    <td><input type="text" class="form-control" it="txtHourlySalary" style="width: 150px" /></td>
                </tr>
            </table>
            <table class="table table-striped">
                <tr>
                    <td class="fw-bold">Time Worked</td>
                    <td class="fw-bold text-center">Monday</td>
                    <td class="fw-bold text-center">Tuesday</td>
                    <td class="fw-bold text-center">Wednesday</td>
                    <td class="fw-bold text-center">Thursday</td>
                    <td class="fw-bold text-center">Friday</td>
                </tr>
                <tr>
                    <td class="fw-bold">Week 1:</td>
                    <td><input type="text" class="form-control" id="txtWeek1Monday"    /></td>
                    <td><input type="text" class="form-control" id="txtWeek1Tuesday"   /></td>
                    <td><input type="text" class="form-control" id="txtWeek1Wednesday" /></td>
                    <td><input type="text" class="form-control" id="txtWeek1Thursday"  /></td>
                    <td><input type="text" class="form-control" id="txtWeek1Friday"    /></td>
                </tr>
                <tr>
                    <td class="fw-bold">Week 2:</td>
                    <td><input type="text" class="form-control" id="txtWeek2Monday"    /></td>
                    <td><input type="text" class="form-control" id="txtWeek2Tuesday"   /></td>
                    <td><input type="text" class="form-control" id="txtWeek2Wednesday" /></td>
                    <td><input type="text" class="form-control" id="txtWeek2Thursday"  /></td>
                    <td><input type="text" class="form-control" id="txtWeek2Friday"    /></td>
                </tr>
            </table>
            <table class="table table-striped">
                <tr>
                    <td class="large-text"></td>
                    <td class="text-center"><input type="button" value="Calculate" id="btnCalculate" class="btn btn-primary" /></td>
                </tr>
            </table>
    
            <hr />
            
            <table class="table table-striped common-font">
                <tr>
                    <td class="fw-bold large-text">Full Name:</td>
                    <td><input class="form-control" it="txtEmployeeName" /></td>
                </tr>
            </table>
        </div>
    
        <div class="pay-contents common-font">
            <table class="table table-striped">
                <tr>
                    <td>&nbsp;</td>
                    <td class="text-center fw-bold" colspan="2">Week 1</td>
                    <td class="text-center fw-bold" colspan="2">Week 2</td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td class="text-center fw-bold">Time</td>
                    <td class="text-center fw-bold">Pay</td>
                    <td class="text-center fw-bold">Time</td>
                    <td class="text-center fw-bold">Pay</td>
                </tr>
                <tr>
                    <td class="fw-bold">Regular:</td>
                    <td class="text-center fw-bold"><input id="txtWeek1RegularTime" class="form-control" /></td>
                    <td class="text-center fw-bold"><input id="txtWeek1RegularPay"  class="form-control" /></td>
                    <td class="text-center fw-bold"><input id="txtWeek2RegularTime" class="form-control" /></td>
                    <td class="text-center fw-bold"><input id="txtWeek2RegularPay"  class="form-control" /></td>
                </tr>
                <tr>
                    <td class="fw-bold">Overtime:</td>
                    <td class="text-center fw-bold"><input id="txtWeek1OverTime"    class="form-control" /></td>
                    <td class="text-center fw-bold"><input id="txtWeek1OvertimePay" class="form-control" /></td>
                    <td class="text-center fw-bold"><input id="txtWeek2OverTime"    class="form-control" /></td>
                    <td class="text-center fw-bold"><input id="txtWeek2OvertimePay" class="form-control" /></td>
                </tr>
                <tr>
                    <td class="fw-bold">Summary:</td>
                    <td class="text-center fw-bold"><input id="txtWeek1TotalTime"   class="form-control" /></td>
                    <td class="text-center fw-bold"><input id="txtWeek1NetPay"      class="form-control" /></td>
                    <td class="text-center fw-bold"><input id="txtWeek2TotalTime"   class="form-control" /></td>
                    <td class="text-center fw-bold"><input id="txtWeek2NetPay"      class="form-control" /></td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td class="fw-bold">Net Pay:</td>
                    <td class="text-center fw-bold"><input id="txtNetPay" class="form-control" /></td>
                </tr>
            </table>
        </div>
    </form>
    
    <hr />
    
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btnCalculate").on("click", function () {
                var firstName = $("#txtFirstName").val();
                var lastName  = $("#txtLastName").val();
    
                var sal    = parseFloat($("#txtHourlySalary").val());
    
                var wk1Mon = parseFloat($("#txtWeek1Monday").val());
                var wk1Tue = parseFloat($("#txtWeek1Tuesday").val());
                var wk1Wed = parseFloat($("#txtWeek1Wednesday").val());
                var wk1Thu = parseFloat($("#txtWeek1Thursday").val());
                var wk1Fri = parseFloat($("#txtWeek1Friday").val());
    
                var wk2Mon = parseFloat($("#txtWeek2Monday").val());
                var wk2Tue = parseFloat($("#txtWeek2Tuesday").val());
                var wk2Wed = parseFloat($("#txtWeek2Wednesday").val());
                var wk2Thu = parseFloat($("#txtWeek2Thursday").val());
                var wk2Fri = parseFloat($("#txtWeek2Friday").val());
    
                var emplName = firstName + " " + lastName;
    
                var wk1TotalTime   = wk1Mon + wk1Tue + wk1Wed + wk1Thu + wk1Fri;
                var wk2TotalTime   = wk2Mon + wk2Tue + wk2Wed + wk2Thu + wk2Fri;
    
                var overSalary     = sal * 1.50;
    
                var wk1RegularTime = 0.00;
                var wk1OverTime    = 0.00;
                var wk1RegularPay  = 0.00;
                var wk1OvertimePay = 0.00;
    
                var wk2RegularTime = 0.00;
                var wk2OverTime    = 0.00;
                var wk2RegularPay  = 0.00;
                var wk2OvertimePay = 0.00;
    
                // If the employee worked below 40 hours, there is no overtime
                if(wk1TotalTime < 40.00)
                {
                    wk1RegularTime = wk1TotalTime;
                    wk1OverTime    = 0.00;
                    wk1RegularPay  = sal * wk1TotalTime;
                    wk1OvertimePay = 0.00;
                } // If the employee worked over 40 hours, calculate the overtime
                else // if (wk1TotalTime >= 40)
                {
                    wk1RegularTime = 40.00;
                    wk1OverTime    = wk1TotalTime - 40.00;
                    wk1RegularPay  = sal * 40.00;
                    wk1OvertimePay = wk1OverTime * overSalary;
                }
    
                if(wk2TotalTime < 40.00)
                {
                    wk2RegularTime = wk2TotalTime;
                    wk2OverTime    = 0.00;
                    wk2RegularPay  = sal * wk2TotalTime;
                    wk2OvertimePay = 0.00;
                }
                else // if(wk2TotalTime >= 40)
                {
                    wk2RegularTime = 40.00;
                    wk2OverTime    = wk2TotalTime - 40;
                    wk2RegularPay  = sal * 40.00;
                    wk2OvertimePay = wk2OverTime * overSalary;
                }
    
                var week1NetPay    = wk1RegularPay + wk1OvertimePay;
                var week2NetPay    = wk2RegularPay + wk2OvertimePay;
                var netPay         = week1NetPay + week2NetPay;
    
                $("#txtEmployeeName").val(firstName);
    
                $("#txtWeek1RegularTime").val(wk1RegularTime.toFixed(2));
                $("#txtWeek1OverTime").val(wk1OverTime.toFixed(2));
                $("#txtWeek1RegularPay").val(wk1RegularPay.toFixed(2));
                $("#txtWeek1OvertimePay").val(wk1OvertimePay.toFixed(2));
                $("#txtWeek1TotalTime").val(wk1TotalTime.toFixed(2));
                $("#txtWeek1NetPay").val(week1NetPay.toFixed(2));
    
                $("#txtWeek2RegularTime").val(wk2RegularTime.toFixed(2));
                $("#txtWeek2OverTime").val(wk2OverTime.toFixed(2));
                $("#txtWeek2RegularPay").val(wk2RegularPay.toFixed(2));
                $("#txtWeek2OvertimePay").val(wk2OvertimePay.toFixed(2));
                $("#txtWeek2TotalTime").val(wk2TotalTime.toFixed(2));
                $("#txtWeek2NetPay").val(week2NetPay.toFixed(2));
    
                $("#txtNetPay").val(netPay.toFixed(2));
            });
        });
    </script>

15. In the Solution Explorer, below Pages, expand Shared
16. Double-click _Layout.cshtm
17. Change the document as follows:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>@ViewData["Title"] - Payroll Evaluation</title>
        <script type="importmap"></script>
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
        <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
        <link rel="stylesheet" href="~/PayrollEvaluation1.styles.css" asp-append-version="true" />
    </head>
    <body>
        <header>
            <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
                <div class="container">
                    <a class="navbar-brand" asp-area="" asp-page="/Index">Payroll Evaluation</a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                            aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                        <ul class="navbar-nav flex-grow-1">
                            <li class="nav-item">
                                <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </header>
        <div class="container">
            <main role="main" class="pb-3">
                @RenderBody()
            </main>
        </div>
    
        <footer class="border-top footer text-muted">
            <div class="container">
                <p class="common-font text-center">&copy; 2024-@DateTime.Today.Year - Payroll Evaluation - <a asp-area="" asp-page="/Privacy">Privacy</a></p>
            </div>
        </footer>
    
        <script src="~/lib/jquery/dist/jquery.min.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
        <script src="~/js/site.js" asp-append-version="true"></script>
    
        @await RenderSectionAsync("Scripts", required: false)
    </body>
    </html>

18. To execute the application, press Ctrl + F5:

    

19. In the top text boxes, enter the following values:

    First Name:    Michael
    Last Name:     Carlock
    Hourly Salary: 28.46
    Week 1
        Monday:        7
        Tuesday:       8
        Wednesday:     6.5
        Thursday:      8.5
        Friday:        7.5
    Week 2
        Monday:        6.5
        Tuesday:       7.5
        Wednesday:     8
        Thursday:      6.5
        Friday:        7

    

20. Click the Calculate button:

    

21. Change the values in the top text boxes as follows:

    First Name:    Catherine
    Last Name:     Busbey
    Hourly Salary: 24.37
    Week 1
        Monday:        9.5
        Tuesday:       8
        Wednesday:     10.5
        Thursday:      9
        Friday:        8.5
    Week 2
        Monday:        10
        Tuesday:       8.5
        Wednesday:     9
        Thursday:      9.5
        Friday:        8.5

22. Click the Calculate button:

    

23. Close your programming environment

Home	Copyright © 2021-2026, FunctionX	Sunday 29 March 2026, 22:12	Home