Introduction

jQuery is a wonderful JavaScript library that can help you perform many Web-forms based operations. In this exercise, we will create a small application that has a webpage equipped with a form and text boxes.

ApplicationPractical Learning: Creating the Application

  1. Start Microsoft Visual Studio
  2. In the Visual Studio 2022 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 PayrollEvaluation1
  7. Click Next
  8. In Framework combo box of the Additional Information dialog box, select the highest version (.NET 9.0 (Standart 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";
}

<div class="text-center">
    <h1 class="display-4">Company Accounting</h1>

    <h1 class="common-font fw-bold">Payroll Evaluation</h1>
</div>

<hr />

<form method="post" class="common-font encloser">
    <div class="row mb-2">
        <label for="txtFirstName" class="col-form-label col-sm-5 fw-bold">First Name:</label>
        <div class="col-sm-7">
            <input id="txtFirstName" class="form-control" />
        </div>
    </div>

    <div class="row mb-2">
        <label for="txtLastName" class="fw-bold col-sm-5 col-form-label">Last Name:</label>
        <div class="col-sm-7">
            <input id="txtLastName" class="form-control" />
        </div>
    </div>

    <div class="row mb-2">
        <label for="txtHourlySalary" class="fw-bold col-sm-5 col-form-label">Hourly Salary:</label>
        <div class="col-sm-7">
            <input id="txtHourlySalary" name="txtHourlySalary" class="form-control" />
        </div>
    </div>

    <div class="row mb-2">
        <label for="txtMonday" class="fw-bold col-sm-5 col-form-label">Monday:</label>
        <div class="col-sm-7">
            <input id="txtMonday" name="txtMonday" class="form-control" />
        </div>
    </div>

    <div class="row mb-2">
        <label for="txtTuesday" class="fw-bold col-sm-5 col-form-label">Tuesday:</label>
        <div class="col-sm-7">
            <input id="txtTuesday" name="txtTuesday" class="form-control" />
        </div>
    </div>

    <div class="row mb-2">
        <label for="txtWednesday" class="fw-bold col-sm-5 col-form-label">Wednesday:</label>
        <div class="col-sm-7">
            <input id="txtWednesday" class="form-control" />
        </div>
    </div>

    <div class="row mb-2">
        <label for="txtThursday" class="fw-bold col-sm-5 col-form-label">Thursday:</label>
        <div class="col-sm-7">
            <input id="txtThursday" class="form-control" />
        </div>
    </div>

    <div class="row mb-2">
        <label for="txtFriday" class="fw-bold col-sm-5 col-form-label">Friday:</label>
        <div class="col-sm-7">
            <input id="txtFriday" class="form-control" />
        </div>
    </div>

    <div class="row mb-2">
        <label class="fw-bold col-sm-6 col-form-label"></label>
        <div class="col-sm-6">
            <input type="button" value="Calculate" id="btnCalculate" class="btn btn-primary" />
        </div>
    </div>

    <div class="row mb-2">
        <label for="txtEmployeeName" class="fw-bold col-sm-5 col-form-label">Employee Name:</label>
        <div class="col-sm-7">
            <input id="txtEmployeeName" class="form-control" />
        </div>
    </div>
    
    <hr />

    <div class="row mb-2">
        <label for="txtRegularTime" class="fw-bold col-sm-5 col-form-label">Regular Time:</label>
        <div class="col-sm-7">
            <input id="txtRegularTime" class="form-control" />
        </div>
    </div>

    <div class="row mb-2">
        <label for="txtOverTime" class="fw-bold col-sm-5 col-form-label">Over Time:</label>
        <div class="col-sm-7">
            <input id="txtOverTime" class="form-control" />
        </div>
    </div>

    <div class="row mb-2">
        <label for="txtRegularPay" class="fw-bold col-sm-5 col-form-label">Regular Pay:</label>
        <div class="col-sm-7">
            <input id="txtRegularPay" class="form-control" />
        </div>
    </div>

    <div class="row mb-2">
        <label for="txtOvertimePay" class="fw-bold col-sm-5 col-form-label">Overtime Pay:</label>
        <div class="col-sm-7">
            <input id="txtOvertimePay" class="form-control" />
        </div>
    </div>

    <div class="row mb-2">
        <label for="txtNetPay" class="fw-bold col-sm-5 col-form-label">Net Pay:</label>
        <div class="col-sm-7">
            <input id="txtNetPay" class="form-control" />
        </div>
    </div>
</form>

<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 = $("#txtHourlySalary").val();

            var mon = parseFloat($("#txtMonday").val());
            var tue = parseFloat($("#txtTuesday").val());
            var wed = parseFloat($("#txtWednesday").val());
            var thu = parseFloat($("#txtThursday").val());
            var fri = parseFloat($("#txtFriday").val());

            var emplName = firstName + " " + lastName;
            var totalTime = mon + tue + wed + thu + fri;

            var ovtSalary = sal * 1.5;

            var regularPay  = 0.00;
            var regularTime = 0.00;
            var overTime    = 0.00;
            var overtimePay = 0.00;

            // If the employee worked below 40 hours, there is no overtime
            if (totalTime < 40)
            {
                regularTime = totalTime;
                regularPay  = sal * totalTime;
                overTime    = 0.00;
                overtimePay = 0.00;
            } // If the employee worked over 40 hours, calculate the overtime
            else // if (totalTime >= 40)
            {
                regularTime = 40;
                regularPay  = sal * 40;
                overTime    = totalTime - 40;
                overtimePay = overTime * ovtSalary;
            }

            var netPay = regularPay + overtimePay;

            $("#txtEmployeeName").val(emplName);
            $("#txtRegularTime").val(regularTime.toFixed(2));
            $("#txtOverTime").val(overTime.toFixed(2));
            $("#txtRegularPay").val(regularPay.toFixed(2));
            $("#txtOvertimePay").val(overtimePay.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:

    Payroll Evaluation

  19. In the top text boxes, enter the following values: 
    First Name:    Michael
Last Name:     Carlock
Hourly Salary: 28.46
Monday:        7
Tuesday:       8
Wednesday:     6.5
Thursday:      8.5
Friday:        7.5

    Payroll Evaluation

  20. Click the Calculate button:

    Payroll Evaluation

  21. Change the values in the top text boxes as follows: 
    First Name:    Catherine
Last Name:     Busbey
Hourly Salary: 24.37
Monday:        9.5
Tuesday:       8
Wednesday:     10.5
Thursday:      9
Friday:        8.5
  22. Click the Calculate button:

    Payroll Evaluation

  23. Press 1 to close the window and return to your programming environment
  24. Close your programming environment
Home Copyright © 2021-2025, FunctionX Tuesday 17 December 2024, 11:28 Home