Introduction

We are learning to use the C# computer language in ASP.NET Web developement. In this introductory exercise, we will create a webform and equip it with some webcontrols for a time sheet that covers two weeks. When the user has provided the values, we will calculat the biweeklu pay and display the results.

Practical 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 (Model-View-Controller)
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 9.0 (Standard 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 Controllers, and double-click HomeController
13. 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 });
            }
        }
    }

14. In the Solution Explorer, expand Views, and expand Home
15. Below Home, double-click Index.cshtml
16. 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>

17. In the Solution Explorer, below Pages, expand Shared
18. Double-click _Layout.cshtm
19. 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>

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

    

21. 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

    

22. Click the Calculate button:

    

23. 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

24. Click the Calculate button:

    

25. Close the browser and return to your programming environment
26. Close your programming environment

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