Introduction

In this exercise, we will create a web-based database application. It is for a fictitious company that owns an apartment building and rents those apartments to tenants.

Practical LearningPractical Learning: Introducing the Application

  1. Start Microsoft Visual Studio
  2. On the main menu of Microsoft Visual Studio, click File -> New -> Project...
  3. In the middle list of the New Project dialog box, click ASP.NET Core Web Application
  4. Change the project Name to ApartmentsRentalManagement1
  5. Click OK
  6. In the New ASP.NET Core Web Application dialog box, click Razor Pages
  7. Click OK
  8. In the Solution Explorer, expand wwwroot
  9. Copy the follwing photo to the images folder:

    Apartments Rental Management

  10. and right-click css -> Add -> New Item...
  11. In the left list of the Add New Item dialog box, expand ASP.NET Core and expand Web
  12. In the left list, click Content and in the middle list, click Style Sheet
  13. Change the file Name to RentManagement
  14. Press Enter
  15. Add the following formats:
    body {
        background-color: #FFF;
    }
    
    .bold               { font-weight:      600;     }
    .blue               { color:            #286090; }
    .top-padding        { padding-top:      0.50em;  }
    .top-banner         { top:              0;
                          left:             0;
                          right:            0;
                          z-index:          1050;
                          height:           20em;
                          position:         fixed;
                          background-image: url(/Images/arm1.png); }
    .containment        { margin:           auto;
                          width:            400px; }
    .empty-box          { top:              20em;
                          left:             0;
                          right:            0;
                          z-index:          1050;
                          height:           5em;
                          position:         fixed;
                          background-color: white;      }
    .form-control       { color:            #286090;    }
    .form-control:focus { color:            dodgerblue; }
    .navbar-top-fixed   { left:             0;
                          right:            0;
                          top:              20em;
                          z-index:          1100;
                          position:         fixed;
                          border-width:     0 0 1px; }
    .common-font        { font-family:      Georgia, Garamond, 'Times New Roman', serif; }
    .navbar-top-fixed .navbar-collapse {
        max-height: 340px;
    }
    @media (min-width: 768px) {
        .navbar-top-fixed .navbar-collapse {
            padding-right: 0;
            padding-left: 0;
        }
    }
    @media (max-device-width: 480px) and (orientation: landscape) {
        .navbar-top-fixed .navbar-collapse {
            max-height: 200px;
        }
    }
    @media (min-width: 768px) {
        .navbar-top-fixed {
            border-radius: 0;
        }
    }
  16. In the Solution Explorer, expand Pages and expand Shared
  17. In the Solution Explorer, under Pages and under Shared, click _Layout.cshtml to access it
  18. Change the document as follows:
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>@ViewData["Title"] - Apartments Rental Management</title>
    
        <environment include="Development">
            <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
            <link rel="stylesheet" href="~/css/site.css" />
            <link href="~/css/RentManagement.css" rel="stylesheet" />
        </environment>
        <environment exclude="Development">
            <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
                  asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
                  asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
            <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
        </environment>
    </head>
    <body>
        <div class="top-banner"></div>
    
        <nav class="navbar navbar-inverse navbar-top-fixed">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a asp-page="/Index" class="navbar-brand">HOME</a>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a asp-page="/Index">LEASE APPLICATION</a></li>
                        <li><a asp-page="/Index">COMMUNITY</a></li>
                        <li><a asp-page="/Index">FLOOR PLANS</a></li>
                        <li><a asp-page="/Index">CAREERS</a></li>
                        <li><a asp-page="/RentalContracts/Index">RENT MANAGEMENT</a></li>
                        <li><a asp-page="/About">ABOUT ARM</a></li>
                        <li><a asp-page="/Contact">CONTACT US</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    
        <partial name="_CookieConsentPartial" />
    
        <div class="container body-content">
            @RenderBody()
            <hr />
            <footer>
                <p class="text-center common-font blue">&copy; @DateTime.Now.Year - Apartment Rental Management</p>
            </footer>
        </div>
    
        <environment include="Development">
            <script src="~/lib/jquery/dist/jquery.js"></script>
            <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
            <script src="~/js/site.js" asp-append-version="true"></script>
        </environment>
        <environment exclude="Development">
            <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"
                    asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                    asp-fallback-test="window.jQuery"
                    crossorigin="anonymous"
                    integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT">
            </script>
            <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
                    asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
                    asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
                    crossorigin="anonymous"
                    integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
            </script>
            <script src="~/js/site.min.js" asp-append-version="true"></script>
        </environment>
    
        @RenderSection("Scripts", required: false)
    </body>
    </html>
  19. To save the file, on the Standard toolbar, click the Save button Save
  20. In the Solution Explorer, under Views and under Shared, right-click _Layout.cshtml and click Copy
  21. Still in the Solution Explorer, right-click Shared and click Paste
  22. Right-click _Layout - Copy.cshtml and click Rename
  23. Type _Management to get _Management.cshtml, and press Enter
  24. Double-click _Management.cshtml to open it
  25. Change the document as follows:
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>@ViewData["Title"] - Apartments Rental Management</title>
    
        <environment include="Development">
            <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
            <link rel="stylesheet" href="~/css/site.css" />
            <link href="~/css/RentManagement.css" rel="stylesheet" />
        </environment>
        <environment exclude="Development">
            <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
                  asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
                  asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
            <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
        </environment>
    </head>
    <body>
        <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a asp-page="/Index" class="navbar-brand">Apartment Rental Management</a>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a asp-page="/Index">Home</a></li>
                        <li><a asp-page="/Employees/Index">Employees</a></li>
                        <li><a asp-page="/Apartments/Index">Apartments</a></li>
                        <li><a asp-page="/RentalContracts/Index">Rent Contracts</a></li>
                        <li><a asp-page="/Payments/Index">Payments</a></li>
                        <li><a asp-page="/About">About ARM</a></li>
                        <li><a asp-page="/Contact">Contact Us</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    
        <partial name="_CookieConsentPartial" />
    
        <div class="container body-content">
            @RenderBody()
            <hr />
            <footer>
                <p class="text-center common-font blue">&copy; @DateTime.Now.Year - Apartment Rental Management</p>
            </footer>
        </div>
    
        <environment include="Development">
            <script src="~/lib/jquery/dist/jquery.js"></script>
            <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
            <script src="~/js/site.js" asp-append-version="true"></script>
        </environment>
        <environment exclude="Development">
            <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"
                    asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                    asp-fallback-test="window.jQuery"
                    crossorigin="anonymous"
                    integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT">
            </script>
            <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
                    asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
                    asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
                    crossorigin="anonymous"
                    integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
            </script>
            <script src="~/js/site.min.js" asp-append-version="true"></script>
        </environment>
    
        @RenderSection("Scripts", required: false)
    </body>
    </html>

The Database

Our application will need a database to create and store the necessary records. For our application, we will use the Entity Framework (EF) to crete and manage the database.

Practical LearningPractical Learning: Introducing the Application

  1. In the Solution Explorer, right-click ApartmentsRentalManagement1 -> Add -> New Folder
  2. Type Models and press Enter
  3. In the Solution Explorer, right-click Models -> Add -> Class...
  4. Type Employee
  5. Click Add
  6. Create the class as follows:
    using System.ComponentModel.DataAnnotations;
    
    namespace ApartmentsRentalManagement1.Models
    {
        public class Employee
        {
            [Display(Name = "Employee Id")]
            public int EmployeeId         { get; set; }
            [Display(Name = "Employee #")]
            public string EmployeeNumber  { get; set; }
            [Display(Name = "First Name")]
            public string FirstName       { get; set; }
            [Display(Name = "Last Name")]
            public string LastName        { get; set; }
            [Display(Name = "Employment Title")]
            public string EmploymentTitle { get; set; }
    
            public string Identification
            {
                get
                {
                    return EmployeeNumber + " - " + FirstName + " " + LastName + " (" + EmploymentTitle + ")";
                }
            }
        }
    }
  7. In the Solution Explorer, right-click Pages -> Add -> New Folder
  8. Type Employees and press Enter
  9. In the Solution Explorer, right-click Models -> Add -> Class...
  10. Type Apartment
  11. Click Add
  12. Change the document as follows:
    using System.ComponentModel.DataAnnotations;
    
    namespace ApartmentsRentalManagement1.Models
    {
        public class Apartment
        {
            [Display(Name = "Apartment Id")]
            public int ApartmentId        { get; set; }
            [Display(Name = "Unit #")]
            public string UnitNumber      { get; set; }
            public int Bedrooms           { get; set; }
            public int Bathrooms          { get; set; }
            [Display(Name = "Monthly Rate")]
            public int MonthlyRate        { get; set; }
            [Display(Name = "Deposit")]
            public int SecurityDeposit    { get; set; }
            [Display(Name = "Occupancy Status")]
            public string OccupancyStatus { get; set; }
    
            public string Residence
            {
                get
                {
                    string beds = Bedrooms + " bedrooms";
                    string baths = Bathrooms + " bathrooms";
    
                    if (Bedrooms == 1)
                        beds = Bedrooms + " bedroom";
                    if (Bathrooms == 1)
                        baths = Bedrooms + " bathroom";
    
                    return UnitNumber + " - " + beds + ", " + baths + ", rent = " + 
                           MonthlyRate.ToString() + "/month, deposit = " + 
                           SecurityDeposit.ToString() + ", " + OccupancyStatus;
                }
            }
        }
    }
  13. In the Solution Explorer, right-click Pages -> Add -> New Folder
  14. Type Apartments press Enter
  15. In the Solution Explorer, right-click Models -> Add -> Class...
  16. Type RentalContract
  17. Press Enter
  18. Change the document as follows:
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.ComponentModel.DataAnnotations;
    
    namespace ApartmentsRentalManagement1.Models
    {
        public class RentalContract
        {
            [Display(Name = "Rent Contract Id")]
            public int RentalContractId     { get; set; }
            [Display(Name = "Contract #")]
            public int ContractNumber     { get; set; }
            [Display(Name = "Employee Id")]
            public int EmployeeId         { get; set; }
            [DataType(DataType.Date)]
            [Display(Name = "Contract Date")]
            public DateTime ContractDate  { get; set; }
            [Display(Name = "First Name")]
            public string FirstName       { get; set; }
            [Display(Name = "Last Name")]
            public string LastName        { get; set; }
            [Display(Name = "Marital Status")]
            public string MaritalStatus   { get; set; }
            [Display(Name = "Children")]
            public int NumberOfChildren   { get; set; }
            [Display(Name = "Apartment")]
            public int ApartmentId        { get; set; }
            [DataType(DataType.Date)]
            [Display(Name = "Rent Start Date")]
            public DateTime RentStartDate { get; set; }
    
            public string Description
            {
                get
                {
                    return ContractNumber + " - " + FirstName + " " + LastName + " (renting since " + RentStartDate + ")";
                }
            }
        }
    }
  19. In the Solution Explorer, right-click Pages -> Add -> New Folder
  20. Type RentalContracts and press Enter
  21. In the Solution Explorer, right-click Models -> Add -> Class...
  22. Type Payment
  23. Click Add
  24. Create the class as follows:
    using System;
    using System.ComponentModel.DataAnnotations;
    
    namespace ApartmentsRentalManagement1.Models
    {
        public class Payment
        {
            [Display(Name = "Payment Id")]
            public int PaymentId        { get; set; }
            [Display(Name = "Receipt #")]
            public int ReceiptNumber    { get; set; }
            [Display(Name = "Employee Id")]
            public int EmployeeId       { get; set; }
            [Display(Name = "Rent Contract Id")]
            public int RentalContractId   { get; set; }
            [DataType(DataType.Date)]
            [Display(Name = "Payment Date")]
            public DateTime PaymentDate { get; set; }
            public int Amount           { get; set; }
            public string Notes         { get; set; }
        }
    }
  25. In the Solution Explorer, right-click Pages -> Add -> New Folder
  26. Type Payments and press Enter
  27. In the Solution Explorer, under Pages, right-click Employees -> Add -> Razor Page...
  28. In the middle list of the Add Scaffold dialog box, click Razor Pages Using Entity Framework (CRUD)
  29. Click Add
  30. In the Model Class combo box, select Employee (ApartmentsRentalManagement1.Models)
  31. Click the + button of the Data Context Class combo box
  32. Accept ApartmentsRentalManagement1.Models.ApartmentsRentalManagement1Context.
    Click Add on the small dialog box
  33. On the right side of the Use A Layout Page text box, click the Browser button Object Browser
  34. In the Project Folders tree list, expand Pages and click Shared
  35. In the Contents of Folder list, double-click _Management.cshtml:

    Select a Layout Page

  36. Click OK

    Add Razor Pages Using Entity Frameword (CRUD)

  37. Click Add
  38. In the Solution Explorer, under Pages, right-click Apartments -> Add -> New Scaffolded Item...
  39. In the middle list of the Add Scaffold dialog box, click Razor Pages Using Entity Framework (CRUD)
  40. Click Add
  41. In the Model Class combo box, select Apartment (ApartmentsRentalManagement1.Models)
  42. In the Data Context Class combo box, make sure ApartmentsRentalManagement1Context (ApartmentsRentalManagement1.Models) is selected. Also make sure the Use A Layout Page text box is displaying ~/Pages/Shared/_Management.cshtml:

    Add Razor Pages Using Entity Frameword (CRUD)

    Click Add
  43. In the Solution Explorer, under Pages, right-click RentalContracts -> Add -> Razor Page...
  44. In the middle list of the Add Scaffold dialog box, make sure Razor Pages Using Entity Framework (CRUD) is selected.
    Click Add
  45. In the Model Class combo box, select RentalContract (ApartmentsRentalManagement1.Models)
  46. Make sure the Data Context Class combo box is displaying ApartmentsRentalManagement1Context (ApartmentsRentalManagement1.Models).
    Make sure the Use a Layout Page text box is displaying ~/Pages/Shared/_Management.cshtml.
    Click Add
  47. In the Solution Explorer, under Pages, right-click Payments -> Add -> New Scaffolded Item...
  48. In the middle list of the Add Scaffold dialog box, make sure Razor Pages Using Entity Framework (CRUD).
    Click Add
  49. In the Model Class combo box, select Payment (ApartmentsRentalManagement1.Models)
  50. Make sure the Data Context Class combo box is displaying ApartmentsRentalManagement1Context (ApartmentsRentalManagement1.Models).
    Make sure the Use A Layout Page text box is displaying ~/Pages/Shared/_Management.cshtml.Click Add
  51. On the main manu, click Tools -> NuGet Package Manager -> Package Manager Console
  52. Type Add-Migration DatabaseCreation and press Enter
  53. After the database has been created, type Update-Database and press Enter

Employees

As is the case in every business, employees take care of daily interactions with potential customers and current tenants. Our database uses a table of employees for that purpose.

Practical LearningPractical Learning: Creating Employees

  1. In the Solution Explorer, under Pages, expand Employees, and click Create.cshtml
  2. Change the document as follows:
    @page
    @model ApartmentsRentalManagement1.Pages.Employees.CreateModel
    
    @{
        ViewData["Title"] = "Create Employee";
        Layout = "~/Pages/Shared/_Management.cshtml";
    }
    
    <h2 class="bold blue common-font text-center">Employment Application</h2>
    
    <hr />
    
    <form method="post">
        <div class="containment">
            <div class="form-horizontal common-font">
                <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                <div class="form-group">
                    <label asp-for="Employee.EmployeeNumber" class="control-label col-md-5 blue"></label>
                    <div class="col-md-7">
                        <input asp-for="Employee.EmployeeNumber" class="form-control" />
                        <span asp-validation-for="Employee.EmployeeNumber" class="text-danger"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label asp-for="Employee.FirstName" class="control-label col-md-5 blue"></label>
                    <div class="col-md-7">
                        <input asp-for="Employee.FirstName" class="form-control" />
                        <span asp-validation-for="Employee.FirstName" class="text-danger"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label asp-for="Employee.LastName" class="control-label col-md-5 blue"></label>
                    <div class="col-md-7">
                        <input asp-for="Employee.LastName" class="form-control" />
                        <span asp-validation-for="Employee.LastName" class="text-danger"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label asp-for="Employee.EmploymentTitle" class="control-label col-md-5 blue"></label>
                    <div class="col-md-7">
                        <input asp-for="Employee.EmploymentTitle" class="form-control" />
                        <span asp-validation-for="Employee.EmploymentTitle" class="text-danger"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-5">
                        <a asp-page="Index">Employees</a>
                    </label>
                    <div class="col-md-7">
                        <input type="submit" value="Hire this Employee" class="btn btn-primary" />
                    </div>
                </div>
            </div>
        </div>
    </form>
    
    @section Scripts {
        @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
    }
  3. In the Solution Explorer, under Pages and under Employees, click Delete.cshtml
  4. Change the document as follows:
    @page
    @model ApartmentsRentalManagement1.Pages.Employees.DeleteModel
    
    @{
        ViewData["Title"] = "Delete Employee";
        Layout = "~/Pages/Shared/_Management.cshtml";
    }
    
    <h2 class="bold common-font blue text-center">Delete Employee Record</h2>
    
    <hr />
    
    <h3 class="common-font blue text-center">Are you sure you want to let this employee go?</h3>
    
    <div class="containment">
        <dl class="dl-horizontal common-font">
            <dt>@Html.DisplayNameFor(model => model.Employee.EmployeeId)</dt>
            <dd>@Html.DisplayFor(model => model.Employee.EmployeeId)</dd>
    
            <dt>@Html.DisplayNameFor(model => model.Employee.EmployeeNumber)</dt>
            <dd>@Html.DisplayFor(model => model.Employee.EmployeeNumber)</dd>
    
            <dt>@Html.DisplayNameFor(model => model.Employee.FirstName)</dt>
            <dd>@Html.DisplayFor(model => model.Employee.FirstName)</dd>
    
            <dt>@Html.DisplayNameFor(model => model.Employee.LastName)</dt>
            <dd>@Html.DisplayFor(model => model.Employee.LastName)</dd>
    
            <dt>@Html.DisplayNameFor(model => model.Employee.EmploymentTitle)</dt>
            <dd>@Html.DisplayFor(model => model.Employee.EmploymentTitle)</dd>
        </dl>
    
        <form method="post">
            <input type="hidden" asp-for="Employee.EmployeeId" />
            <input type="submit" value="Delete Employee" class="btn btn-primary" /> :: 
            <a asp-page="./Index">Employees</a>
        </form>
    </div>
  5. In the Solution Explorer, under Pages and under Employees, click Details.cshtml
  6. Change the document as follows:
    @page
    @model ApartmentsRentalManagement1.Pages.Employees.DetailsModel
    
    @{
        ViewData["Title"] = "Employee Details";
        Layout = "~/Pages/Shared/_Management.cshtml";
    }
    
    <h2 class="bold blue common-font text-center">Employee Details</h2>
    
    <hr />
    
    <div class="containment">
        <dl class="dl-horizontal common-font">
            <dt>@Html.DisplayNameFor(model => model.Employee.EmployeeId)</dt>
            <dd>@Html.DisplayFor(model => model.Employee.EmployeeId)</dd>
    
            <dt>@Html.DisplayNameFor(model => model.Employee.EmployeeNumber)</dt>
            <dd>@Html.DisplayFor(model => model.Employee.EmployeeNumber)</dd>
    
            <dt>@Html.DisplayNameFor(model => model.Employee.FirstName)</dt>
            <dd>@Html.DisplayFor(model => model.Employee.FirstName)</dd>
            
            <dt>@Html.DisplayNameFor(model => model.Employee.LastName)</dt>
            <dd>@Html.DisplayFor(model => model.Employee.LastName)</dd>
    
            <dt>@Html.DisplayNameFor(model => model.Employee.EmploymentTitle)</dt>
            <dd>@Html.DisplayFor(model => model.Employee.EmploymentTitle)</dd>
        </dl>
    </div>
    
    <div class="text-center">
        <a asp-page="./Edit" asp-route-id="@Model.Employee.EmployeeId">Edit/Update this Employee Record</a> ::
        <a asp-page="./Delete" asp-route-id="@Model.Employee.EmployeeId">Delete this Employee Record</a> ::
        <a asp-page="./Index">Employees</a>
    </div>
  7. In the Solution Explorer, under Pages and under Employees, click Edit.cshtml
  8. Change the form as follows:
    @page
    @model ApartmentsRentalManagement1.Pages.Employees.EditModel
    
    @{
        ViewData["Title"] = "Edit Employee";
        Layout = "~/Pages/Shared/_Management.cshtml";
    }
    
    <h2 class=" bold blue common-font text-center">Edit/Update Employee Record</h2>
    
    <hr />
    
    <form method="post">
        <div class="containment">
            <div class="form-horizontal common-font">
                <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                <input type="hidden" asp-for="Employee.EmployeeId" />
                <div class="form-group">
                    <label asp-for="Employee.EmployeeNumber" class="control-label col-md-5 blue"></label>
                    <div class="col-md-7">
                        <input asp-for="Employee.EmployeeNumber" class="form-control" />
                        <span asp-validation-for="Employee.EmployeeNumber" class="text-danger"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label asp-for="Employee.FirstName" class="control-label col-md-5 blue"></label>
                    <div class="col-md-7">
                        <input asp-for="Employee.FirstName" class="form-control" />
                        <span asp-validation-for="Employee.FirstName" class="text-danger"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label asp-for="Employee.LastName" class="control-label col-md-5 blue"></label>
                    <div class="col-md-7">
                        <input asp-for="Employee.LastName" class="form-control" />
                        <span asp-validation-for="Employee.LastName" class="text-danger"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label asp-for="Employee.EmploymentTitle" class="control-label col-md-5 blue"></label>
                    <div class="col-md-7">
                        <input asp-for="Employee.EmploymentTitle" class="form-control" />
                        <span asp-validation-for="Employee.EmploymentTitle" class="text-danger"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-5">
                        <a asp-page="./Index">Employees</a>
                    </label>
                    <div class="col-md-7">
                        <input type="submit" value="Update Employee Record" class="btn btn-primary" />
                    </div>
                </div>
            </div>
        </div>
    </form>
    
    @section Scripts {
        @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
    }
  9. In the Solution Explorer, under Pages and under Employees, click Index.cshtml
  10. Change the webpage as follows:
    @page
    @model ApartmentsRentalManagement1.Pages.Employees.IndexModel
    
    @{
        ViewData["Title"] = "Employees";
        Layout = "~/Pages/Shared/_Management.cshtml";
    }
    
    <h2 class="bold blue common-font text-center">Employees - Staff Members</h2>
    
    <hr />
    
    <table class="table table-hover common-font">
        <thead>
            <tr>
                <th class="text-center">@Html.DisplayNameFor(model => model.Employee[0].EmployeeId)</th>
                <th class="text-center">@Html.DisplayNameFor(model => model.Employee[0].EmployeeNumber)</th>
                <th>@Html.DisplayNameFor(model => model.Employee[0].FirstName)</th>
                <th>@Html.DisplayNameFor(model => model.Employee[0].LastName)</th>
                <th>@Html.DisplayNameFor(model => model.Employee[0].EmploymentTitle)</th>
                <th><a asp-page="Create">Hire New Employee</a></th>
            </tr>
        </thead>
        <tbody>
    @foreach (var item in Model.Employee) {
            <tr>
                <td class="text-center">@Html.DisplayFor(modelItem => item.EmployeeId)</td>
                <td class="text-center">@Html.DisplayFor(modelItem => item.EmployeeNumber)</td>
                <td>@Html.DisplayFor(modelItem => item.FirstName)</td>
                <td>@Html.DisplayFor(modelItem => item.LastName)</td>
                <td>@Html.DisplayFor(modelItem => item.EmploymentTitle)</td>
                <td>
                    <a asp-page="./Edit" asp-route-id="@item.EmployeeId">Edit</a> :: 
                    <a asp-page="./Details" asp-route-id="@item.EmployeeId">Details</a> :: 
                    <a asp-page="./Delete" asp-route-id="@item.EmployeeId">Delete</a>
                </td>
            </tr>
    }
        </tbody>
    </table>

Apartments

Apartments are the main objects of our business. We will use a table to keep track of their description and status.

Practical LearningPractical Learning: Creating Apartments

  1. In the Solution Explorer, under Pages and under Apartments, expand Create.cshtml
  2. Click Create.cshtml.cs and change the document as follows:
    using System.Threading.Tasks;
    using Microsoft.AspNetCore.Mvc;
    using System.Collections.Generic;
    using Microsoft.AspNetCore.Mvc.Rendering;
    using ApartmentsRentalManagement1.Models;
    using Microsoft.AspNetCore.Mvc.RazorPages;
    
    namespace ApartmentsRentalManagement1.Pages.Apartments
    {
        public class CreateModel : PageModel
        {
            private readonly ApartmentsRentalManagement1Context _context;
    
            public CreateModel(ApartmentsRentalManagement1Context context)
            {
                _context = context;
            }
    
            public IActionResult OnGet()
            {
                OccupanciesStatus.Add(new SelectListItem() { Text = "Unknown", Value = "Unknown" });
                OccupanciesStatus.Add(new SelectListItem() { Text = "Occupied", Value = "Occupied" });
                OccupanciesStatus.Add(new SelectListItem() { Text = "Available", Value = "Available" });
                OccupanciesStatus.Add(new SelectListItem() { Text = "Not Ready", Value = "Not Ready" });
                OccupanciesStatus.Add(new SelectListItem() { Text = "Needs Maintenance", Value = "Needs Maintenance" });
    
                ViewData["OccupancyStatus"] = OccupanciesStatus;
    
                return Page();
            }
    
            [BindProperty]
            public Apartment Apartment { get; set; }
            public List<SelectListItem> OccupanciesStatus { get; set; } = new List<SelectListItem>();
    
            public async Task<IActionResult> OnPostAsync()
            {
                if (!ModelState.IsValid)
                {
                    return Page();
                }
    
                _context.Apartment.Add(Apartment);
                await _context.SaveChangesAsync();
    
                return RedirectToPage("./Index");
            }
        }
    }
  3. Right-click inside the document and click Go To Page
  4. Change the document as follows:
    @page
    @model ApartmentsRentalManagement1.Pages.Apartments.CreateModel
    
    @{
        ViewData["Title"] = "Create Apartment";
        Layout = "~/Pages/Shared/_Management.cshtml";
    }
    
    <h2 class="bold blue common-font text-center">Create New Apartment</h2>
    
    <hr />
    
    <form method="post">
        <div class="containment">
            <div class="form-horizontal common-font">
                <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                <div class="form-group">
                    <label asp-for="Apartment.UnitNumber" class="control-label col-md-5 blue"></label>
                    <div class="col-md-7">
                        <input asp-for="Apartment.UnitNumber" class="form-control" />
                        <span asp-validation-for="Apartment.UnitNumber" class="text-danger"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label asp-for="Apartment.Bedrooms" class="control-label col-md-5 blue"></label>
                    <div class="col-md-7">
                        <input asp-for="Apartment.Bedrooms" class="form-control" />
                        <span asp-validation-for="Apartment.Bedrooms" class="text-danger"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label asp-for="Apartment.Bathrooms" class="control-label col-md-5 blue"></label>
                    <div class="col-md-7">
                        <input asp-for="Apartment.Bathrooms" class="form-control" />
                        <span asp-validation-for="Apartment.Bathrooms" class="text-danger"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label asp-for="Apartment.MonthlyRate" class="control-label col-md-5 blue"></label>
                    <div class="col-md-7">
                        <input asp-for="Apartment.MonthlyRate" class="form-control" />
                        <span asp-validation-for="Apartment.MonthlyRate" class="text-danger"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label asp-for="Apartment.SecurityDeposit" class="control-label col-md-5 blue"></label>
                    <div class="col-md-7">
                        <input asp-for="Apartment.SecurityDeposit" class="form-control" />
                        <span asp-validation-for="Apartment.SecurityDeposit" class="text-danger"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label asp-for="Apartment.OccupancyStatus" class="control-label col-md-5 blue"></label>
                    <div class="col-md-7">
                        <select asp-for="Apartment.OccupancyStatus" asp-items="Model.OccupanciesStatus" class="form-control"></select>
                        <span asp-validation-for="Apartment.OccupancyStatus" class="text-danger"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-5">
                        <a asp-page="Index">Apartments</a>
                    </label>
                    <div class="col-md-7">
                        <input type="submit" value="Create/Setup this Apartment" class="btn btn-primary" />
                    </div>
                </div>
            </div>
        </div>
    </form>
    
    @section Scripts {
        @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
    }
  5. In the Solution Explorer, under Pages and under Apartments, click Delete.cshtml
  6. Change the code as follows:
    @page
    @model ApartmentsRentalManagement1.Pages.Apartments.DeleteModel
    
    @{
        ViewData["Title"] = "Delete Apartment";
        Layout = "~/Pages/Shared/_Management.cshtml";
    }
    
    <h2 class="bold common-font blue text-center">Delete Apartment/Residence</h2>
    
    <hr />
    
    <h3 class="common-font blue text-center">Are you sure you want to delete this apartment record?</h3>
    
    <div class="containment">
        <dl class="dl-horizontal common-font">
            <dt>@Html.DisplayNameFor(model => model.Apartment.ApartmentId)</dt>
            <dd>@Html.DisplayFor(model => model.Apartment.ApartmentId)</dd>
    
            <dt>@Html.DisplayNameFor(model => model.Apartment.UnitNumber)</dt>
            <dd>@Html.DisplayFor(model => model.Apartment.UnitNumber)</dd>
    
            <dt>@Html.DisplayNameFor(model => model.Apartment.Bedrooms)</dt>
            <dd>@Html.DisplayFor(model => model.Apartment.Bedrooms)</dd>
            
            <dt>@Html.DisplayNameFor(model => model.Apartment.Bathrooms)</dt>
            <dd>@Html.DisplayFor(model => model.Apartment.Bathrooms)</dd>
            
            <dt>@Html.DisplayNameFor(model => model.Apartment.MonthlyRate)</dt>
            <dd>@Html.DisplayFor(model => model.Apartment.MonthlyRate)</dd>
            
            <dt>@Html.DisplayNameFor(model => model.Apartment.SecurityDeposit)</dt>
            <dd>@Html.DisplayFor(model => model.Apartment.SecurityDeposit)</dd>
            
            <dt>@Html.DisplayNameFor(model => model.Apartment.OccupancyStatus)</dt>
            <dd>@Html.DisplayFor(model => model.Apartment.OccupancyStatus)</dd>
        </dl>
    
        <form method="post">
            <input type="hidden" asp-for="Apartment.ApartmentId" />
            <input type="submit" value="Delete this Apartment's Record" class="btn btn-primary" /> :: 
            <a asp-page="./Index">Apartments</a>
        </form>
    </div>
  7. In the Solution Explorer, under Pages and under Apartments, click Details.cshtml
  8. Change the document as follows:
    @page
    @model ApartmentsRentalManagement1.Pages.Apartments.DetailsModel
    
    @{
        ViewData["Title"] = "Details";
        Layout = "~/Pages/Shared/_Management.cshtml";
    }
    
    <h2 class="bold blue common-font text-center">Apartment Details</h2>
    
    <hr />
    
    <div class="containment">
        <dl class="dl-horizontal common-font">
            <dt>@Html.DisplayNameFor(model => model.Apartment.ApartmentId)</dt>
            <dd>@Html.DisplayFor(model => model.Apartment.ApartmentId)</dd>
    
            <dt>@Html.DisplayNameFor(model => model.Apartment.UnitNumber)</dt>
            <dd>@Html.DisplayFor(model => model.Apartment.UnitNumber)</dd>
    
            <dt>@Html.DisplayNameFor(model => model.Apartment.Bedrooms)</dt>
            <dd>@Html.DisplayFor(model => model.Apartment.Bedrooms)</dd>
            
            <dt>@Html.DisplayNameFor(model => model.Apartment.Bathrooms)</dt>
            <dd>@Html.DisplayFor(model => model.Apartment.Bathrooms)</dd>
            
            <dt>@Html.DisplayNameFor(model => model.Apartment.MonthlyRate)</dt>
            <dd>@Html.DisplayFor(model => model.Apartment.MonthlyRate)</dd>
            
            <dt>@Html.DisplayNameFor(model => model.Apartment.SecurityDeposit)</dt>
            <dd>@Html.DisplayFor(model => model.Apartment.SecurityDeposit)</dd>
            
            <dt>@Html.DisplayNameFor(model => model.Apartment.OccupancyStatus)</dt>
            <dd>@Html.DisplayFor(model => model.Apartment.OccupancyStatus)</dd>
        </dl>
    </div>
    <div class="text-center">
        <a asp-page="./Edit" asp-route-id="@Model.Apartment.ApartmentId">Edit/Change Apartment</a> ::
        <a asp-page="./Delete" asp-route-id="@Model.Apartment.ApartmentId">Delete Apartment</a> ::
        <a asp-page="./Index">Apartments</a>
    </div>
  9. In the Solution Explorer, under Pages and under Apartments, expand Edit.cshtml
  10. Click Edit.cshtml.cs and change the document as follows:
    using System.Linq;
    using System.Threading.Tasks;
    using Microsoft.AspNetCore.Mvc;
    using System.Collections.Generic;
    using Microsoft.EntityFrameworkCore;
    using ApartmentsRentalManagement1.Models;
    using Microsoft.AspNetCore.Mvc.Rendering;
    using Microsoft.AspNetCore.Mvc.RazorPages;
    
    namespace ApartmentsRentalManagement1.Pages.Apartments
    {
        public class EditModel : PageModel
        {
            private readonly ApartmentsRentalManagement1Context _context;
    
            public EditModel(ApartmentsRentalManagement1Context context)
            {
                _context = context;
            }
    
            [BindProperty]
            public Apartment Apartment { get; set; }
            public List<SelectListItem> OccupanciesStatus { get; set; } = new List<SelectListItem>();
    
            public async Task<IActionResult> OnGetAsync(int? id)
            {
                if (id == null)
                {
                    return NotFound();
                }
    
                Apartment = await _context.Apartment.FirstOrDefaultAsync(m => m.ApartmentId == id);
    
                if (Apartment == null)
                {
                    return NotFound();
                }
    
                OccupanciesStatus.Add(new SelectListItem() { Text = "Unknown", Value = "Unknown" });
                OccupanciesStatus.Add(new SelectListItem() { Text = "Occupied", Value = "Occupied" });
                OccupanciesStatus.Add(new SelectListItem() { Text = "Available", Value = "Available" });
                OccupanciesStatus.Add(new SelectListItem() { Text = "Not Ready", Value = "Not Ready" });
                OccupanciesStatus.Add(new SelectListItem() { Text = "Needs Maintenance", Value = "Needs Maintenance" });
    
                ViewData["OccupancyStatus"] = OccupanciesStatus;
    
                return Page();
            }
    
            public async Task<IActionResult> OnPostAsync()
            {
                if (!ModelState.IsValid)
                {
                    return Page();
                }
    
                _context.Attach(Apartment).State = EntityState.Modified;
    
                try
                {
                    await _context.SaveChangesAsync();
                }
                catch (DbUpdateConcurrencyException)
                {
                    if (!ApartmentExists(Apartment.ApartmentId))
                    {
                        return NotFound();
                    }
                    else
                    {
                        throw;
                    }
                }
    
                return RedirectToPage("./Index");
            }
    
            private bool ApartmentExists(int id)
            {
                return _context.Apartment.Any(e => e.ApartmentId == id);
            }
        }
    }
  11. Right-click inside the document and click Go To Page
  12. Change the document as follows:
    @page
    @model ApartmentsRentalManagement1.Pages.Apartments.EditModel
    
    @{
        ViewData["Title"] = "Edit Apartment";
        Layout = "~/Pages/Shared/_Management.cshtml";
    }
    
    <h2 class=" bold blue common-font text-center">Edit/Update Apartment Record</h2>
    
    <hr />
    
    <form method="post">
        <div class="containment">
            <div class="form-horizontal common-font">
                <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                <input type="hidden" asp-for="Apartment.ApartmentId" />
                <div class="form-group">
                    <label asp-for="Apartment.UnitNumber" class="control-label col-md-5 blue"></label>
                    <div class="col-md-7">
                        <input asp-for="Apartment.UnitNumber" class="form-control" />
                        <span asp-validation-for="Apartment.UnitNumber" class="text-danger"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label asp-for="Apartment.Bedrooms" class="control-label col-md-5 blue"></label>
                    <div class="col-md-7">
                        <input asp-for="Apartment.Bedrooms" class="form-control" />
                        <span asp-validation-for="Apartment.Bedrooms" class="text-danger"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label asp-for="Apartment.Bathrooms" class="control-label col-md-5 blue"></label>
                    <div class="col-md-7">
                        <input asp-for="Apartment.Bathrooms" class="form-control" />
                        <span asp-validation-for="Apartment.Bathrooms" class="text-danger"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label asp-for="Apartment.MonthlyRate" class="control-label col-md-5 blue"></label>
                    <div class="col-md-7">
                        <input asp-for="Apartment.MonthlyRate" class="form-control" />
                        <span asp-validation-for="Apartment.MonthlyRate" class="text-danger"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label asp-for="Apartment.SecurityDeposit" class="control-label col-md-5 blue"></label>
                    <div class="col-md-7">
                        <input asp-for="Apartment.SecurityDeposit" class="form-control" />
                        <span asp-validation-for="Apartment.SecurityDeposit" class="text-danger"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label asp-for="Apartment.OccupancyStatus" class="control-label col-md-5 blue"></label>
                    <div class="col-md-7">
                        <select asp-for="Apartment.OccupancyStatus" asp-items="Model.OccupanciesStatus" class="form-control"></select>
                        <span asp-validation-for="Apartment.OccupancyStatus" class="text-danger"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-5">
                        <a asp-page="./Index">Apartments</a>
                    </label>
                    <div class="col-md-7">
                        <input type="submit" value="Save Apartment Setup" class="btn btn-primary" />
                    </div>
                </div>
            </div>
        </div>
    </form>
    
    @section Scripts {
        @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
    }
  13. In the Solution Explorer, under Pages and under Apartments, click Index.cshtml
  14. Change the document as follows:
    @page
    @model ApartmentsRentalManagement1.Pages.Apartments.IndexModel
    
    @{
        ViewData["Title"] = "Apartments";
        Layout = "~/Pages/Shared/_Management.cshtml";
    }
    
    <h2 class="bold blue common-font text-center">Apartments</h2>
    
    <hr />
    
    <table class="table table-hover common-font">
        <thead>
            <tr>
                <th class="text-center">@Html.DisplayNameFor(model => model.Apartment[0].ApartmentId)</th>
                <th class="text-center">@Html.DisplayNameFor(model => model.Apartment[0].UnitNumber)</th>
                <th class="text-center">@Html.DisplayNameFor(model => model.Apartment[0].Bedrooms)</th>
                <th class="text-center">@Html.DisplayNameFor(model => model.Apartment[0].Bathrooms)</th>
                <th class="text-center">@Html.DisplayNameFor(model => model.Apartment[0].MonthlyRate)</th>
                <th>@Html.DisplayNameFor(model => model.Apartment[0].SecurityDeposit)</th>
                <th>@Html.DisplayNameFor(model => model.Apartment[0].OccupancyStatus)</th>
                <th><a asp-page="Create">Create New Apartment</a></th>
            </tr>
        </thead>
        <tbody>
    @foreach (var item in Model.Apartment) {
            <tr>
                <td class="text-center">@Html.DisplayFor(modelItem => item.ApartmentId)</td>
                <td class="text-center">@Html.DisplayFor(modelItem => item.UnitNumber)</td>
                <td class="text-center">@Html.DisplayFor(modelItem => item.Bedrooms)</td>
                <td class="text-center">@Html.DisplayFor(modelItem => item.Bathrooms)</td>
                <td class="text-center">@Html.DisplayFor(modelItem => item.MonthlyRate)</td>
                <td>@Html.DisplayFor(modelItem => item.SecurityDeposit)</td>
                <td>@Html.DisplayFor(modelItem => item.OccupancyStatus)</td>
                <td>
                    <a asp-page="./Edit" asp-route-id="@item.ApartmentId">Edit</a> :: 
                    <a asp-page="./Details" asp-route-id="@item.ApartmentId">Details</a> :: 
                    <a asp-page="./Delete" asp-route-id="@item.ApartmentId">Delete</a>
                </td>
            </tr>
    }
        </tbody>
    </table>

Rental Contracts

Tenants are people who rent apartments. Before they take possession of an apartment, they must have an account that contain information as a contract. That's why we will use a table for tenant registration.

Practical LearningPractical Learning: Creating Rental Contracts

  1. In the Solution Explorer, under Pages, expand RentalContracts and expand Create.cshtml
  2. Click Create.cshtml.cs and change the document as follows:
    using System.Linq;
    using System.Threading.Tasks;
    using Microsoft.AspNetCore.Mvc;
    using System.Collections.Generic;
    using Microsoft.AspNetCore.Mvc.Rendering;
    using ApartmentsRentalManagement1.Models;
    using Microsoft.AspNetCore.Mvc.RazorPages;
    
    namespace ApartmentsRentalManagement1.Pages.RentalContracts
    {
        public class CreateModel : PageModel
        {
            private readonly ApartmentsRentalManagement1Context _context;
    
            public CreateModel(ApartmentsRentalManagement1Context context)
            {
                _context = context;
            }
    
            public IActionResult OnGet()
            {
                MaritalsStatus.Add(new SelectListItem() { Text = "Unknown", Value = "Unknown" });
                MaritalsStatus.Add(new SelectListItem() { Text = "Single", Value = "Single" });
                MaritalsStatus.Add(new SelectListItem() { Text = "Widdow", Value = "Widdow" });
                MaritalsStatus.Add(new SelectListItem() { Text = "Married", Value = "Married" });
                MaritalsStatus.Add(new SelectListItem() { Text = "Divorced", Value = "Divorced" });
                MaritalsStatus.Add(new SelectListItem() { Text = "Separated", Value = "Separated" });
    
                ViewData["MaritalStatus"] = MaritalsStatus;
    
                foreach(Employee staff in _context.Employee.ToList())
                {
                    StaffMembers.Add(staff.EmployeeId, staff.Identification);
                }
                
                foreach(Apartment aprt in _context.Apartment.ToList())
                {
                    Residences.Add(aprt.ApartmentId, aprt.Residence);
                }
    
                return Page();
            }
    
            [BindProperty]
            public RentalContract RentalContract        { get; set; }
            public List<SelectListItem> MaritalsStatus  { get; set; } = new List<SelectListItem>();
            public Dictionary<int, string> Residences   { get; set; } = new Dictionary<int, string>();
            public Dictionary<int, string> StaffMembers { get; set; } = new Dictionary<int, string>();
    
            public async Task<IActionResult> OnPostAsync()
            {
                if (!ModelState.IsValid)
                {
                    return Page();
                }
    
                _context.RentalContract.Add(RentalContract);
                await _context.SaveChangesAsync();
                
                return RedirectToPage("./Index");
            }
        }
    }
  3. In the Solution Explorer, under Pages and under RentalContracts, click Create.cshtml
  4. Change the document as follows:
    @page
    @model ApartmentsRentalManagement1.Pages.RentalContracts.CreateModel
    
    @{
        ViewData["Title"] = "Create Rental Contract";
        Layout = "~/Pages/Shared/_Management.cshtml";
    }
    
    <h2 class="bold blue common-font text-center">Create Rental Contract</h2>
    
    <hr />
    
    <form method="post">
        <div class="containment">
            <div class="form-horizontal common-font">
                <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                <div class="form-group">
                    <label asp-for="RentalContract.ContractNumber" class="control-label col-md-5 blue"></label>
                    <div class="col-md-7">
                        <input asp-for="RentalContract.ContractNumber" class="form-control" />
                        <span asp-validation-for="RentalContract.ContractNumber" class="text-danger"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label asp-for="RentalContract.EmployeeId" class="control-label col-md-5 blue"></label>
                    <div class="col-md-7">
                        <select asp-for="RentalContract.EmployeeId" class="form-control">
                            @foreach(KeyValuePair<int, string> empl in Model.StaffMembers)
                            {
                                <option value=@empl.Key>@empl.Value</option>
                            }
                        </select>
                        <span asp-validation-for="RentalContract.EmployeeId" class="text-danger"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label asp-for="RentalContract.ContractDate" class="control-label col-md-5 blue"></label>
                    <div class="col-md-7">
                        <input asp-for="RentalContract.ContractDate" class="form-control" />
                        <span asp-validation-for="RentalContract.ContractDate" class="text-danger"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label asp-for="RentalContract.FirstName" class="control-label col-md-5 blue"></label>
                    <div class="col-md-7">
                        <input asp-for="RentalContract.FirstName" class="form-control" />
                        <span asp-validation-for="RentalContract.FirstName" class="text-danger"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label asp-for="RentalContract.LastName" class="control-label col-md-5 blue"></label>
                    <div class="col-md-7">
                        <input asp-for="RentalContract.LastName" class="form-control" />
                        <span asp-validation-for="RentalContract.LastName" class="text-danger"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label asp-for="RentalContract.MaritalStatus" class="control-label col-md-5 blue"></label>
                    <div class="col-md-7">
                        <select asp-for="RentalContract.MaritalStatus" asp-items="Model.MaritalsStatus" class="form-control"></select>
                        <span asp-validation-for="RentalContract.MaritalStatus" class="text-danger"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label asp-for="RentalContract.NumberOfChildren" class="control-label col-md-5 blue"></label>
                    <div class="col-md-7">
                        <input asp-for="RentalContract.NumberOfChildren" class="form-control" />
                        <span asp-validation-for="RentalContract.NumberOfChildren" class="text-danger"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label asp-for="RentalContract.ApartmentId" class="control-label col-md-5 blue"></label>
                    <div class="col-md-7">
                        <select asp-for="RentalContract.ApartmentId" class="form-control">
                            @foreach (KeyValuePair<int, string> aprt in Model.Residences)
                            {
                                <option value=@aprt.Key>@aprt.Value</option>
                            }
                        </select>
                        <span asp-validation-for="RentalContract.ApartmentId" class="text-danger"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label asp-for="RentalContract.RentStartDate" class="control-label col-md-5 blue"></label>
                    <div class="col-md-7">
                        <input asp-for="RentalContract.RentStartDate" class="form-control" />
                        <span asp-validation-for="RentalContract.RentStartDate" class="text-danger"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-5">
                        <a asp-page="Index">Rental Contracts</a>
                    </label>
                    <div class="col-md-7">
                        <input type="submit" value="Create Rental Contract" class="btn btn-primary" />
                    </div>
                </div>
            </div>
        </div>
    </form>
    
    @section Scripts {
        @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
    }
  5. In the Solution Explorer, under Pages and under RentalContracts, click Delete.cshtml to access it
  6. Change the document as follows:
    @page
    @model ApartmentsRentalManagement1.Pages.RentalContracts.DeleteModel
    
    @{
        ViewData["Title"] = "Delete Rental Contract";
        Layout = "~/Pages/Shared/_Management.cshtml";
    }
    
    <h2 class="bold common-font blue text-center">Delete Rental Contract</h2>
    
    <hr />
    
    <h3 class="common-font blue text-center">Are you sure you want to delete/cancel this contract?</h3>
    
    <div class="containment">
        <dl class="dl-horizontal common-font">
            <dt>@Html.DisplayNameFor(model => model.RentalContract.RentalContractId)</dt>
            <dd>@Html.DisplayFor(model => model.RentalContract.RentalContractId)</dd>
    
            <dt>@Html.DisplayNameFor(model => model.RentalContract.ContractNumber)</dt>
            <dd>@Html.DisplayFor(model => model.RentalContract.ContractNumber)</dd>
    
            <dt>@Html.DisplayNameFor(model => model.RentalContract.EmployeeId)</dt>
            <dd>@Html.DisplayFor(model => model.RentalContract.EmployeeId)</dd>
            
            <dt>@Html.DisplayNameFor(model => model.RentalContract.ContractDate)</dt>
            <dd>@Html.DisplayFor(model => model.RentalContract.ContractDate)</dd>
            
            <dt>@Html.DisplayNameFor(model => model.RentalContract.FirstName)</dt>
            <dd>@Html.DisplayFor(model => model.RentalContract.FirstName)</dd>
        
            <dt>@Html.DisplayNameFor(model => model.RentalContract.LastName)</dt>
            <dd>@Html.DisplayFor(model => model.RentalContract.LastName)</dd>
            
            <dt>@Html.DisplayNameFor(model => model.RentalContract.MaritalStatus)</dt>
            <dd>@Html.DisplayFor(model => model.RentalContract.MaritalStatus)</dd>
            
            <dt>@Html.DisplayNameFor(model => model.RentalContract.NumberOfChildren)</dt>
            <dd>@Html.DisplayFor(model => model.RentalContract.NumberOfChildren)</dd>
          
            <dt>@Html.DisplayNameFor(model => model.RentalContract.ApartmentId)</dt>
            <dd>@Html.DisplayFor(model => model.RentalContract.ApartmentId)</dd>
        
            <dt>@Html.DisplayNameFor(model => model.RentalContract.RentStartDate)</dt>
            <dd>@Html.DisplayFor(model => model.RentalContract.RentStartDate)</dd>
        </dl>
    
        <form method="post">
            <input type="hidden" asp-for="RentalContract.RentalContractId" />
            <input type="submit" value="Delete Rental Contract" class="btn btn-primary" /> :: 
            <a asp-page="./Index">Rental Contracts</a>
        </form>
    </div>
  7. In the Solution Explorer, under Pages and under RentalContracts, click Details.cshtml
  8. Change the document as follows:
    @page
    @model ApartmentsRentalManagement1.Pages.RentalContracts.DetailsModel
    
    @{
        ViewData["Title"] = "Details on Rental Contract";
        Layout = "~/Pages/Shared/_Management.cshtml";
    }
    
    <h2 class="bold blue common-font text-center">Details on Rental Contract</h2>
    
    <hr />
    
    <div class="containment">
        <dl class="dl-horizontal common-font">
            <dt>@Html.DisplayNameFor(model => model.RentalContract.RentalContractId)</dt>
            <dd>@Html.DisplayFor(model => model.RentalContract.RentalContractId)</dd>
            
            <dt>@Html.DisplayNameFor(model => model.RentalContract.ContractNumber)</dt>
            <dd>@Html.DisplayFor(model => model.RentalContract.ContractNumber)</dd>
    
            <dt>@Html.DisplayNameFor(model => model.RentalContract.EmployeeId)</dt>
            <dd>@Html.DisplayFor(model => model.RentalContract.EmployeeId)</dd>
    
            <dt>@Html.DisplayNameFor(model => model.RentalContract.ContractDate)</dt>
            <dd>@Html.DisplayFor(model => model.RentalContract.ContractDate)</dd>
            
            <dt>@Html.DisplayNameFor(model => model.RentalContract.FirstName)</dt>
            <dd>@Html.DisplayFor(model => model.RentalContract.FirstName)</dd>
            
            <dt>@Html.DisplayNameFor(model => model.RentalContract.LastName)</dt>
            <dd>@Html.DisplayFor(model => model.RentalContract.LastName)</dd>
            
            <dt>@Html.DisplayNameFor(model => model.RentalContract.MaritalStatus)</dt>
            <dd>@Html.DisplayFor(model => model.RentalContract.MaritalStatus)</dd>
            
            <dt>@Html.DisplayNameFor(model => model.RentalContract.NumberOfChildren)</dt>
            <dd>@Html.DisplayFor(model => model.RentalContract.NumberOfChildren)</dd>
            
            <dt>@Html.DisplayNameFor(model => model.RentalContract.ApartmentId)</dt>
            <dd>@Html.DisplayFor(model => model.RentalContract.ApartmentId)</dd>
            
            <dt>@Html.DisplayNameFor(model => model.RentalContract.RentStartDate)</dt>
            <dd>@Html.DisplayFor(model => model.RentalContract.RentStartDate)</dd>
        </dl>
    </div>
    
    <div class="text-center">
        <a asp-page="./Edit" asp-route-id="@Model.RentalContract.RentalContractId">Edit/Update this Rental Contract</a> ::
        <a asp-page="./Delete" asp-route-id="@Model.RentalContract.RentalContractId">Delete/Cancel this Rental Contract</a> ::
        <a asp-page="./Index">Rental Contracts</a>
    </div>
  9. In the Solution Explorer, under Pages and under RentalContracts, expand Edit.cshtml
  10. Click Edit.cshtml.cs and change the document follows:
    using System.Linq;
    using System.Threading.Tasks;
    using Microsoft.AspNetCore.Mvc;
    using System.Collections.Generic;
    using Microsoft.EntityFrameworkCore;
    using Microsoft.AspNetCore.Mvc.Rendering;
    using ApartmentsRentalManagement1.Models;
    using Microsoft.AspNetCore.Mvc.RazorPages;
    
    namespace ApartmentsRentalManagement1.Pages.RentalContracts
    {
        public class EditModel : PageModel
        {
            private readonly ApartmentsRentalManagement1Context _context;
    
            public EditModel(ApartmentsRentalManagement1Context context)
            {
                _context = context;
            }
    
            [BindProperty]
            public RentalContract RentalContract { get; set; }
            public List<SelectListItem> MaritalsStatus { get; set; } = new List<SelectListItem>();
            public Dictionary<int, string> Residences { get; set; } = new Dictionary<int, string>();
            public Dictionary<int, string> StaffMembers { get; set; } = new Dictionary<int, string>();
    
            public async Task<IActionResult> OnGetAsync(int? id)
            {
                if (id == null)
                {
                    return NotFound();
                }
    
                RentalContract = await _context.RentalContract.FirstOrDefaultAsync(m => m.RentalContractId == id);
    
                if (RentalContract == null)
                {
                    return NotFound();
                }
    
                MaritalsStatus.Add(new SelectListItem() { Text = "Unknown", Value = "Unknown" });
                MaritalsStatus.Add(new SelectListItem() { Text = "Single", Value = "Single" });
                MaritalsStatus.Add(new SelectListItem() { Text = "Widdow", Value = "Widdow" });
                MaritalsStatus.Add(new SelectListItem() { Text = "Married", Value = "Married" });
                MaritalsStatus.Add(new SelectListItem() { Text = "Divorced", Value = "Divorced" });
                MaritalsStatus.Add(new SelectListItem() { Text = "Separated", Value = "Separated" });
    
                ViewData["MaritalStatus"] = MaritalsStatus;
    
                foreach (Employee staff in _context.Employee.ToList())
                {
                    StaffMembers.Add(staff.EmployeeId, staff.Identification); // new SelectListItem() { Text = staff.Identification, Value = staff.Identification });
                }
    
                foreach (Apartment aprt in _context.Apartment.ToList())
                {
                    Residences.Add(aprt.ApartmentId, aprt.Residence);
                }
    
                return Page();
            }
    
            public async Task<IActionResult> OnPostAsync()
            {
                if (!ModelState.IsValid)
                {
                    return Page();
                }
    
                _context.Attach(RentalContract).State = EntityState.Modified;
    
                try
                {
                    await _context.SaveChangesAsync();
                }
                catch (DbUpdateConcurrencyException)
                {
                    if (!RentalContractExists(RentalContract.RentalContractId))
                    {
                        return NotFound();
                    }
                    else
                    {
                        throw;
                    }
                }
    
                return RedirectToPage("./Index");
            }
    
            private bool RentalContractExists(int id)
            {
                return _context.RentalContract.Any(e => e.RentalContractId == id);
            }
        }
    }
  11. In the Solution Explorer, under Pages and under RentalContracts, click Edit.cshtml
  12. Change the document as follows:
    @page
    @model ApartmentsRentalManagement1.Pages.RentalContracts.EditModel
    
    @{
        ViewData["Title"] = "Edit/Update Rental Contract";
        Layout = "~/Pages/Shared/_Management.cshtml";
    }
    
    <h2 class=" bold blue common-font text-center">Edit/Update Rental Contract</h2>
    
    <hr />
    
    <form method="post">
        <div class="containment">
            <div class="form-horizontal common-font">
                <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                <input type="hidden" asp-for="RentalContract.RentalContractId" />
                <div class="form-group">
                    <label asp-for="RentalContract.ContractNumber" class="control-label col-md-5 blue"></label>
                    <div class="col-md-7">
                        <input asp-for="RentalContract.ContractNumber" class="form-control" />
                        <span asp-validation-for="RentalContract.ContractNumber" class="text-danger"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label asp-for="RentalContract.EmployeeId" class="control-label col-md-5 blue"></label>
                    <div class="col-md-7">
                        <select asp-for="RentalContract.EmployeeId" class="form-control">
                            @foreach (KeyValuePair<int, string> empl in Model.StaffMembers)
                            {
                                <option value=@empl.Key>@empl.Value</option>
                            }
                        </select>
                        <span asp-validation-for="RentalContract.EmployeeId" class="text-danger"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label asp-for="RentalContract.ContractDate" class="control-label col-md-5 blue"></label>
                    <div class="col-md-7">
                        <input asp-for="RentalContract.ContractDate" class="form-control" />
                        <span asp-validation-for="RentalContract.ContractDate" class="text-danger"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label asp-for="RentalContract.FirstName" class="control-label col-md-5 blue"></label>
                    <div class="col-md-7">
                        <input asp-for="RentalContract.FirstName" class="form-control" />
                        <span asp-validation-for="RentalContract.FirstName" class="text-danger"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label asp-for="RentalContract.LastName" class="control-label col-md-5 blue"></label>
                    <div class="col-md-7">
                        <input asp-for="RentalContract.LastName" class="form-control" />
                        <span asp-validation-for="RentalContract.LastName" class="text-danger"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label asp-for="RentalContract.MaritalStatus" class="control-label col-md-5 blue"></label>
                    <div class="col-md-7">
                        <select asp-for="RentalContract.MaritalStatus" asp-items="Model.MaritalsStatus" class="form-control"></select>
                        <span asp-validation-for="RentalContract.MaritalStatus" class="text-danger"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label asp-for="RentalContract.NumberOfChildren" class="control-label col-md-5 blue"></label>
                    <div class="col-md-7">
                        <input asp-for="RentalContract.NumberOfChildren" class="form-control" />
                        <span asp-validation-for="RentalContract.NumberOfChildren" class="text-danger"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label asp-for="RentalContract.ApartmentId" class="control-label col-md-5 blue"></label>
                    <div class="col-md-7">
                        <select asp-for="RentalContract.ApartmentId" class="form-control">
                            @foreach (KeyValuePair<int, string> aprt in Model.Residences)
                            {
                                <option value=@aprt.Key>@aprt.Value</option>
                            }
                        </select>
                        <span asp-validation-for="RentalContract.ApartmentId" class="text-danger"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label asp-for="RentalContract.RentStartDate" class="control-label col-md-5 blue"></label>
                    <div class="col-md-7">
                        <input asp-for="RentalContract.RentStartDate" class="form-control" />
                        <span asp-validation-for="RentalContract.RentStartDate" class="text-danger"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-5">
                        <a asp-page="./Index">Rental Contracts</a>
                    </label>
                    <div class="col-md-7">
                        <input type="submit" value="Update Rental Contract" class="btn btn-primary" />
                    </div>
                </div>
            </div>
        </div>
    </form>
    
    @section Scripts {
        @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
    }
  13. In the Solution Explorer, under Pages and under RentalContracts, click Index.cshtml
  14. Change the code as follows:
    @page
    @model ApartmentsRentalManagement1.Pages.RentalContracts.IndexModel
    
    @{
        ViewData["Title"] = "Rental Contracts";
        Layout = "~/Pages/Shared/_Management.cshtml";
    }
    
    <h2 class="bold blue common-font text-center">Rental Contracts</h2>
    
    <hr />
    
    <table class="table table-hover common-font">
        <thead>
            <tr>
                <th class="text-center">@Html.DisplayNameFor(model => model.RentalContract[0].RentalContractId)</th>
                <th class="text-center">@Html.DisplayNameFor(model => model.RentalContract[0].ContractNumber)</th>
                <th class="text-center">@Html.DisplayNameFor(model => model.RentalContract[0].EmployeeId)</th>
                <th class="text-center">@Html.DisplayNameFor(model => model.RentalContract[0].ContractDate)</th>
                <th>@Html.DisplayNameFor(model => model.RentalContract[0].FirstName)</th>
                <th>@Html.DisplayNameFor(model => model.RentalContract[0].LastName)</th>
                <th>@Html.DisplayNameFor(model => model.RentalContract[0].MaritalStatus)</th>
                <th class="text-center">@Html.DisplayNameFor(model => model.RentalContract[0].NumberOfChildren)</th>
                <th class="text-center">@Html.DisplayNameFor(model => model.RentalContract[0].ApartmentId)</th>
                <th class="text-center">@Html.DisplayNameFor(model => model.RentalContract[0].RentStartDate)</th>
                <th class="text-center"><a asp-page="Create">Process Rental Contract</a></th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model.RentalContract)
            {
                <tr>
                    <td class="text-center">@Html.DisplayFor(modelItem => item.RentalContractId)</td>
                    <td class="text-center">@Html.DisplayFor(modelItem => item.ContractNumber)</td>
                    <td class="text-center">@Html.DisplayFor(modelItem => item.EmployeeId)</td>
                    <td class="text-center">@Html.DisplayFor(modelItem => item.ContractDate)</td>
                    <td>@Html.DisplayFor(modelItem => item.FirstName)</td>
                    <td>@Html.DisplayFor(modelItem => item.LastName)</td>
                    <td>@Html.DisplayFor(modelItem => item.MaritalStatus)</td>
                    <td class="text-center">@Html.DisplayFor(modelItem => item.NumberOfChildren)</td>
                    <td class="text-center">@Html.DisplayFor(modelItem => item.ApartmentId)</td>
                    <td class="text-center">@Html.DisplayFor(modelItem => item.RentStartDate)</td>
                    <td>
                        <a asp-page="./Edit" asp-route-id="@item.RentalContractId">Edit</a> ::
                        <a asp-page="./Details" asp-route-id="@item.RentalContractId">Details</a> ::
                        <a asp-page="./Delete" asp-route-id="@item.RentalContractId">Delete</a>
                    </td>
                </tr>
            }
        </tbody>
    </table>

Rent Payments

Tenants are asked to pay rent at the end of every mont. To manage this aspect of the business, we use a table.

Practical LearningPractical Learning: Managing Rent Payments

  1. In the Solution Explorer, under Pages and under Payments, expand Create.cshtml
  2. Click Create.cshtml.cs change the document as follows:
    using System.Linq;
    using System.Threading.Tasks;
    using Microsoft.AspNetCore.Mvc;
    using System.Collections.Generic;
    using ApartmentsRentalManagement1.Models;
    using Microsoft.AspNetCore.Mvc.RazorPages;
    
    namespace ApartmentsRentalManagement1.Pages.Payments
    {
        public class CreateModel : PageModel
        {
            private readonly ApartmentsRentalManagement1Context _context;
    
            public CreateModel(ApartmentsRentalManagement1Context context)
            {
                _context = context;
            }
    
            public IActionResult OnGet()
            {
                foreach (Employee staff in _context.Employee.ToList())
                {
                    StaffMembers.Add(staff.EmployeeId, staff.Identification);
                }
    
                foreach (RentalContract rc in _context.RentalContract.ToList())
                {
                    LoansContracts.Add(rc.RentalContractId, rc.Description);
                }
    
                return Page();
            }
    
            [BindProperty]
            public Payment Payment { get; set; }
            public Dictionary<int, string> StaffMembers { get; set; } = new Dictionary<int, string>();
            public Dictionary<int, string> LoansContracts { get; set; } = new Dictionary<int, string>();
    
            public async Task<IActionResult> OnPostAsync()
            {
                if (!ModelState.IsValid)
                {
                    return Page();
                }
    
                _context.Payment.Add(Payment);
                await _context.SaveChangesAsync();
    
                return RedirectToPage("./Index");
            }
        }
    }
  3. In the Solution Explorer, under Pages and under Payments, click Create.cshtml
  4. Change the document as follows:
    @page
    @model ApartmentsRentalManagement1.Pages.Payments.CreateModel
    
    @{
        ViewData["Title"] = "Create Payment";
        Layout = "~/Pages/Shared/_Management.cshtml";
    }
    
    <h2 class="bold blue common-font text-center">Make Rent Payment</h2>
    
    <hr />
    
    <form method="post">
        <div class="containment">
            <div class="form-horizontal common-font">
                <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                <div class="form-group">
                    <label asp-for="Payment.ReceiptNumber" class="control-label col-md-5 blue"></label>
                    <div class="col-md-7">
                        <input asp-for="Payment.ReceiptNumber" class="form-control" />
                        <span asp-validation-for="Payment.ReceiptNumber" class="text-danger"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label asp-for="Payment.EmployeeId" class="control-label col-md-5 blue"></label>
                    <div class="col-md-7">
                        <select asp-for="Payment.EmployeeId" class="form-control">
                            @foreach (KeyValuePair<int, string> empl in Model.StaffMembers)
                            {
                                <option value=@empl.Key>@empl.Value</option>
                            }
                        </select>
                        <span asp-validation-for="Payment.EmployeeId" class="text-danger"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label asp-for="Payment.RentalContractId" class="control-label col-md-5 blue"></label>
                    <div class="col-md-7">
                        <select asp-for="Payment.RentalContractId" class="form-control">
                            @foreach (KeyValuePair<int, string> contract in Model.LoansContracts)
                            {
                                <option value=@contract.Key>@contract.Value</option>
                            }
                        </select>
                        <span asp-validation-for="Payment.RentalContractId" class="text-danger"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label asp-for="Payment.PaymentDate" class="control-label col-md-5 blue"></label>
                    <div class="col-md-7">
                        <input asp-for="Payment.PaymentDate" class="form-control" />
                        <span asp-validation-for="Payment.PaymentDate" class="text-danger"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label asp-for="Payment.Amount" class="control-label col-md-5 blue"></label>
                    <div class="col-md-7">
                        <input asp-for="Payment.Amount" class="form-control" />
                        <span asp-validation-for="Payment.Amount" class="text-danger"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label asp-for="Payment.Notes" class="control-label col-md-5 blue"></label>
                    <div class="col-md-7">
                        <textarea asp-for="Payment.Notes" rows="5" class="form-control"></textarea>
                        <span asp-validation-for="Payment.Notes" class="text-danger"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-5">
                        <a asp-page="Index">Rent Payments</a>
                    </label>
                    <div class="col-md-7">
                        <input type="submit" value="Create Payment" class="btn btn-primary" />
                    </div>
                </div>
            </div>
        </div>
    </form>
    
    @section Scripts {
        @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
    }
  5. In the Solution Explorer, under Pages and under Payments, click Delete.cshtml
  6. Change the document as follows:
    @page
    @model ApartmentsRentalManagement1.Pages.Payments.DeleteModel
    
    @{
        ViewData["Title"] = "Delete Payment";
        Layout = "~/Pages/Shared/_Management.cshtml";
    }
    
    <h2 class="bold common-font blue text-center">Delete/Cancel Rent Payment</h2>
    
    <hr />
    
    <h3 class="common-font blue text-center">Are you sure you want to delete/cancel this payment?</h3>
    
    <div class="containment">
        <dl class="dl-horizontal common-font">
            <dt>@Html.DisplayNameFor(model => model.Payment.PaymentId)</dt>
            <dd>@Html.DisplayFor(model => model.Payment.PaymentId)</dd>
    
            <dt>@Html.DisplayNameFor(model => model.Payment.ReceiptNumber)</dt>
            <dd>@Html.DisplayFor(model => model.Payment.ReceiptNumber)</dd>
    
            <dt>@Html.DisplayNameFor(model => model.Payment.EmployeeId)</dt>
            <dd>@Html.DisplayFor(model => model.Payment.EmployeeId)</dd>
    
            <dt>@Html.DisplayNameFor(model => model.Payment.RentalContractId)</dt>
            <dd>@Html.DisplayFor(model => model.Payment.RentalContractId)</dd>
    
            <dt>@Html.DisplayNameFor(model => model.Payment.PaymentDate)</dt>
            <dd>@Html.DisplayFor(model => model.Payment.PaymentDate)</dd>
    
            <dt>@Html.DisplayNameFor(model => model.Payment.Amount)</dt>
            <dd>@Html.DisplayFor(model => model.Payment.Amount)</dd>
    
            <dt>@Html.DisplayNameFor(model => model.Payment.Notes)</dt>
            <dd>@Html.DisplayFor(model => model.Payment.Notes)</dd>
        </dl>
    
        <form method="post">
            <input type="hidden" asp-for="Payment.PaymentId" />
            <input type="submit" value="Delete Payment" class="btn btn-primary" /> |
            <a asp-page="./Index">Payments</a>
        </form>
    </div>
  7. In the Solution Explorer, under Pages and under Payments, click Details.cshtml
  8. Change the document as follows:
    @page
    @model ApartmentsRentalManagement1.Pages.Payments.DetailsModel
    
    @{
        ViewData["Title"] = "Payment Details";
        Layout = "~/Pages/Shared/_Management.cshtml";
    }
    
    <h2 class="bold blue common-font text-center">Rent Payment Details</h2>
    
    <hr />
    
    <div class="containment">
        <dl class="dl-horizontal common-font">
            <dt>@Html.DisplayNameFor(model => model.Payment.PaymentId)</dt>
            <dd>@Html.DisplayFor(model => model.Payment.PaymentId)</dd>
    
            <dt>@Html.DisplayNameFor(model => model.Payment.ReceiptNumber)</dt>
            <dd>@Html.DisplayFor(model => model.Payment.ReceiptNumber)</dd>
    
            <dt>@Html.DisplayNameFor(model => model.Payment.EmployeeId)</dt>
            <dd>@Html.DisplayFor(model => model.Payment.EmployeeId)</dd>
            
            <dt>@Html.DisplayNameFor(model => model.Payment.RentalContractId)</dt>
            <dd>@Html.DisplayFor(model => model.Payment.RentalContractId)</dd>
            
            <dt>@Html.DisplayNameFor(model => model.Payment.PaymentDate)</dt>
            <dd>@Html.DisplayFor(model => model.Payment.PaymentDate)</dd>
            
            <dt>@Html.DisplayNameFor(model => model.Payment.Amount)</dt>
            <dd>@Html.DisplayFor(model => model.Payment.Amount)</dd>
            
            <dt>@Html.DisplayNameFor(model => model.Payment.Notes)</dt>
            <dd>@Html.DisplayFor(model => model.Payment.Notes)</dd>
        </dl>
    </div>
    
    <div class="text-center">
        <a asp-page="./Edit" asp-route-id="@Model.Payment.PaymentId">Edit/Update this Payment</a> ::
        <a asp-page="./Delete" asp-route-id="@Model.Payment.PaymentId">Delete/Cancel this Payment</a> ::
        <a asp-page="./Index">Payments</a>
    </div>
  9. In the Solution Explorer, under Pages and under Payments, expand Edit.cshtml
  10. Click Edit.cshtml.cs and change its document as follows:
    using System.Linq;
    using System.Threading.Tasks;
    using Microsoft.AspNetCore.Mvc;
    using System.Collections.Generic;
    using Microsoft.EntityFrameworkCore;
    using ApartmentsRentalManagement1.Models;
    using Microsoft.AspNetCore.Mvc.RazorPages;
    
    namespace ApartmentsRentalManagement1.Pages.Payments
    {
        public class EditModel : PageModel
        {
            private readonly ApartmentsRentalManagement1Context _context;
    
            public EditModel(ApartmentsRentalManagement1Context context)
            {
                _context = context;
            }
    
            [BindProperty]
            public Payment Payment { get; set; }
            public Dictionary<int, string> StaffMembers { get; set; } = new Dictionary<int, string>();
            public Dictionary<int, string> LoansContracts { get; set; } = new Dictionary<int, string>();
    
            public async Task<IActionResult> OnGetAsync(int? id)
            {
                if (id == null)
                {
                    return NotFound();
                }
    
                Payment = await _context.Payment.FirstOrDefaultAsync(m => m.PaymentId == id);
    
                if (Payment == null)
                {
                    return NotFound();
                }
                
                foreach (Employee staff in _context.Employee.ToList())
                {
                    StaffMembers.Add(staff.EmployeeId, staff.Identification);
                }
    
                foreach (RentalContract rc in _context.RentalContract.ToList())
                {
                    LoansContracts.Add(rc.RentalContractId, rc.Description);
                }
    
                return Page();
            }
    
            public async Task<IActionResult> OnPostAsync()
            {
                if (!ModelState.IsValid)
                {
                    return Page();
                }
    
                _context.Attach(Payment).State = EntityState.Modified;
    
                try
                {
                    await _context.SaveChangesAsync();
                }
                catch (DbUpdateConcurrencyException)
                {
                    if (!PaymentExists(Payment.PaymentId))
                    {
                        return NotFound();
                    }
                    else
                    {
                        throw;
                    }
                }
    
                return RedirectToPage("./Index");
            }
    
            private bool PaymentExists(int id)
            {
                return _context.Payment.Any(e => e.PaymentId == id);
            }
        }
    }
  11. Right-click inside the document and click Go To Page
  12. Change the document as follows:
    @page
    @model ApartmentsRentalManagement1.Pages.Payments.EditModel
    
    @{
        ViewData["Title"] = "Edit Payment";
        Layout = "~/Pages/Shared/_Management.cshtml";
    }
    
    <h2 class=" bold blue common-font text-center">Edit/Update Payment</h2>
    
    <hr />
    
    <form method="post">
        <div class="containment">
            <div class="form-horizontal common-font">
                <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                <input type="hidden" asp-for="Payment.PaymentId" />
                <div class="form-group">
                    <label asp-for="Payment.ReceiptNumber" class="control-label col-md-5 blue"></label>
                    <div class="col-md-7">
                        <input asp-for="Payment.ReceiptNumber" class="form-control" />
                        <span asp-validation-for="Payment.ReceiptNumber" class="text-danger"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label asp-for="Payment.EmployeeId" class="control-label col-md-5 blue"></label>
                    <div class="col-md-7">
                        <select asp-for="Payment.EmployeeId" class="form-control">
                            @foreach (KeyValuePair<int, string> empl in Model.StaffMembers)
                            {
                                <option value=@empl.Key>@empl.Value</option>
                            }
                        </select>
                        <span asp-validation-for="Payment.EmployeeId" class="text-danger"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label asp-for="Payment.RentalContractId" class="control-label col-md-5 blue"></label>
                    <div class="col-md-7">
                        <select asp-for="Payment.RentalContractId" class="form-control">
                            @foreach (KeyValuePair<int, string> contract in Model.LoansContracts)
                            {
                                <option value=@contract.Key>@contract.Value</option>
                            }
                        </select>
                        <span asp-validation-for="Payment.RentalContractId" class="text-danger"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label asp-for="Payment.PaymentDate" class="control-label col-md-5 blue"></label>
                    <div class="col-md-7">
                        <input asp-for="Payment.PaymentDate" class="form-control" />
                        <span asp-validation-for="Payment.PaymentDate" class="text-danger"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label asp-for="Payment.Amount" class="control-label col-md-5 blue"></label>
                    <div class="col-md-7">
                        <input asp-for="Payment.Amount" class="form-control" />
                        <span asp-validation-for="Payment.Amount" class="text-danger"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label asp-for="Payment.Notes" class="control-label col-md-5 blue"></label>
                    <div class="col-md-7">
                        <textarea asp-for="Payment.Notes" rows="6" class="form-control"></textarea>
                        <span asp-validation-for="Payment.Notes" class="text-danger"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-5">
                        <a asp-page="./Index">Payments</a>
                    </label>
                    <div class="col-md-7">
                        <input type="submit" value="Update this Payment" class="btn btn-primary" />
                    </div>
                </div>
            </div>
        </div>
    </form>
    
    @section Scripts {
        @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
    }
  13. In the Solution Explorer, under Pages and under Payments, click Index.cshtml
  14. Change the document as follows:
    @page
    @model ApartmentsRentalManagement1.Pages.Payments.IndexModel
    
    @{
        ViewData["Title"] = "Payments";
        Layout = "~/Pages/Shared/_Management.cshtml";
    }
    
    <h2 class="bold blue common-font text-center">Payments</h2>
    
    <hr />
    
    <table class="table table-hover common-font">
        <thead>
            <tr>
                <th class="text-center">@Html.DisplayNameFor(model => model.Payment[0].PaymentId)</th>
                <th class="text-center">@Html.DisplayNameFor(model => model.Payment[0].ReceiptNumber)</th>
                <th class="text-center">@Html.DisplayNameFor(model => model.Payment[0].EmployeeId)</th>
                <th class="text-center">@Html.DisplayNameFor(model => model.Payment[0].RentalContractId)</th>
                <th class="text-center">@Html.DisplayNameFor(model => model.Payment[0].PaymentDate)</th>
                <th>@Html.DisplayNameFor(model => model.Payment[0].Amount)</th>
                <th>@Html.DisplayNameFor(model => model.Payment[0].Notes)</th>
                <th><a asp-page="Create">Make New Payment</a></th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model.Payment)
            {
                <tr>
                    <td class="text-center">@Html.DisplayFor(modelItem => item.PaymentId)</td>
                    <td class="text-center">@Html.DisplayFor(modelItem => item.ReceiptNumber)</td>
                    <td class="text-center">@Html.DisplayFor(modelItem => item.EmployeeId)</td>
                    <td class="text-center">@Html.DisplayFor(modelItem => item.RentalContractId)</td>
                    <td class="text-center">@Html.DisplayFor(modelItem => item.PaymentDate)</td>
                    <td>@Html.DisplayFor(modelItem => item.Amount)</td>
                    <td>@Html.DisplayFor(modelItem => item.Notes)</td>
                    <td>
                        <a asp-page="./Edit" asp-route-id="@item.PaymentId">Edit</a> ::
                        <a asp-page="./Details" asp-route-id="@item.PaymentId">Details</a> ::
                        <a asp-page="./Delete" asp-route-id="@item.PaymentId">Delete</a>
                    </td>
                </tr>
            }
        </tbody>
    </table>
  15. In the Solution Explorer, under Pages, click Index.cshtml
  16. Change the document as follows:
    @page
    @model IndexModel
    @{
        ViewData["Title"] = "Home page";
    }
    
    <div>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
    </div>
    
    <div class="row">
        <div class="col-md-3">
            <h2>Application uses</h2>
            <ul>
                <li>Sample pages using ASP.NET Core Razor Pages</li>
                <li>Theming using <a href="https://go.microsoft.com/fwlink/?LinkID=398939">Bootstrap</a></li>
            </ul>
        </div>
        <div class="col-md-3">
            <h2>How to</h2>
            <ul>
                <li><a href="https://go.microsoft.com/fwlink/?linkid=852130">Working with Razor Pages.</a></li>
                <li><a href="https://go.microsoft.com/fwlink/?LinkId=699315">Manage User Secrets using Secret Manager.</a></li>
                <li><a href="https://go.microsoft.com/fwlink/?LinkId=699316">Use logging to log a message.</a></li>
                <li><a href="https://go.microsoft.com/fwlink/?LinkId=699317">Add packages using NuGet.</a></li>
                <li><a href="https://go.microsoft.com/fwlink/?LinkId=699319">Target development, staging or production environment.</a></li>
            </ul>
        </div>
        <div class="col-md-3">
            <h2>Overview</h2>
            <ul>
                <li><a href="https://go.microsoft.com/fwlink/?LinkId=518008">Conceptual overview of what is ASP.NET Core</a></li>
                <li><a href="https://go.microsoft.com/fwlink/?LinkId=699320">Fundamentals of ASP.NET Core such as Startup and middleware.</a></li>
                <li><a href="https://go.microsoft.com/fwlink/?LinkId=398602">Working with Data</a></li>
                <li><a href="https://go.microsoft.com/fwlink/?LinkId=398603">Security</a></li>
                <li><a href="https://go.microsoft.com/fwlink/?LinkID=699321">Client side development</a></li>
                <li><a href="https://go.microsoft.com/fwlink/?LinkID=699322">Develop on different platforms</a></li>
                <li><a href="https://go.microsoft.com/fwlink/?LinkID=699323">Read more on the documentation site</a></li>
            </ul>
        </div>
        <div class="col-md-3">
            <h2>Run &amp; Deploy</h2>
            <ul>
                <li><a href="https://go.microsoft.com/fwlink/?LinkID=517851">Run your app</a></li>
                <li><a href="https://go.microsoft.com/fwlink/?LinkID=517853">Run tools such as EF migrations and more</a></li>
                <li><a href="https://go.microsoft.com/fwlink/?LinkID=398609">Publish to Microsoft Azure App Service</a></li>
            </ul>
        </div>
    </div>
  17. To execute, on the main menu, click Debug -> Start Without Debugging

    Joins Fundamentals

  18. In the webpage, click RENT MANAGEMENT
  19. Click the Employees link

    Joins Fundamentals

  20. In the webpage, click Hire New Employee

    Joins Fundamentals

  21. Create the following records:
     
    Employee # First Name Last Name Title
    93947 Catherine Watts Owner - General Manager
    40685 Justine Sandt Rent Manager
    73048 Raymond Wilkinson Intern
    60949 Mark Reason Maintenance Technician
    38408 Marc Knights Rent Associate
    20448 Nancy Longhorn Rent Associate

    Joins Fundamentals

  22. Close the browser and return to your programming environment
  23. Close the following tabs: _Layout.cshtml, Index.cshtml, Delete.cshtml. Edit.cshtml, Delete.cshtml, Employee.cs, Apartment.cs, RentalContract.cs, Payment.cs, EmployeesController.cs, and BundleConfig.cs
  24. In the Solution Explorer, under Views and under Apartments, double-click Index.cshtml to access it
  25. To execute, on the main menu, click Debug -> Start Without Debugging
  26. Click the New Apartment link

    Joins Fundamentals

  27. Create the following records:
     
    Unit # Bedrooms Bathrooms Monthly Rate Security Deposit Occupancy Status
    1012213501100Available
    102111150 850Needs Maintenance
    103111150 850Available
    1043215001250Available
    1052112501000 Not Ready
    1063215501250Available
    1073214501250Needs Maintenance
    108111100 850Available
    1092213501100Available
    110111050 850 Not Ready
    1112213501100Needs Maintenance
    1122112851000Available
    2012111851000 Not Ready
    202111150 850Available
    203111150 850Available
    2043216001250Available
    2052111001000Needs Maintenance
    2063215001250Available
    2073215501250Available
    20811 985 850Available
    2092213501100Available
    210111150 850 Not Ready
    2112213501100Available
    2122110751000Available
    3012211751000Available
    302111150 850Needs Maintenance
    303111100 850Available
    3043212501100Available
    3052111001000Available
    3063212501100Available
    3073211001250Available
    308111100 850Available
    309221100 950Available
    310111100 850Available
    3112211001000 Not Ready
    3122111001000Available

    Joins Fundamentals

  28. Click the Rent Contracts link

    Joins Fundamentals

  29. Click the Start New Rent Contract link

    Joins Fundamentals

  30. Create the following records:
     

    Joins Fundamentals

    Joins Fundamentals

    Joins Fundamentals

    Joins Fundamentals

    Contract # Processed By Contract Date First Name Last Name Marital Status # of Children Unit # Rent Start Date
    1001 38408 6/12/2020 Ann Sanders Married 1 109 7/1/2020
    1002 20448 6/15/2020 Mahty Shaoul   2 104 9/1/2020
    1003 40685 6/22/2020 Frank Ulm Single 0 302 7/1/2020
    1004 93947 6/22/2020 Elise Provowski Separated 1 305 8/1/2020
    1005 93947 7/23/2020 Grace Curryan   1 105 9/1/2020
    1006 38408 7/25/2020 Tracy Warrens Divorced 2 307 8/1/2020
    1007 38408 8/1/2020 Paul Yamo Married 3 204 10/1/2020
    1008 40685 8/10/2020 Nancy Shermann Single 1 108 9/1/2020
    1009 20448 9/12/2020 Michael Tiernan   0 209 11/1/2020
    1010 38408 10/5/2020 Phillippe Anderson Single 0 202 11/1/2020

    Joins Fundamentals

  31. Click the Payments link

    Joins Fundamentals

  32. Click the New Rent Payment link

    Joins Fundamentals

  33. Create the following records:
     
    Receipt # Employee # Contract # Payment Date Amount Notes
    100001 20448 1002 06/15/2020 1250 This is the payment of the security deposit
    100002 38408 1001 06/17/2020 1100 This is the first payment of the tenant. It is for the security deposit.
    100003 40685 1004 06/22/2020 1000 Security deposit payment
    100004 93947 1003 06/25/2020 850 This was the security deposit payment
    100005 40685 1003 07/26/2020 1100 This was the July 2018 rent payment
    100006 38408 1001 07/31/2020 1350 Rent payment for July 2020
    100007 40685 1004 08/25/2020 1100 August 2018 rent payment
    100008 20448 1003 08/30/2020 1100 August 2018 rent payment
    100009 20448 1001 08/31/2020 1350 Rent payment for August 2020
    100010 93947 1002 09/26/2020 1500 Rent payment - September 2020
    100011 38408 1003 09/27/2020 1100 Rent payment for September 2020
    100012 93947 1001 09/28/2020 1350 This is the rent payment for September 2020
    100013 20448 1004 09/29/2020 1100 September 2018 monthly payment
    100014 93947 1003 10/28/2020 1100 October 2018 Rent
    100015 20448 1002 10/29/2020 1500 This was the payment for October 2020

    Joins Fundamentals

  34. Close the browser and return to your programming environment
  35. Close your programming environment

Home Copyright © 2017-2022, FunctionX Friday 06 May 2022 Home