Payroll Evaluation 1

Razor Pages Application: Payroll Evaluation - 2 Weeks

Introduction

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 PayrollEvaluation2
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 PayrollEvaluation20.Models;

namespace PayrollEvaluation20.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 txtWeek1Monday, string txtWeek1Tuesday,
                                   string txtWeek1Wednesday, string txtWeek1Thursday, string txtWeek1Friday,
                                   string txtWeek2Monday, string txtWeek2Tuesday,
                                   string txtWeek2Wednesday, string txtWeek2Thursday, string txtWeek2Friday)
        {
            double hourlySalary = 0.00;

            double wk1Monday    = 0d;
            double wk1Tuesday   = 0d;
            double wk1Wednesday = 0d;
            double wk1Thursday  = 0d;
            double wk1Friday    = 0d;

            double wk2Monday    = 0d;
            double wk2Tuesday   = 0d;
            double wk2Wednesday = 0d;
            double wk2Thursday  = 0d;
            double wk2Friday    = 0d;

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

            if (!string.IsNullOrWhiteSpace(txtWeek1Monday))
                wk1Monday = double.Parse(txtWeek1Monday!);
            if (!string.IsNullOrWhiteSpace(txtWeek1Tuesday))
                wk1Tuesday = double.Parse(txtWeek1Tuesday!);
            if (!string.IsNullOrWhiteSpace(txtWeek1Wednesday))
                wk1Wednesday = double.Parse(txtWeek1Wednesday!);
            if (!string.IsNullOrWhiteSpace(txtWeek1Thursday))
                wk1Thursday = double.Parse(txtWeek1Thursday!);
            if (!string.IsNullOrWhiteSpace(txtWeek1Friday))
                wk1Friday = double.Parse(txtWeek1Friday!);

            if (!string.IsNullOrWhiteSpace(txtWeek2Monday))
                wk2Monday = double.Parse(txtWeek2Monday!);
            if (!string.IsNullOrWhiteSpace(txtWeek2Tuesday))
                wk2Tuesday = double.Parse(txtWeek2Tuesday!);
            if (!string.IsNullOrWhiteSpace(txtWeek2Wednesday))
                wk2Wednesday = double.Parse(txtWeek2Wednesday!);
            if (!string.IsNullOrWhiteSpace(txtWeek2Thursday))
                wk2Thursday = double.Parse(txtWeek2Thursday!);
            if (!string.IsNullOrWhiteSpace(txtWeek2Friday))
                wk2Friday = double.Parse(txtWeek2Friday!);

            double wk1TimeWorked        = wk1Monday + wk1Tuesday + wk1Wednesday + wk1Thursday + wk1Friday;
            double wk2TimeWorked        = wk2Monday + wk2Tuesday + wk2Wednesday + wk2Thursday + wk2Friday;
            double ovtSalary            = hourlySalary * 1.5;

            string? strWeek1RegularTime = string.Empty;
            string? strWeek1OverTime    = string.Empty;
            string? strWeek1RegularPay  = string.Empty;
            string? strWeek1OvertimePay = string.Empty;

            double wk1RegularTime       = 0.00;
            double wk1OverTime          = 0.00;
            double wk1RegularPay        = 0.00;
            double wk1OvertimePay       = 0.00;

            double wk2RegularTime       = 0.00;
            double wk2OverTime          = 0.00;
            double wk2RegularPay        = 0.00;
            double wk2OvertimePay       = 0.00;

            if (wk1TimeWorked < 40)
            {
                wk1RegularTime          = wk1TimeWorked;
                wk1OverTime             = 0.00;
                wk1RegularPay           = hourlySalary * wk1TimeWorked;
                wk1OvertimePay          = 0.00;
            } // If the employee worked over 40 hours, calculate the overtime
            else // if (wk1TimeWorked >= 40)
            {
                wk1RegularTime          = 40;
                wk1OverTime             = wk1TimeWorked - 40;
                wk1RegularPay           = hourlySalary * 40;
                wk1OvertimePay          = wk1OverTime * hourlySalary * 1.50;
            }

            if (wk2TimeWorked < 40)
            {
                wk2RegularTime          = wk2TimeWorked;
                wk2OverTime             = 0.00;
                wk2RegularPay           = hourlySalary * wk2TimeWorked;
                wk2OvertimePay          = 0.00;
            }
            else // if (wk2TimeWorked >= 40)
            {
                wk2RegularTime          = 40;
                wk2OverTime             = wk2TimeWorked - 40;
                wk2RegularPay           = hourlySalary * 40;
                wk2OvertimePay          = hourlySalary * 1.50 * wk2OverTime;
            }

            double wk1NetPay            = wk1RegularPay + wk1OvertimePay;
            double wk2NetPay            = wk2RegularPay + wk2OvertimePay;
            double netPay               = wk1NetPay + wk2NetPay;

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

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

            ViewBag.strWeek1Monday      = string.Format("{0:F}", wk1Monday);
            ViewBag.strWeek1Tuesday     = string.Format("{0:F}", wk1Tuesday);
            ViewBag.strWeek1Wednesday   = string.Format("{0:F}", wk1Wednesday);
            ViewBag.strWeek1Thursday    = string.Format("{0:F}", wk1Thursday);
            ViewBag.strWeek1Friday      = string.Format("{0:F}", wk1Friday);

            ViewBag.strWeek2Monday      = string.Format("{0:F}", wk2Monday);
            ViewBag.strWeek2Tuesday     = string.Format("{0:F}", wk2Tuesday);
            ViewBag.strWeek2Wednesday   = string.Format("{0:F}", wk2Wednesday);
            ViewBag.strWeek2Thursday    = string.Format("{0:F}", wk2Thursday);
            ViewBag.strWeek2Friday      = string.Format("{0:F}", wk2Friday);

            ViewBag.strWeek1RegularTime = string.Format("{0:F}", wk1RegularTime);
            ViewBag.strWeek1OverTime    = string.Format("{0:F}", wk1OverTime);
            ViewBag.strWeek1RegularPay  = string.Format("{0:F}", wk1RegularPay);
            ViewBag.strWeek1OvertimePay = string.Format("{0:F}", wk1OvertimePay);

            ViewBag.strWeek2RegularTime = string.Format("{0:F}", wk2RegularTime);
            ViewBag.strWeek2OverTime    = string.Format("{0:F}", wk2OverTime);
            ViewBag.strWeek2RegularPay  = string.Format("{0:F}", wk2RegularPay);
            ViewBag.strWeek2OvertimePay = string.Format("{0:F}", wk2OvertimePay);

            ViewBag.strWeek1NetPay      = string.Format("{0:F}", wk1NetPay);
            ViewBag.strWeek2NetPay      = string.Format("{0:F}", wk2NetPay);
            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 strWeek1Monday      = ViewBag.strWeek1Monday;
    string strWeek1Tuesday     = ViewBag.strWeek1Tuesday;
    string strWeek1Wednesday   = ViewBag.strWeek1Wednesday;
    string strWeek1Thursday    = ViewBag.strWeek1Thursday;
    string strWeek1Friday      = ViewBag.strWeek1Friday;

    string strWeek2Monday      = ViewBag.strWeek2Monday;
    string strWeek2Tuesday     = ViewBag.strWeek2Tuesday;
    string strWeek2Wednesday   = ViewBag.strWeek2Wednesday;
    string strWeek2Thursday    = ViewBag.strWeek2Thursday;
    string strWeek2Friday      = ViewBag.strWeek2Friday;

    string strWeek1RegularTime = ViewBag.strWeek1RegularTime;
    string strWeek1OverTime    = ViewBag.strWeek1OverTime;
    string strWeek1RegularPay  = ViewBag.strWeek1RegularPay;
    string strWeek1OvertimePay = ViewBag.strWeek1OvertimePay;

    string strWeek2RegularTime = ViewBag.strWeek2RegularTime;
    string strWeek2OverTime    = ViewBag.strWeek2OverTime;
    string strWeek2RegularPay  = ViewBag.strWeek2RegularPay;
    string strWeek2OvertimePay = ViewBag.strWeek2OvertimePay;
    
    string strWeek1NetPay       = ViewBag.strWeek1NetPay;
    string strWeek2NetPay       = ViewBag.strWeek2NetPay;
    string strNetPay = ViewBag.strNetPay;
}

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

<hr />

<form method="post" class="common-font encloser">
    <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 name="txtFirstName" class="form-control" value="@strFirstName" />
        </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 name="txtLastName" class="form-control" value="@strLastName" />
        </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 name="txtHourlySalary"
                   class="form-control" value="@strHourlySalary" />
        </div>
    </div>

    <hr />

    <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 name="txtWeek1Monday"
                   class="form-control" value="@strWeek1Monday" />
        </div>
        <div class="col-sm-4">
            <input name="txtWeek2Monday"
                   class="form-control" value="@strWeek2Monday" />
        </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 name="txtWeek1Tuesday"
                   class="form-control" value="@strWeek1Tuesday" />
        </div>
        <div class="col-sm-4">
            <input name="txtWeek2Tuesday"
                   class="form-control" value="@strWeek2Tuesday" />
        </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 name="txtWeek1Wednesday"
                   class="form-control" value="@strWeek1Wednesday" />
        </div>
        <div class="col-sm-4">
            <input name="txtWeek2Wednesday"
                   class="form-control" value="@strWeek2Wednesday" />
        </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 name="txtWeek1Thursday"
                   class="form-control" value="@strWeek1Thursday" />
        </div>
        <div class="col-sm-4">
            <input name="txtWeek2Thursday"
                   class="form-control" value="@strWeek2Thursday" />
        </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 name="txtWeek1Friday"
                   class="form-control" value="@strWeek1Friday" />
        </div>
        <div class="col-sm-4">
            <input name="txtWeek2Friday"
                   class="form-control" value="@strWeek2Friday" />
        </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-4 col-form-label">Employee Name:</label>
        <div class="col-sm-8">
            <input name="txtEmployeeName"
                   class="form-control" value="@strEmployeeName" />
        </div>
    </div>

    <hr />

    <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">
            <input class="form-control" value="@strWeek1RegularTime" />
        </div>
        <div class="col-sm-4">
            <input name="txtWeek2RegularTime"
                   class="form-control" value="@strWeek2RegularTime" />
        </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">
            <input class="form-control" value="@strWeek1OverTime" />
        </div>
        <div class="col-sm-4">
            <input name="txtWeek2OverTime"
                   class="form-control" value="@strWeek2OverTime" />
        </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">
            <input name="txtWeek1RegularPay" class="form-control" value="@strWeek1RegularPay" />
        </div>
        <div class="col-sm-4">
            <input name="txtWeek2RegularPay"
                   class="form-control" value="@strWeek2RegularPay" />
        </div>
    </div>

    <div class="row mb-2">
        <div class="col-sm-4">
            <label class="fw-bold col-form-label">Overtime Pay:</label>
        </div>
        <div class="col-sm-4">
            <input class="form-control" value="@strWeek1OvertimePay" />
        </div>
        <div class="col-sm-4">
            <input name="txtWeek2OvertimePay"
                   class="form-control" value="@strWeek2OvertimePay" />
        </div>
    </div>

    <hr />

    <div class="row mb-2">
        <div class="col-sm-4">
            <label class="fw-bold col-form-label">Weekly Pay:</label>
        </div>
        <div class="col-sm-4">
            <input class="form-control" value="@strWeek1NetPay" />
        </div>
        <div class="col-sm-4">
            <input name="txtWeek2NetPay"
                   class="form-control" value="@strWeek2NetPay" />
        </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">
            <input name="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, 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.5

Click the Calculate button:

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

Click the Calculate button:
Close the browser and return to your programming environment
Close your programming environment


Home	Copyright © 2021-2025, FunctionX	Monday 27 January 2025, 17:31	Home