Payroll Evaluation 1

Razor Pages Application: Payroll Evaluation - 1 Week

Introduction

We are learning how to use the C# programming language. We are also learning to create ASP.NET Web applications. In this introductory lesson, we will create a semi-simple project with one useful webpage. The webpage will be equipped with Web controls as a time sheet. We will request some values from the user. We will then perform some operations to calculate toe regular time, the overtime, the regular pay, the overtime pay, and the net pay. We will then display a pay summary.

Practical Learning: Creating the Application

Start Microsoft Visual Studio
In the Visual Studio 2022 dialog box, click Create a New Project
In the Create a New Project dialog box, in the Languages combo box, select C#
In the list of projects templates, click ASP.NET Core Web App (Model-View-Controller)
Click Next
Specify the Project Name as PayrollEvaluation1
Click Next
In Framework combo box of the Additional Information dialog box, select the highest version (.NET 9.0 (Standard Term Support).
Click Create
In the Solution Explorer, expand wwwroot and expand css
Double-click site.css

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 }

In the Solution Explorer, expand Controllers, and double-click HomeController

Change the Index() method as follows:

using System.Diagnostics;
using Microsoft.AspNetCore.Mvc;
using PayrollEvaluation10.Models;

namespace PayrollEvaluation1.Controllers
{
    public class HomeController : Controller
    {
        private readonly ILogger<HomeController> _logger;

        public HomeController(ILogger<HomeController> logger)
        {
            _logger = logger;
        }

        public IActionResult Index(string txtFirstName, string txtLastName,
                                   string txtHourlySalary,
                                   string txtMonday, string txtTuesday,
                                   string txtWednesday, string txtThursday, string txtFriday)
        {
            string? employeeName = string.Empty;

            string? strRegularTime = string.Empty;
            string? strOverTime = string.Empty;
            string? strRegularPay = string.Empty;
            string? strOvertimePay = string.Empty;

            string? strNetPay = string.Empty;

            double hourlySalary = 0.00;

            double monday    = 0d;
            double tuesday   = 0d;
            double wednesday = 0d;
            double thursday  = 0d;
            double friday    = 0d;

            if(!string.IsNullOrWhiteSpace(txtHourlySalary))
                hourlySalary = double.Parse(txtHourlySalary!);

            if (!string.IsNullOrWhiteSpace(txtMonday))
                monday = double.Parse(txtMonday!);
            if (!string.IsNullOrWhiteSpace(txtTuesday))
                tuesday = double.Parse(txtTuesday!);
            if (!string.IsNullOrWhiteSpace(txtWednesday))
                wednesday = double.Parse(txtWednesday!);
            if (!string.IsNullOrWhiteSpace(txtThursday))
                thursday = double.Parse(txtThursday!);
            if (!string.IsNullOrWhiteSpace(txtFriday))
                friday = double.Parse(txtFriday!);

            double totalTime = monday + tuesday + wednesday + thursday + friday;
            double ovtSalary = hourlySalary * 1.5;
            
            double regularTime = 0.00;
            double overTime = 0.00;
            double regularPay = 0.00;
            double overtimePay = 0.00;
            
            if (totalTime < 40)
            {
                regularTime = totalTime;
                regularPay = hourlySalary * totalTime;
                overTime = 0.00;
                overtimePay = 0.00;
            }
            else // if (totalTime >= 40)
            {
                regularTime = 40;
                overTime = totalTime - 40;
                regularPay = hourlySalary * 40;
                overtimePay = overTime * ovtSalary;
            }
            
            var netPay = regularPay + overtimePay;

            ViewBag.strFirstName = txtFirstName;
            ViewBag.strLastName =  txtLastName;
            ViewBag.strEmployeeName = txtFirstName + " " + txtLastName;

            ViewBag.strHourlySalary = $"{hourlySalary:F}";

            ViewBag.strMonday = string.Format("{0:F}", monday);
            ViewBag.strTuesday = string.Format("{0:F}", tuesday);
            ViewBag.strWednesday = string.Format("{0:F}", wednesday);
            ViewBag.strThursday = string.Format("{0:F}", thursday);
            ViewBag.strFriday = string.Format("{0:F}", friday);

            ViewBag.strRegularTime = string.Format("{0:F}", regularTime);
            ViewBag.strOverTime = string.Format("{0:F}", overTime);
            ViewBag.strRegularPay = string.Format("{0:F}", regularPay);
            ViewBag.strOvertimePay = string.Format("{0:F}", overtimePay);
            ViewBag.strNetPay = string.Format("{0:F}", netPay);
        
            return View();
        }

        public IActionResult Privacy()
        {
            return View();
        }

        [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
        public IActionResult Error()
        {
            return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
        }
    }
}

In the Solution Explorer, expand Views, and expand Home
Below Home, double-click Index.cshtml

Change the document as follows:

@{
    ViewData["Title"] = "Payroll Evaluation";

    string? strFirstName = ViewBag.strFirstName;
    string? strLastName = ViewBag.strLastName;
    string? strEmployeeName = ViewBag.strEmployeeName;

    string? strHourlySalary = ViewBag.strHourlySalary;

    string? strMonday = ViewBag.strMonday;
    string? strTuesday = ViewBag.strTuesday;
    string? strWednesday = ViewBag.strWednesday;
    string? strThursday = ViewBag.strThursday;
    string? strFriday = ViewBag.strFriday;

    string? strRegularTime = ViewBag.strRegularTime;
    string? strOverTime = ViewBag.strOverTime;
    string? strRegularPay = ViewBag.strRegularPay;
    string? strOvertimePay = ViewBag.strOvertimePay;
    string? strNetPay = ViewBag.strNetPay;
}

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

<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 name="txtFirstName" class="form-control" value="@strFirstName" />
        </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 name="txtLastName" class="form-control" value="@strLastName" />
        </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 name="txtHourlySalary" value="@strHourlySalary"
                   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 name="txtMonday"
                   class="form-control" value="@strMonday" />
        </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 name="txtTuesday"
                   class="form-control" value="@strTuesday" />
        </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 name="txtWednesday" class="form-control" value="@strWednesday" />
        </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 name="txtThursday" class="form-control" value="@strThursday" />
        </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 name="txtFriday" class="form-control" value="@strFriday" />
        </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" />
        </div>
    </div>

    <hr />

    <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 class="form-control" value="@strEmployeeName" />
        </div>
    </div>

    <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" value="@strRegularTime" />
        </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" value="@strOverTime" />
        </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" value="@strRegularPay" />
        </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" value="@strOvertimePay" />
        </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" value="@strNetPay" />
        </div>
    </div>
</form>

In the Solution Explorer, below Pages, expand Shared
Double-click _Layout.cshtm

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="~/PayrollEvaluation10.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="common-font container-fluid">
                <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="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-controller="Home" asp-action="Index">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="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; 2011-@DateTime.Today.Year - Payroll Evaluation - <a asp-area="" asp-controller="Home" asp-action="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>

To execute the application, press Ctrl + F5:

In the 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

Click the Calculate button:
Close your programming environment


Home	Copyright © 2021-2026, FunctionX	Monday 27 January 2025, 09:43	Home