Introduction

Razor Pages is one of the techniques you can use to create an ASP.NET Core application. In this exercise, we will create a small application, add a webform to it, equip it with text boxes, and perform simple calculations.

ApplicationPractical Learning: Creating the Application

  1. Start Microsoft Visual Studio
  2. In the Visual Studio 2026 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 10.0 (Long 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;
}

.form-control { border: 1px solid Silver; }
.encloser    { margin:      auto;
               width:       450px; }
.common-font { font-family: Garamond, Georgia, Cambria, 'Times New Roman', Times, serif }
  12. In the Solution Explorer, expand Views, then expand Home
  13. Below Pages, double-click Index.cshtml
  14. Change the document as follows: 
    @{
    ViewData["Title"] = "Home Page";
}

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

<hr />

<form name="PayrollEvaluation" 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 id="txtFirstName" name="txtFirstName" class="form-control" />
        </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" name="txtLastName" class="form-control" />
        </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 id="txtHourlySalary" name="txtHourlySalary" class="form-control" />
        </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 id="txtWeek1Monday" name="txtWeek1Monday" class="form-control" />
        </div>
        <div class="col-sm-4">
            <input id="txtWeek2Monday" name="txtWeek2Monday" class="form-control" />
        </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 id="txtWeek1Tuesday" name="txtWeek1Tuesday" class="form-control" />
        </div>
        <div class="col-sm-4">
            <input id="txtWeek2Tuesday" name="txtWeek2Tuesday" class="form-control" />
        </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 id="txtWeek1Wednesday" name="txtWeek1Wednesday" class="form-control" />
        </div>
        <div class="col-sm-4">
            <input id="txtWeek2Wednesday" name="txtWeek2Wednesday" class="form-control" />
        </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 id="txtWeek1Thursday" name="txtWeek1Thursday" class="form-control" />
        </div>
        <div class="col-sm-4">
            <input id="txtWeek2Thursday" name="txtWeek2Thursday" class="form-control" />
        </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 id="txtWeek1Friday" name="txtWeek1Friday" class="form-control" />
        </div>
        <div class="col-sm-4">
            <input id="txtWeek2Friday" name="txtWeek2Friday" class="form-control" />
        </div>
    </div>

    <hr />

    <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" onclick="EvaluatePayroll()" 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 id="txtEmployeeName" name="txtEmployeeName" class="form-control" />
        </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">
            <input id="txtWeek1RegularTime" class="form-control" />
        </div>
        <div class="col-sm-4">
            <input id="txtWeek2RegularTime" name="txtWeek2RegularTime" class="form-control" />
        </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 id="txtWeek1OverTime" class="form-control" />
        </div>
        <div class="col-sm-4">
            <input id="txtWeek2OverTime" name="txtWeek2OverTime" class="form-control" />
        </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 id="txtWeek1RegularPay" class="form-control" />
        </div>
        <div class="col-sm-4">
            <input id="txtWeek2RegularPay" name="txtWeek2RegularPay" class="form-control" />
        </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">
            <input id="txtWeek1OvertimePay" class="form-control" />
        </div>
        <div class="col-sm-4">
            <input id="txtWeek2OvertimePay" name="txtWeek2OvertimePay" class="form-control" />
        </div>
    </div>

    <hr />

    <div class="row mb-2">
        <div class="col-sm-4">
            <label for="txtWeek1NetPay" class="fw-bold col-form-label">Net Pay:</label>
        </div>
        <div class="col-sm-4">
            <input id="txtWeek1NetPay" class="form-control" />
        </div>
        <div class="col-sm-4">
            <input id="txtWeek2NetPay" name="txtWeek2NetPay" class="form-control" />
        </div>
    </div>

    <hr />

    <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">Total Pay:</label>
        </div>
        <div class="col-sm-4">
            <input id="txtNetPay" class="form-control" />
        </div>
    </div>
</form>
  15. In the Solution Explorer, below wwwroot, right-click js -> Add -> New Item...
  16. In the left list of the New Item dialog box, below C#, expand ASP.NET Core, expand Web, and click Scripts
  17. In the middle list, click TypeScript File
  18. Change the file Name to PayrollEvaluation
  19. Click Add
  20. Change the document as follows: 
    <script type="text/javascript">
    function EvaluatePayroll() {
        var strFirstName = document.PayrollEvaluation.txtFirstName.value;
        var strLastName = document.PayrollEvaluation.txtLastName.value;
        
        var hourlySalary = Number(document.PayrollEvaluation.txtHourlySalary.value);
        
        var wk1Monday = Number(document.PayrollEvaluation.txtWeek1Monday.value);
        var wk1Tuesday = Number(document.PayrollEvaluation.txtWeek1Tuesday.value);
        var wk1Wednesday = Number(document.PayrollEvaluation.txtWeek1Wednesday.value);
        var wk1Thursday = Number(document.PayrollEvaluation.txtWeek1Thursday.value);
        var wk1Friday = Number(document.PayrollEvaluation.txtWeek1Friday.value);
        
        var wk2Monday = Number(document.PayrollEvaluation.txtWeek2Monday.value);
        var wk2Tuesday = Number(document.PayrollEvaluation.txtWeek2Tuesday.value);
        var wk2Wednesday = Number(document.PayrollEvaluation.txtWeek2Wednesday.value);
        var wk2Thursday = Number(document.PayrollEvaluation.txtWeek2Thursday.value);
        var wk2Friday = Number(document.PayrollEvaluation.txtWeek2Friday.value);
        
        var wk1TimeWorked    = wk1Monday + wk1Tuesday + wk1Wednesday + wk1Thursday + wk1Friday;
        var wk2TimeWorked    = wk2Monday + wk2Tuesday + wk2Wednesday + wk2Thursday + wk2Friday;
        
        var wk1RegularTime   = 0.00;
        var wk1OverTime      = 0.00;
        var wk1RegularPay    = 0.00;
        var wk1OvertimePay   = 0.00;
        
        var wk2RegularTime   = 0.00;
        var wk2OverTime      = 0.00;
        var wk2RegularPay    = 0.00;
        var wk2OvertimePay   = 0.00;
        
        // If the employee worked below 40 hours, there is no overtime
        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;
        }
        
        var wk1NetPay           = wk1RegularPay + wk1OvertimePay;
        var wk2NetPay           = wk2RegularPay + wk2OvertimePay;
        var netPay              = wk1NetPay + wk2NetPay;
        
        document.PayrollEvaluation.txtEmployeeName.value = strFirstName + " " + strLastName;
        
        document.PayrollEvaluation.txtWeek1RegularTime.value = wk1RegularTime.toFixed(2);
        document.PayrollEvaluation.txtWeek1OverTime.value = wk1OverTime.toFixed(2);
        document.PayrollEvaluation.txtWeek1RegularPay.value = wk1RegularPay.toFixed(2);
        document.PayrollEvaluation.txtWeek1OvertimePay.value = wk1OvertimePay.toFixed(2);
        
        document.PayrollEvaluation.txtWeek2RegularTime.value = wk2RegularTime.toFixed(2);
        document.PayrollEvaluation.txtWeek2OverTime.value = wk2OverTime.toFixed(2);
        document.PayrollEvaluation.txtWeek2RegularPay.value = wk2RegularPay.toFixed(2);
        document.PayrollEvaluation.txtWeek2OvertimePay.value = wk2OvertimePay.toFixed(2);
        
        document.PayrollEvaluation.txtWeek1NetPay.value = wk1NetPay.toFixed(2);
        document.PayrollEvaluation.txtWeek2NetPay.value = wk2NetPay.toFixed(2);
        
        document.PayrollEvaluation.txtNetPay.value = netPay.toFixed(2);
    }
</script>
  21. In the Solution Explorer, below wwwroot, right-click js -> Add -> New Item...
  22. In the left list of the New Item dialog box, below C#, make sure Scripts is selected.
    In the middle list, click TypeScript JSON Configuration File
  23. Accept the suggested name of the file, tsconfig, and click Add
  24. Change the document as follows: 
    {
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5"
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ],
  "files": [
    "TimeSheetEvaluation.ts"
  ],
  "compileOnSave": true
}
  25. To execute the application, press Ctrl + F5:

    Payroll Evaluation

  26. In the text boxes, enter 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

  27. Click the Calculate button:

    Payroll Evaluation

  28. Change the values in the top text boxes as follows: 
    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
  29. Click the Calculate button:

    Payroll Evaluation

  30. Close the browser and return to your programming environment
  31. Close your programming environment
Home Copyright © 2021-2026, FunctionX Last Update: Monday 13 April 2026, 19:55 Home