Introduction

AngularJS is a JavaScript library that can be wonderfully used with various flavors of ASP.NET (MVC, Core, Razor Pages, etc). In this exercise, we will create te second version of our payroll evaluation application.

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).
    Click Next
  5. Specify the Project Name as PayrollEvaluation2
  6. Click Next
  7. In the Additional Information dialog box, in the Framework combo box, select the highest version (.NET 9.0 (Standard Term Support).
    Click Create
  8. In the Solution Explorer, expand wwwroot and expand css
  9. Double-click site.css
  10. In the document, add two styles as follows: 
    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; }

Creating AngularJS Supoort

There are various ways you can use AngularJS. For example, you can create a form where operations are automatically performed. In most other cases, one of the reasons you are using AngularJS is to handle events. In such cases, you likely need to create a module and a controller. We will do that for our application.

Practical LearningPractical Learning: Creating AngularJS Support

  1. In the Solution Explorer, below wwwroot, right-click js -> Add -> New Item...
  2. In the left list of the Add New Item dialog box, expand ASP.NET Core, then expand Scripts
  3. In the middle list, click JavaScript File
  4. Change the file Name to PayPreparation
  5. Click Add
  6. In the empty document, type the following line: 
    // Create an Angular module
var appPayroll                   = angular.module('appPayroll', []);
// Create an Angular controller
appPayroll.controller("PayController", function () {
    /* Create a function to have a section of code 
     * where the calculations are made. */
    this.calculate               = function () {
        // Get the numbers from a form in a webpage
        var hSalary              = parseFloat(this.txtHourlySalary);

        var wk1Monday            = parseFloat(this.txtWeek1Monday);
        var wk1Tuesday           = parseFloat(this.txtWeek1Tuesday);
        var wk1Wednesday         = parseFloat(this.txtWeek1Wednesday);
        var wk1Thusday           = parseFloat(this.txtWeek1Thursday);
        var wk1Friday            = parseFloat(this.txtWeek1Friday);

        var wk2Monday            = parseFloat(this.txtWeek2Monday);
        var wk2Tuesday           = parseFloat(this.txtWeek2Tuesday);
        var wk2Wednesday         = parseFloat(this.txtWeek2Wednesday);
        var wk2Thusday           = parseFloat(this.txtWeek2Thursday);
        var wk2Friday            = parseFloat(this.txtWeek2Friday);

        // Calculate the sum of the numbers in the day text boxes
        var wk1TimeWorked        = wk1Monday + wk1Tuesday + wk1Wednesday + wk1Thusday + wk1Friday;
        var wk2TimeWorked        = wk2Monday + wk2Tuesday + wk2Wednesday + wk2Thusday + wk2Friday;

        // Declare some variables for the values that will be produced
        var wk1RegTime           = wk1TimeWorked;
        var wk1Overtime          = 0.00;
        var wk1RegPay            = hSalary * wk1TimeWorked;
        var wk1OverPay           = 0.00;

        var wk2RegTime           = wk2TimeWorked;
        var wk2Overtime          = 0.00;
        var wk2RegPay            = hSalary * wk2TimeWorked;
        var wk2OverPay           = 0.00;

        /* Use a conditional statement to find out whether
         * the employee worked more than 40 hours for the week. */
        if (wk1TimeWorked        > 40.00) {
            wk1RegTime           = 40.00;
            wk1Overtime          = wk1TimeWorked - 40.00;
            wk1RegPay            = hSalary * 40.00;
            wk1OverPay           = hSalary * 1.50 * wk1Overtime;
        }

        if (wk2TimeWorked        > 40.00) {
            wk2RegTime           = 40.00;
            wk2Overtime          = wk2TimeWorked - 40.00;
            wk2RegPay            = hSalary * 40.00;
            wk2OverPay           = hSalary * 1.50 * wk2Overtime;
        }

        /* Calculate the total salary for the week 
         * by adding the regular pay to the overtime pay. */
        var netPay               = wk1RegPay + wk1OverPay + wk2RegPay + wk2OverPay;

        // Display the calculated values in the appropriate text boxes
        this.txtHourlySalary     = hSalary;

        this.txtWeek1RegularTime = wk1RegTime;
        this.txtWeek1OverTime    = wk1Overtime;
        this.txtWeek1RegularPay  = wk1RegPay;
        this.txtWeek1OvertimePay = wk1OverPay;

        this.txtWeek2RegularTime = wk2RegTime;
        this.txtWeek2OverTime    = wk2Overtime;
        this.txtWeek2RegularPay  = wk2RegPay;
        this.txtWeek2OvertimePay = wk2OverPay;

        this.txtNetPay           = netPay;
    }
});

A Web Form for AngularJS

When you create an HTML webform that supports AngularJS operations. you must add some customer attributes to the HTML tags of the webpage and the Web controls. We will apply some examples.

Practical LearningPractical Learning: Creating a Web For for AngularJS

  1. In the Solution Explorer, expand Pages
  2. Double-click index.cshtml
  3. Change the document as follows: 
    @page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<h1 class="display-5 text-center fw-bold common-font">Payroll Evaluation</h1>

<hr />

<div ng-app="appPayroll">
    <form method="post" class="common-font encloser" ng-controller="PayController as pay">
    <div class="row mb-2">
        <label for="txtFirstName" class="col-form-label col-sm-4 fw-bold">First Name:</label>
        <div class="col-sm-4">
                <input id="txtFirstName" class="form-control" ng-model="pay.txtFirstName" />
        </div>
    </div>

    <div class="row mb-2">
        <label for="txtLastName" class="fw-bold col-sm-4 col-form-label">Last Name:</label>
        <div class="col-sm-4">
                <input id="txtLastName" class="form-control" ng-model="pay.txtLastName" />
        </div>
    </div>

    <div class="row mb-2">
        <label for="txtHourlySalary" class="fw-bold col-sm-4 col-form-label">Hourly Salary:</label>
        <div class="col-sm-4">
                <input type="text" id="txtHourlySalary"
                       class="form-control" ng-model="pay.txtHourlySalary" />
        </div>
    </div>

    <div class="fw-bold row mb-2">
        <div class="col-sm-5">
            <label class="col-form-label">Time Worked</label>
        </div>
        <div class="col-sm-4">
            <label>Week 1</label>
        </div>
        <div class="col-sm-3">
            <label>Week 2</label>
        </div>
    </div>

    <div class="row mb-2">
        <div class="col-sm-4">
            <label for="txtWeek1Monday" class="fw-bold col-sm-5 col-form-label">Monday:</label>
        </div>
        <div class="col-sm-4">
            <input type="text" id="txtWeek1Monday"
                   class="form-control" ng-model="pay.txtWeek1Monday" />
        </div>
        <div class="col-sm-4">
            <input id="txtWeek2Monday" class="form-control" ng-model="pay.txtWeek2Monday" />
        </div>
    </div>

    <div class="row mb-2">
        <div class="col-sm-4">
            <label for="txtWeek1Tuesday" class="fw-bold col-sm-5 col-form-label">Tuesday:</label>
        </div>
        <div class="col-sm-4">
            <input type="text" id="txtWeek1Tuesday"
                   class="form-control" ng-model="pay.txtWeek1Tuesday" />
        </div>
        <div class="col-sm-4">
            <input type="text" id="txtWeek2Tuesday"
                   class="form-control" ng-model="pay.txtWeek2Tuesday" />
        </div>
    </div>

    <div class="row mb-2">
        <div class="col-sm-4">
            <label for="txtWeek1Wednesday" class="fw-bold col-sm-5 col-form-label">Wednesday:</label>
        </div>
            <div class="col-sm-4">
                <input type="text" id="txtWeek1Wednesday"
                       class="form-control" ng-model="pay.txtWeek1Wednesday" />
        </div>
            <div class="col-sm-4">
                <input type="text" id="txtWeek2Wednesday"
                       class="form-control" ng-model="pay.txtWeek2Wednesday" />
        </div>
    </div>

    <div class="row mb-2">
        <div class="col-sm-4">
            <label for="txtWeek1Thursday" class="fw-bold col-sm-5 col-form-label">Thursday:</label>
        </div>
            <div class="col-sm-4">
                <input type="text" id="txtWeek1Thursday"
                       class="form-control" ng-model="pay.txtWeek1Thursday" />
        </div>
            <div class="col-sm-4">
                <input type="text" id="txtWeek2Thursday"
                       class="form-control" ng-model="pay.txtWeek2Thursday" />
        </div>
    </div>

    <div class="row mb-2">
        <div class="col-sm-4">
            <label for="txtWeek1Friday" class="fw-bold col-sm-5 col-form-label">Friday:</label>
        </div>
            <div class="col-sm-4">
                <input type="text" id="txtWeek1Friday"
                       class="form-control" ng-model="pay.txtWeek1Friday" />
        </div>
            <div class="col-sm-4">
                <input type="text" id="txtWeek2Friday"
                       class="form-control" ng-model="pay.txtWeek2Friday" />
        </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="submit" value="Calculate" id="btnCalculate"
                       class="btn btn-primary" ng-click="pay.calculate()" />
        </div>
    </div>

    <hr />

    <div class="row mb-2">
        <label for="txtEmployeeName" class="fw-bold col-sm-4 col-form-label">Employee Name:</label>
        <div class="col-sm-8">
                <span id="employeeName" class="form-control">{{pay.txtFirstName}} {{pay.txtLastName}}</span>
        </div>
    </div>

    <div class="fw-bold row mb-2">
        <div class="col-sm-5">
            <label class="col-form-label">Pay Summary</label>
        </div>
        <div class="col-sm-4">
            <label>Week 1</label>
        </div>
        <div class="col-sm-3">
            <label>Week 2</label>
        </div>
    </div>

    <div class="row mb-2">
        <div class="col-sm-4">
            <label for="txtWeek1RegularTime" class="fw-bold col-form-label">Regular Time:</label>
        </div>
        <div class="col-sm-4">
                <span id="txtWeek1RegularTime" class="form-control">{{pay.txtWeek1RegularTime | number:2}}</span>
        </div>
        <div class="col-sm-4">
                <span id="txtWeek2RegularTime" class="form-control">{{pay.txtWeek2RegularTime | number:2}}</span>
        </div>
    </div>

    <div class="row mb-2">
        <div class="col-sm-4">
            <label for="txtWeek1OverTime" class="fw-bold col-form-label">Over Time:</label>
        </div>
        <div class="col-sm-4">
                <span id="txtWeek1OverTime" class="form-control">{{pay.txtWeek1OverTime | number:2}}</span>
        </div>
        <div class="col-sm-4">
                <span id="txtWeek2OverTime" class="form-control">{{pay.txtWeek2OverTime | number:2}}</span>
        </div>
    </div>

    <div class="row mb-2">
        <div class="col-sm-4">
            <label for="txtWeek1RegularPay" class="fw-bold col-form-label">Regular Pay:</label>
        </div>
        <div class="col-sm-4">
                <span id="txtWeek1RegularPay" class="form-control">{{pay.txtWeek1RegularPay | number:2}}</span>
        </div>
        <div class="col-sm-4">
                <span id="txtWeek2RegularPay" class="form-control">{{pay.txtWeek2RegularPay | number:2}}</span>
        </div>
    </div>

    <div class="row mb-2">
        <div class="col-sm-4">
            <label for="txtWeek1OvertimePay" class="fw-bold col-form-label">Overtime Pay:</label>
        </div>
        <div class="col-sm-4">
                <span id="txtWeek1OvertimePay" class="form-control">{{pay.txtWeek1OvertimePay | number:2}}</span>
        </div>
        <div class="col-sm-4">
                <span id="txtWeek2OvertimePay" class="form-control">{{pay.txtWeek2OvertimePay | number:2}}</span>
        </div>
    </div>

    <div class="row mb-2">
        <div class="col-sm-4">
            <label></label>
        </div>
        <div class="col-sm-4 text-center">
            <label for="txtNetPay" class="fw-bold col-form-label">Net Pay:</label>
        </div>
        <div class="col-sm-4">
                <span id="txtNetPay" class="form-control">{{pay.txtNetPay | number:2}}</span>
        </div>
    </div>
    </form>
</div>

Finalizing the Application

If you create a Web application that supports AngularJS, you have many options to present the application to a user. For our example, we will keep our application simple.

Practical LearningPractical Learning: Finalizing the Application

  1. In the Solution Explorer, under Pages, expand Shared and double-click _Layout.cshtml
  2. 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; 2001-@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>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.js"></script>
    <script src="~/js/PayPreparation.js" asp-append-version="true"></script>

    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>
  3. To execute the application, on the main menu, click Debug -> Start Without Debugging

    Payroll Evaluation

  4. In the text boxes, type the following values: 
    First Name:    Michael
Last Name:     Carlock
Hourly Salary: 28.46
            Week 1      Week 2
Monday:        7        9.5
Tuesday:       8        8.5
Wednesday:     6.5      10.5
Thursday:      8.5      9
Friday:        7.5      8

    Payroll Evaluation

  5. Click the Calculate button:

    Payroll Evaluation

  6. Change the values in the text boxes with the following: 
    First Name:    Catherine
Last Name:     Busbey
Hourly Salary: 24.37
            Week 1      Week 2
Monday:        9.5      8
Tuesday:       8        7.5
Wednesday:     10.5     8
Thursday:      9        6.5
Friday:        8.5      7.5
  7. Click the Calculate button:

    Payroll Evaluation

  8. Close the browser and return to your programming environment
  9. Close your programming environment
Home Copyright © 2021-2025, FunctionX Friday 20 December 2024, 16:24 Home