Introduction

ASP.NET MVC provides a good way to get a website from you can create, use, and manage a database such as a Microsoft SQL Server one. Because ASP.NET MVC doesn't support events, one way you can address that purpose is to use a JavaScript library. jQuery is a JavaScript that provides the perfect addition to ASP.NET MVC in terms of selecting objects on a webpage and firing events from any element.

Watts' A Loan is a fictitious company that issues loans to persons and small businesses. The types of loans are personal cash loans, loans for car financing, boat purchase, furniture purchase, etc. This small application is an example of creating a Microsoft SQL Server database and using it in an ASP.NET MVC project. To use some necessary events, we use jQuery.

Practical LearningPractical Learning: Introducing the Application

  1. Start Microsoft Visual Studio
  2. On the main menu, click File -> New -> Project...
  3. In the New Project dialog box, click ASP.NET Web Application (.NET) and change the project Name to WattsALoan1
  4. Click OK
  5. In the dialog box, click the Web API icon
  6. Click OK
  7. In the Solution Explorer, right-click WattsALoan1 -> Add -> New Folder
  8. Type BusinessControllers
  9. In the Solution Explorer, right-click WattsALoan1 -> Add -> New Folder
  10. Type Images
  11. Copy and paste the following pictures to the Images folder:

    Background Picture
    Chair Chair Chair
  12. In the Solution Explorer, right-click Content -> Add -> Style Sheet
  13. Type WattsALoan
  14. Press Enter
  15. Add the following formats:
    body {
        background-color: #370000;
    }
    
    th                { color:            wheat;     }
    td                { color:            white;     }
    .bold             { font-weight:      600;       }
    .wheat            { color:            wheat;     }
    .push-down        { padding-top:      1.05em;    }
    .containment      { margin:           auto;
                        width:            400px;     }
    .regular-text     { color:            azure;     }
    .top-menu-holder  { margin:           auto;
                        width:            750px;     }
    .menu-box         { border-radius:    5px;
                        background-color: burlywood; }
    .menu-box ul      { list-style-type:  none;      }
    .bordered         { border-radius:    5px;
                        border:           1px solid black; }
    .wal-lead         { color:            antiquewhite;
                        font-family:      Georgia, Garamond, 'Times New Roman', serif; }
    .wal-lead:visited { color:            aliceblue; }
    .wal-lead:hover   { color:            yellow;    }
    .wal-lead:focus   { color:            orange;    }
    .common-font      { font-family:      Georgia, Garamond, 'Times New Roman', serif; }
    
    .jumbotron        { background-color: #370000;       }
    .jumbotron h1     { font-weight:      600;
                        color:            wheat;
                        text-shadow:      5px 5px black; }
    .navbar-inverse   { background:       rgb(2,0,36);
                        background:       linear-gradient(180deg, rgba(55,0,0,1) 0%, rgba(120,0,0,1) 100%); }
    
    .navbar-inverse .navbar-nav > li > a { height:      75px;
                                           padding-top: 2.25em;
                                           color:       #9d9d9d; }
    .navbar-inverse .navbar-nav > li > a:link,
    .navbar-inverse .navbar-nav > li > a:active,
    .navbar-inverse .navbar-nav > li > a:visited {
            color: #fff;
            background: rgb(2,0,36);
            background: linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(186,16,16,1) 49%, rgba(55,0,0,1) 100%); }
    .navbar-inverse .navbar-nav > li > a:focus {
            color: #fff;
            background: rgb(2,0,36);
            background: linear-gradient(180deg, rgba(55,0,0,1) 100%, rgba(186,16,16,1) 50%, rgba(2,0,36,1) 0%); }
    .navbar-inverse .navbar-nav > li > a:hover {
            color: #fff;
            background: rgb(2,0,236);
            background: linear-gradient(180deg, rgba(55,0,0,1) 0%, rgba(200,0,0,1) 100%); }
    .navbar-inverse .navbar-nav > .active > a,
    .navbar-inverse .navbar-nav > .active > a:hover,
    .navbar-inverse .navbar-nav > .active > a:focus {
            color: #fff;
            background: rgb(2,0,236);
            background: linear-gradient(180deg, rgba(200,0,0,1) 100%, rgba(55,0,0,1) 0%); }
    
    .navbar-inverse .navbar-brand a { height:      75px;
                                      padding-top: 30px;
                                      color:       #9d9d9d; }
    .navbar-inverse .navbar-brand:link {
            height:      75px;
            padding-top: 30px;
            color:       #9d9d9d;
            background:  rgb(2,0,36);
            background:  linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(186,16,16,1) 49%, rgba(55,0,0,1) 100%); }
    .navbar-inverse .navbar-brand:focus {
            color:       #9d9d9d;
            background:  rgb(2,0,36);
            background:  linear-gradient(180deg, rgba(55,0,0,1) 100%, rgba(186,16,16,1) 50%, rgba(2,0,36,1) 0%);  }
    .navbar-inverse .navbar-brand:hover {
            color:       #fff;
            background:  rgb(2,0,236);
            background:  linear-gradient(180deg, rgba(55,0,0,1) 0%, rgba(200,0,0,1) 100%); }
  16. In the Solution Explorer, expand App_Start and double-click BundleConfig.cs
  17. Change the document as follows:
    using System.Web.Optimization;
    
    namespace WattsALoan1
    {
        public class BundleConfig
        {
            // For more information on bundling, visit https://go.microsoft.com/fwlink/?LinkId=301862
            public static void RegisterBundles(BundleCollection bundles)
            {
                bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                            "~/Scripts/jquery-{version}.js"));
    
                bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                            "~/Scripts/jquery.validate*"));
    
                // Use the development version of Modernizr to develop with and learn from. Then, when you're
                // ready for production, use the build tool at https://modernizr.com to pick only the tests you need.
                bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                            "~/Scripts/modernizr-*"));
    
                bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                          "~/Scripts/bootstrap.js"));
    
                bundles.Add(new StyleBundle("~/Content/css").Include(
                          "~/Content/bootstrap.css",
                          "~/Content/site.css",
                          "~/Content/WattsALoan.css"));
            }
        }
    }
  18. To create a database:
    • If you will use a Microsoft SQL Server Database:
      1. Start SQL Server Management Studio and login
      2. Right-click the name of the computer and click New Query
      3. Type the following code:
        USE master;
        GO
        CREATE DATABASE WattsALoan1;
        GO
        USE WattsALoan1;
        GO
      4. To create the database, right-click inside the Query window and click Execute
      5. Press Ctrl + A to select everything in the Query Editor and press Delete
    • If you will use a local database:
      1. In the Solution Explorer of Microsoft Visual Studio, right-click App_Data -> Add -> New Item...
      2. In the middle frame of the Add New Item dialog box, click SQL Server Database.
        Change the Name to WattsALoan1
      3. Click Add
      4. Type the following code:
      5. In the Solution Explorer, under App_Data, right-click WattsALoan1 and click Open
      6. In the Server Explorer, right-click WattsALoan2 and click New Query
  19. In both cases, type the following code:
    CREATE TABLE Employees
    (
    	EmployeeId	    INT IDENTITY(1, 1),
    	EmployeeNumber  NVARCHAR(10) UNIQUE,
    	FirstName	    NVARCHAR(20),
    	LastName        NVARCHAR(20),
    	EmploymentTitle NVARCHAR(50),
    	CONSTRAINT PK_Employees PRIMARY KEY(EmployeeId)
    );
    GO
    CREATE TABLE LoanContracts
    (
    	LoanContractId	  INT IDENTITY(1, 1),
    	LoanNumber        INT UNIQUE NOT NULL,
    	DateAllocated	  NVARCHAR(40),
    	EmployeeId	      INT,
    	CustomerFirstName NVARCHAR(20),
    	CustomerLastName  NVARCHAR(20),
    	LoanType		  NVARCHAR(20),
    	LoanAmount		  NVARCHAR(10),
    	InterestRate	  NVARCHAR(10),
    	[Periods]	      INT,
    	MonthlyPayment	  NVARCHAR(10),
    	FutureValue	      NVARCHAR(10),
    	InterestAmount	  NVARCHAR(10),
    	PaymentStartDate  NVARCHAR(40),
    	CONSTRAINT PK_LoansContracts PRIMARY KEY(LoanContractId)
    );
    GO
    CREATE TABLE Payments
    (
    	PaymentId	   INT IDENTITY(1, 1),
    	ReceiptNumber  INTEGER,
    	PaymentDate	   NVARCHAR(40),
    	EmployeeId     INT,
    	LoanContractId INT,
    	PaymentAmount  NVARCHAR(10),
    	Balance		   NVARCHAR(10),
    	CONSTRAINT PK_Payments PRIMARY KEY(PaymentId)
    );
    GO
  20. To execute, on the SQL Editor toolbar, click the Execute button Execute
  21. Close the Query window
  22. When asked whether you want to save, click No

Creating a Database

In this exercise, we will need a database. We will create a Microsoft SQL Server database. You can create a professional or enterprise database using Microsoft SQL Server Management Studio or you can create a local database in Microsoft Visual Studio. Also, to make our life easier when creating and managing records, we will use the Entity Framework.

Practical LearningPractical Learning: Creating a Database

  1. In the Solution Explorer, right-click Models -> Add -> New Item...
  2. In the left frame of the dialog box, click Data and, in the middle frame, click ADO.NET Entity Data Model
  3. Change the name to LoansManagementModel
  4. Click Add
  5. In the first page of the Entity Data Model Wizard, click Code First From Database

    Entity Data Model Wizard

  6. Click Next
  7. In the second page of the Entity Data Model Wizard, if you are using a local database, make sure the top text box displays WattsALoan1.mdf. If you want to use a Microsoft SQL Server professional/enterprise database, click the New Connection button, specify the database server and the name of the database, then click OK.
    Make sure the bottom text box displays LoansManagementModel

    Entity Data Model Wizard

    Click Next
  8. In the third page of the Entity Data Model Wizard, click the Tables and Views check boxes

    Entity Data Model Wizard

  9. Click Finish
  10. On the main menu, click Build -> Build Solution

Employees

When creating an ASP.NET MVC application, if you are planning to use a database in your project, if a table and view you want to use doesn't involve event, you may not need an external library. The code that the Entity Framework generates would be enough. That's the case for the Employees table and its related view in our project.

Practical LearningPractical Learning: Managing Employees

  1. In the Solution Explorer, under Models, click Employee.cs
  2. Change the class as follows:
    namespace WattsALoan1.Models
    {
        using System.ComponentModel.DataAnnotations;
    
        public partial class Employee
        {
            [Display(Name = "Employee Id")]
            public int EmployeeId { get; set; }
    
            [StringLength(10)]
            [Display(Name = "Employee #")]
            public string EmployeeNumber { get; set; }
    
            [StringLength(20)]
            [Display(Name = "First Name")]
            public string FirstName { get; set; }
    
            [StringLength(20)]
            [Display(Name = "Last Name")]
            public string LastName { get; set; }
    
            [StringLength(50)]
            [Display(Name = "Employee Title")]
            public string EmploymentTitle { get; set; }
    
            public string Identification
            {
                get
                {
                    return EmployeeNumber + " - " + FirstName + " " + LastName + " (" + EmploymentTitle + ")";
                }
            }
        }
    }
  3. In the Solution Explorer, right-click Controllers -> Add -> Controller...
  4. In the middle frame of the Add Scaffold dialog box, click MVC 5 Controller With Views, Using Entity Framework

    Add Scaffold

  5. Press Enter
  6. Click the arrow of the Model Class combo box and select Employee (WattsALoan1.Models)
  7. Click the arrow of the Data Context Class and select LoansManagementModel (WattsALoan1.Models)

    Add Controller

  8. Click Add
  9. In the EmployeesController class, right-click Index() and click Go To View
  10. Change the document as follows:
    @model IEnumerable<WattsALoan1.Models.Employee>
    
    @{
        ViewBag.Title = "Employees";
    }
    
    <h2 class="bold wheat common-font text-center">Employees</h2>
    
    <table class="table common-font">
        <tr>
            <th class="text-center">@Html.DisplayNameFor(model => model.EmployeeId)</th>
            <th>@Html.DisplayNameFor(model => model.EmployeeNumber)</th>
            <th>@Html.DisplayNameFor(model => model.FirstName)</th>
            <th>@Html.DisplayNameFor(model => model.LastName)</th>
            <th>@Html.DisplayNameFor(model => model.EmploymentTitle)</th>
            <th>@Html.ActionLink("Hire New Employee", "Create", null, htmlAttributes: new { @class = "wal-lead" })</th>
        </tr>
    
        @foreach (var item in Model)
        {
            <tr>
                <td class="text-center">@Html.DisplayFor(modelItem => item.EmployeeId)</td>
                <td>@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>
                    @Html.ActionLink("Edit",    "Edit",    new { id = item.EmployeeId }, htmlAttributes: new { @class = "wal-lead" }) ::
                    @Html.ActionLink("Details", "Details", new { id = item.EmployeeId }, htmlAttributes: new { @class = "wal-lead" }) ::
                    @Html.ActionLink("Delete",  "Delete",  new { id = item.EmployeeId }, htmlAttributes: new { @class = "wal-lead" })
                </td>
            </tr>
        }
    </table>
  11. In the Solution Explorer, under Views and under Employees, double-click Create.cshtml
  12. Change the document as follows:
    @model WattsALoan1.Models.Employee
    
    @{
        ViewBag.Title = "Create Employee";
    }
    
    <h2 class="bold wheat common-font text-center">Create Employee</h2>
    
    <hr />
    
    @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()
    
        <div class="form-horizontal common-font">
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            <div class="form-group">
                @Html.LabelFor(model => model.EmployeeNumber, htmlAttributes: new { @class = "control-label col-md-5 wheat" })
                <div class="col-md-7">
                    @Html.EditorFor(model => model.EmployeeNumber, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.EmployeeNumber, "", new { @class = "text-danger" })
                </div>
            </div>
    
            <div class="form-group">
                @Html.LabelFor(model => model.FirstName, htmlAttributes: new { @class = "control-label col-md-5 wheat" })
                <div class="col-md-7">
                    @Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" })
                </div>
            </div>
    
            <div class="form-group">
                @Html.LabelFor(model => model.LastName, htmlAttributes: new { @class = "control-label col-md-5 wheat" })
                <div class="col-md-7">
                    @Html.EditorFor(model => model.LastName, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.LastName, "", new { @class = "text-danger" })
                </div>
            </div>
    
            <div class="form-group">
                @Html.LabelFor(model => model.EmploymentTitle, htmlAttributes: new { @class = "control-label col-md-5 wheat" })
                <div class="col-md-7">
                    @Html.EditorFor(model => model.EmploymentTitle, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.EmploymentTitle, "", new { @class = "text-danger" })
                </div>
            </div>
    
            <div class="form-group">
                <label class="control-label col-md-6">@Html.ActionLink("Employees", "Index", null, htmlAttributes: new { @class = "wal-lead" })</label>
                <div class="col-md-6">
                    <input type="submit" value="Hire this Employee" class="btn btn-warning" />
                </div>
            </div>
        </div>
    }
    
    @section Scripts {
        @Scripts.Render("~/bundles/jqueryval")
    }
  13. In the Solution Explorer, under Views and under Employees, double-click Delete.cshtml
  14. Change the document as follows:
    @model WattsALoan1.Models.Employee
    
    @{
        ViewBag.Title = "Delete Employee";
    }
    
    <h2 class="bold common-font text-center wheat">Delete Employee</h2>
    
    <hr />
    
    <h3 class="common-font wheat text-center">Are you sure you want to delete this?</h3>
    
    <div class="containment">
        <dl class="dl-horizontal common-font creme">
            <dt>@Html.DisplayNameFor(model => model.EmployeeId)</dt>
            <dd>@Html.DisplayFor(model => model.EmployeeId)</dd>
    
            <dt>@Html.DisplayNameFor(model => model.EmployeeNumber)</dt>
            <dd>@Html.DisplayFor(model => model.EmployeeNumber)</dd>
    
            <dt>@Html.DisplayNameFor(model => model.FirstName)</dt>
            <dd>@Html.DisplayFor(model => model.FirstName)</dd>
    
            <dt>@Html.DisplayNameFor(model => model.LastName)</dt>
            <dd>@Html.DisplayFor(model => model.LastName)</dd>
    
            <dt>@Html.DisplayNameFor(model => model.EmploymentTitle)</dt>
            <dd>@Html.DisplayFor(model => model.EmploymentTitle)</dd>
        </dl>
    
        @using (Html.BeginForm())
        {
            @Html.AntiForgeryToken()
    
            <div class="form-actions no-color">
                <input type="submit" value="Delete Employee" class="btn btn-warning" /> |
                @Html.ActionLink("Employees", "Index", null, htmlAttributes: new { @class = "wal-lead" })
            </div>
        }
    </div>
  15. In the Solution Explorer, under Views and under Employees, double-click Details.cshtml
  16. Change the document as follows:
    @model WattsALoan1.Models.Employee
    
    @{
        ViewBag.Title = "Employee Details";
    }
    
    <h2 class="bold text-center common-font wheat">Employee Details</h2>
    
    <hr />
    
    <div class="containment">
        <dl class="dl-horizontal common-font wheat">
            <dt>@Html.DisplayNameFor(model => model.EmployeeId)</dt>
            <dd>@Html.DisplayFor(model => model.EmployeeId)</dd>
    
            <dt>@Html.DisplayNameFor(model => model.EmployeeNumber)</dt>
            <dd>@Html.DisplayFor(model => model.EmployeeNumber)</dd>
    
            <dt>@Html.DisplayNameFor(model => model.FirstName)</dt>
            <dd>@Html.DisplayFor(model => model.FirstName)</dd>
    
            <dt>@Html.DisplayNameFor(model => model.LastName)</dt>
            <dd>@Html.DisplayFor(model => model.LastName)</dd>
    
            <dt>@Html.DisplayNameFor(model => model.EmploymentTitle)</dt>
            <dd>@Html.DisplayFor(model => model.EmploymentTitle)</dd>
        </dl>
    </div>
    
    <p class="text-center">
        @Html.ActionLink("Edit Employee Details", "Edit", new { id = Model.EmployeeId }, htmlAttributes: new { @class = "wal-lead" }) |
        @Html.ActionLink("Employees", "Index", null, htmlAttributes: new { @class = "wal-lead" })
    </p>
  17. In the Solution Explorer, under Views and under Employees, double-click Edit.cshtml
  18. Change the document as follows:
    @model WattsALoan1.Models.Employee
    
    @{
        ViewBag.Title = "Edit//Update Employee Information";
    }
    
    <h2 class="bold wheat common-font text-center">Edit/Update Employee Information</h2>
    
    <hr />
    
    @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()
    
        <div class="form-horizontal common-font">
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            @Html.HiddenFor(model => model.EmployeeId)
    
            <div class="form-group">
                @Html.LabelFor(model => model.EmployeeNumber, htmlAttributes: new { @class = "control-label col-md-5 wheat" })
                <div class="col-md-7">
                    @Html.EditorFor(model => model.EmployeeNumber, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.EmployeeNumber, "", new { @class = "text-danger" })
                </div>
            </div>
    
            <div class="form-group">
                @Html.LabelFor(model => model.FirstName, htmlAttributes: new { @class = "control-label col-md-5 wheat" })
                <div class="col-md-7">
                    @Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" })
                </div>
            </div>
    
            <div class="form-group">
                @Html.LabelFor(model => model.LastName, htmlAttributes: new { @class = "control-label col-md-5 wheat" })
                <div class="col-md-7">
                    @Html.EditorFor(model => model.LastName, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.LastName, "", new { @class = "text-danger" })
                </div>
            </div>
    
            <div class="form-group">
                @Html.LabelFor(model => model.EmploymentTitle, htmlAttributes: new { @class = "control-label col-md-5 wheat" })
                <div class="col-md-7">
                    @Html.EditorFor(model => model.EmploymentTitle, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.EmploymentTitle, "", new { @class = "text-danger" })
                </div>
            </div>
    
            <div class="form-group">
                <label class="control-label col-md-6">
                    @Html.ActionLink("Employees", "Index", null, htmlAttributes: new { @class = "wal-lead" })
                </label>
                <div class="col-md-6">
                    <input type="submit" value="Update Employee Record" class="btn btn-warning" />
                </div>
            </div>
        </div>
    }
    
    @section Scripts {
        @Scripts.Render("~/bundles/jqueryval")
    }
  19. In the Solution Explorer, right-click BusinessControllers -> Add -> Controller...
  20. In the middle list of the Add Scaffold dialog box, click Web API 2 Controller With Actions, Using Entity Framework
  21. Click Add
  22. In the Model Class combo box, select Employee (WattsALoan1.Models)
  23. Make sure the Data Context Class combo box is displaying LoansManagementModel (WattsALoan1.Models) and the Controller Name text box is displaying EmployeesController. Click Add

Loans Contracts

For our database, a loan contract is a document that ties a customer to a loan. Such a loan is processed by an employee who would use a form to gather as much information as possible about a customer. Our application would then process a loan.

To process a loan application, we will use a form on a webpage. In that webpage, we will request the employee to enter an identification for the employee who processed the loan, obviously for accountability reasons. For our application, we will request the value of the EmployeeId column of the Employees table. To get some information about that employee, we will use a event (the Lost Focus event of a text box). This is where we will need jQuery.

Practical LearningPractical Learning: Managing Loans Contracts

  1. In the Solution Explorer, under Models, click LoanContract.cs
  2. Change the class as follows:
    namespace WattsALoan1.Models
    {
        using System.ComponentModel.DataAnnotations;
    
        public partial class LoanContract
        {
            [Display(Name = "Loan Contract Id")]
            public int LoanContractId { get; set; }
            [Display(Name = "Loan #")]
            public int LoanNumber { get; set; }
    
            [StringLength(40)]
            [Display(Name = "Date Allocated")]
            public string DateAllocated { get; set; }
            [Display(Name = "Employee Id")]
            public int? EmployeeId { get; set; }
    
            [StringLength(20)]
            [Display(Name = "First Name")]
            public string CustomerFirstName { get; set; }
    
            [StringLength(20)]
            [Display(Name = "Last Name")]
            public string CustomerLastName { get; set; }
    
            [StringLength(20)]
            [Display(Name = "Loan Type")]
            public string LoanType { get; set; }
            [StringLength(10)]
            [Display(Name = "Loan Amount")]
            public string LoanAmount { get; set; }
            [StringLength(10)]
           [Display(Name = "Interest Rate")]
            public string InterestRate { get; set; }
    
            public int? Periods { get; set; }
            [StringLength(10)]
            [Display(Name = "Monthly Payment")]
            public string MonthlyPayment { get; set; }
            [StringLength(10)]
            [Display(Name = "Future Value")]
            public string FutureValue { get; set; }
            [StringLength(10)]
            [Display(Name = "Interest Amount")]
            public string InterestAmount { get; set; }
    
            [StringLength(40)]
            [Display(Name = "Payment Start Date")]
            public DateTime? PaymentStartDate { get; set; }
    
            public string Identification
            {
                get
                {
                    return LoanContractId + " - " + LoanNumber + " as " + LoanType + " to " + 
                           CustomerFirstName + " " + CustomerLastName + " for " + 
                           LoanAmount + " (" + MonthlyPayment + "/month)";
                }
            }
        }
    }
  3. In the Solution Explorer, right-click BusinessControllers -> Add -> New Scaffolded Item...
  4. In the left list of the Add Scaffold dialog box, under Common and under MVC, click Web API
  5. In the middle frame of the Add Scaffold dialog box, click Web API 2 Controller With Actions, Using Entity Framework
  6. Click Add
  7. In the Model Class combo box, select LoanContract (WattsALoan1.Models)
  8. Make sure the Data Context Class combo box displays LoansManagementModel (WattsALoan1.Models) and the Controller Name text box displays LoanContractsController.
    Click Add
  9. In the Solution Explorer, right-click Controllers -> Add -> Controller...
  10. In the middle frame of the Add Scaffold dialog box, click MVC 5 Controller With Views, Using Entity Framework
  11. Click Add
  12. In the Model Class combo box, select LoanContract (WattsALoan1.Models)
  13. Make sure the Data Context Class combo box displays LoansManagementModel (WattsALoan1.Models) and the Controller Name text box displays LoanContractsController.
    Click Add
  14. Change the class as follows:
    using System;
    using System.Collections.Generic;
    using System.Data.Entity;
    using System.Linq;
    using System.Net;
    using System.Web.Mvc;
    using WattsALoan1.Models;
    
    namespace WattsALoan1.Controllers
    {
        public class LoanContractsController : Controller
        {
            private LoansManagementModel db = new LoansManagementModel();
    
            // GET: LoanContracts
            public ActionResult Index()
            {
                return View(db.LoanContracts.ToList());
            }
    
            // GET: LoanContracts/Details/5
            public ActionResult Details(int? id)
            {
                if (id == null)
                {
                    return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
                }
                LoanContract loanContract = db.LoanContracts.Find(id);
    
                ViewData["DateAllocated"] = DateTime.Parse(loanContract.DateAllocated.ToString()).ToLongDateString();
                ViewData["PaymentStartDate"] = DateTime.Parse(loanContract.PaymentStartDate.ToString()).ToLongDateString();
    
                if (loanContract == null)
                {
                    return HttpNotFound();
                }
                return View(loanContract);
            }
    
            // GET: LoanContracts/Create
            public ActionResult Create()
            {
                Random rndNumber = new Random();
                List<SelectListItem> loanTypes = new List<SelectListItem>();
    
                ViewData["LoanNumber"] = rndNumber.Next(100001, 999999);
    
                loanTypes.Add(new SelectListItem() { Text = "Personal Loan", Value = "Personal Loan" });
                loanTypes.Add(new SelectListItem() { Text = "Car Financing", Value = "Car Financing" });
                loanTypes.Add(new SelectListItem() { Text = "Boat Financing", Value = "Boat Financing" });
                loanTypes.Add(new SelectListItem() { Text = "Furniture Purchase", Value = "Furniture Purchase" });
                loanTypes.Add(new SelectListItem() { Text = "Musical Instrument", Value = "Musical Instrument" });
    
                // Store the list in a View Bag so it can be access by a combo box
                ViewBag.LoanType = loanTypes;
                return View();
            }
    
            // POST: LoanContracts/Create
            // To protect from overposting attacks, please enable the specific properties you want to bind to, for 
            // more details see https://go.microsoft.com/fwlink/?LinkId=317598.
            [HttpPost]
            [ValidateAntiForgeryToken]
            public ActionResult Create([Bind(Include = "LoanContractId,LoanNumber,DateAllocated,EmployeeId,CustomerFirstName,CustomerLastName,LoanType,LoanAmount,InterestRate,Periods,MonthlyPayment,FutureValue,InterestAmount,PaymentStartDate")] LoanContract loanContract)
            {
                if (ModelState.IsValid)
                {
                    db.LoanContracts.Add(loanContract);
                    db.SaveChanges();
                    return RedirectToAction("Index");
                }
    
                return View(loanContract);
            }
    
            // GET: LoanContracts/Edit/5
            public ActionResult Edit(int? id)
            {
                if (id == null)
                {
                    return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
                }
                LoanContract loanContract = db.LoanContracts.Find(id);
                if (loanContract == null)
                {
                    return HttpNotFound();
                }
                return View(loanContract);
            }
    
            // POST: LoanContracts/Edit/5
            // To protect from overposting attacks, please enable the specific properties you want to bind to, for 
            // more details see https://go.microsoft.com/fwlink/?LinkId=317598.
            [HttpPost]
            [ValidateAntiForgeryToken]
            public ActionResult Edit([Bind(Include = "LoanContractId,LoanNumber,DateAllocated,EmployeeId,CustomerFirstName,CustomerLastName,LoanType,LoanAmount,InterestRate,Periods,MonthlyPayment,FutureValue,InterestAmount,PaymentStartDate")] LoanContract loanContract)
            {
                if (ModelState.IsValid)
                {
                    db.Entry(loanContract).State = EntityState.Modified;
                    db.SaveChanges();
                    return RedirectToAction("Index");
                }
                return View(loanContract);
            }
    
            // GET: LoanContracts/Delete/5
            public ActionResult Delete(int? id)
            {
                if (id == null)
                {
                    return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
                }
                LoanContract loanContract = db.LoanContracts.Find(id);
    
                ViewData["DateAllocated"] = DateTime.Parse(loanContract.DateAllocated.ToString()).ToLongDateString();
                ViewData["PaymentStartDate"] = DateTime.Parse(loanContract.PaymentStartDate.ToString()).ToLongDateString();
    
                if (loanContract == null)
                {
                    return HttpNotFound();
                }
                return View(loanContract);
            }
    
            // POST: LoanContracts/Delete/5
            [HttpPost, ActionName("Delete")]
            [ValidateAntiForgeryToken]
            public ActionResult DeleteConfirmed(int id)
            {
                LoanContract loanContract = db.LoanContracts.Find(id);
                db.LoanContracts.Remove(loanContract);
                db.SaveChanges();
                return RedirectToAction("Index");
            }
    
            protected override void Dispose(bool disposing)
            {
                if (disposing)
                {
                    db.Dispose();
                }
                base.Dispose(disposing);
            }
        }
    }
  15. In the class, right-click Index() and click Add View...
  16. In the Add View dialog box, make sure the View Name text box is displaying Index. Click Add
  17. Change the webpage as follows:
    @model IEnumerable<WattsALoan1.Models.LoanContract>
    
    @{
        ViewBag.Title = "Loans Contracts";
    }
    
    <h2 class="bold wheat common-font text-center">Loans Contracts</h2>
    
    <table class="table common-font">
        <tr>
            <th class="text-center">@Html.DisplayNameFor(model => model.LoanContractId)</th>
            <th class="text-center">Processed By</th>
            <th class="text-center">@Html.DisplayNameFor(model => model.LoanNumber)</th>
            <th class="text-center">@Html.DisplayNameFor(model => model.DateAllocated)</th>
            <th>@Html.DisplayNameFor(model => model.CustomerFirstName)</th>
            <th>@Html.DisplayNameFor(model => model.CustomerLastName)</th>
            <th>@Html.DisplayNameFor(model => model.LoanType)</th>
            <th>@Html.DisplayNameFor(model => model.LoanAmount)</th>
            <th>@Html.DisplayNameFor(model => model.InterestRate)</th>
            <th>@Html.DisplayNameFor(model => model.Periods)</th>
            <th>@Html.DisplayNameFor(model => model.MonthlyPayment)</th>
            <th>@Html.DisplayNameFor(model => model.FutureValue)</th>
            <th>@Html.DisplayNameFor(model => model.InterestAmount)</th>
            <th class="text-center">@Html.DisplayNameFor(model => model.PaymentStartDate)</th>
            <th>@Html.ActionLink("Create Loan Contract", "Create", null, htmlAttributes: new { @class = "wal-lead" })</th>
        </tr>
    
    @foreach (var item in Model)
    {
        string strDateAllocated = DateTime.Parse(item.DateAllocated.ToString()).ToShortDateString();
        string strPaymentStartDate = DateTime.Parse(item.PaymentStartDate.ToString()).ToShortDateString();
    
        <tr>
            <td class="text-center">@Html.DisplayFor(modelItem => item.LoanContractId)</td>
            <td>@Html.DisplayFor(modelItem => item.Employee.Identification)</td>
            <td class="text-center">@Html.DisplayFor(modelItem => item.LoanNumber)</td>
            <td class="text-center">@strDateAllocated</td>
            <td>@Html.DisplayFor(modelItem => item.CustomerFirstName)</td>
            <td>@Html.DisplayFor(modelItem => item.CustomerLastName)</td>
            <td>@Html.DisplayFor(modelItem => item.LoanType)</td>
            <td>@Html.DisplayFor(modelItem => item.LoanAmount)</td>
            <td>@Html.DisplayFor(modelItem => item.InterestRate)</td>
            <td>@Html.DisplayFor(modelItem => item.Periods)</td>
            <td>@Html.DisplayFor(modelItem => item.MonthlyPayment)</td>
            <td>@Html.DisplayFor(modelItem => item.FutureValue)</td>
            <td>@Html.DisplayFor(modelItem => item.InterestAmount)</td>
            <td class="text-center">@strPaymentStartDate</td>
            <td>
                @Html.ActionLink("Edit", "Edit", new { id = item.LoanContractId }, htmlAttributes: new { @class = "wal-lead" }) :: 
                @Html.ActionLink("Details", "Details", new { id = item.LoanContractId }, htmlAttributes: new { @class = "wal-lead" }) ::
                @Html.ActionLink("Delete", "Delete", new { id = item.LoanContractId }, htmlAttributes: new { @class = "wal-lead" })
            </td>
        </tr>
    }
    
    </table>
    
  18. In the Solution Explorer, under Views and under LoansContracts, click Create
  19. Create the form as follows:
    @model WattsALoan1.Models.LoanContract
    
    @{
        ViewBag.Title = "Create Loan Contract";
    }
    
    <h2 class="bold wheat common-font text-center">Create Loan Contract</h2>
    
    <hr />
    
    @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()
    
    <div class="form-horizontal common-font">
    
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.LoanNumber, htmlAttributes: new { @class = "control-label col-md-5 wheat" })
            <div class="col-md-7">
                @Html.TextBox("LoanNumber", ViewData["LoanNumber"], htmlAttributes: new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.LoanNumber, "", new { @class = "text-danger" })
            </div>
        </div>
    
        <div class="form-group">
            @Html.LabelFor(model => model.DateAllocated, htmlAttributes: new { @class = "control-label col-md-5 wheat" })
            <div class="col-md-7">
                @Html.EditorFor(model => model.DateAllocated, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.DateAllocated, "", new { @class = "text-danger" })
            </div>
        </div>
    
        <div class="form-group">
            @Html.LabelFor(model => model.EmployeeId, htmlAttributes: new { @class = "control-label col-md-5 wheat" })
            <div class="col-md-1">
                @Html.TextBox("EmployeeId", null, htmlAttributes: new { @class = "form-control", id = "emplId" })
                @Html.ValidationMessageFor(model => model.EmployeeId, "", new { @class = "text-danger" })
            </div>
            <div class="col-md-6">
                <span id="employeeIdentification" class="wheat"></span>
            </div>
        </div>
    
        <div class="form-group">
            @Html.LabelFor(model => model.CustomerFirstName, htmlAttributes: new { @class = "control-label col-md-5 wheat" })
            <div class="col-md-7">
                @Html.EditorFor(model => model.CustomerFirstName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.CustomerFirstName, "", new { @class = "text-danger" })
            </div>
        </div>
    
        <div class="form-group">
            @Html.LabelFor(model => model.CustomerLastName, htmlAttributes: new { @class = "control-label col-md-5 wheat" })
            <div class="col-md-7">
                @Html.EditorFor(model => model.CustomerLastName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.CustomerLastName, "", new { @class = "text-danger" })
            </div>
        </div>
    
        <div class="form-group">
            @Html.LabelFor(model => model.LoanType, htmlAttributes: new { @class = "control-label col-md-5 wheat" })
            <div class="col-md-7">
                @Html.DropDownList("LoanType", ViewBag.LoansTypes as SelectList,
                                       htmlAttributes: new { @class = "form-control col-md-5 blue" })
                @Html.ValidationMessageFor(model => model.LoanType, "", new { @class = "text-danger" })
            </div>
        </div>
    
        <div class="form-group">
            @Html.LabelFor(model => model.LoanAmount, htmlAttributes: new { @class = "control-label col-md-5 wheat" })
            <div class="col-md-7">
                @Html.EditorFor(model => model.LoanAmount, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.LoanAmount, "", new { @class = "text-danger" })
            </div>
        </div>
    
        <div class="form-group">
            @Html.LabelFor(model => model.InterestRate, htmlAttributes: new { @class = "control-label col-md-5 wheat" })
            <div class="col-md-7">
                @Html.EditorFor(model => model.InterestRate, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.InterestRate, "", new { @class = "text-danger" })
            </div>
        </div>
    
        <div class="form-group">
            @Html.LabelFor(model => model.Periods, htmlAttributes: new { @class = "control-label col-md-5 wheat" })
            <div class="col-md-7">
                @Html.EditorFor(model => model.Periods, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Periods, "", new { @class = "text-danger" })
            </div>
        </div>
    
        <div class="form-group">
            @Html.LabelFor(model => model.MonthlyPayment, htmlAttributes: new { @class = "control-label col-md-5 wheat" })
            <div class="col-md-7">
                @Html.EditorFor(model => model.MonthlyPayment, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.MonthlyPayment, "", new { @class = "text-danger" })
            </div>
        </div>
    
        <div class="form-group">
            @Html.LabelFor(model => model.FutureValue, htmlAttributes: new { @class = "control-label col-md-5 wheat" })
            <div class="col-md-7">
                @Html.EditorFor(model => model.FutureValue, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.FutureValue, "", new { @class = "text-danger" })
            </div>
        </div>
    
        <div class="form-group">
            @Html.LabelFor(model => model.InterestAmount, htmlAttributes: new { @class = "control-label col-md-5 wheat" })
            <div class="col-md-7">
                @Html.EditorFor(model => model.InterestAmount, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.InterestAmount, "", new { @class = "text-danger" })
            </div>
        </div>
    
        <div class="form-group">
            @Html.LabelFor(model => model.PaymentStartDate, htmlAttributes: new { @class = "control-label col-md-5 wheat" })
            <div class="col-md-7">
                @Html.EditorFor(model => model.PaymentStartDate, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.PaymentStartDate, "", new { @class = "text-danger" })
            </div>
        </div>
    
        <div class="form-group">
            <label class="control-label col-md-6">@Html.ActionLink("Loans Contracts", "Index", null, htmlAttributes: new { @class = "wal-lead" })</label>
            <div class="col-md-6">
                <input type="submit" value="Create Loan Contract" class="btn btn-warning" />
            </div>
        </div>
    </div>
    }
    
    @section Scripts {
        @Scripts.Render("~/bundles/jqueryval")
    }
    
    @Scripts.Render("~/bundles/jquery")
    
    <script type="text/javascript">
        $(document).ready(function () {
            $("#emplId").blur(function (event) {
                $.ajax({
                    method: "GET",
                    dataType: "json",
                    url: "/api/Employees/" + $("#emplId").val(),
                    success: function (data) {
                        $("#employeeIdentification").text(data.Identification);
                    }
                });
            }); // Employee id Lost Focus
        });
    </script>
  20. In the Solution Explorer, under Views and under LoanContracts, click Delete
  21. Change the document as follows:
    @model WattsALoan1.Models.LoanContract
    
    @{
        ViewBag.Title = "Delete Loan Contract";
    }
    
    <h2 class="bold common-font text-center wheat">Delete Loan Contract</h2>
    
    <hr />
    
    <h3 class="common-font wheat text-center">Are you sure you want to delete this?</h3>
    
    <div class="containment">
        <dl class="dl-horizontal common-font wheat">
            <dt>@Html.DisplayNameFor(model => model.LoanContractId)</dt>
            <dd>@Html.DisplayFor(model => model.LoanContractId)</dd>
            <dt>Processed By</dt>
            <dd>@Html.DisplayFor(model => model.Employee.Identification)</dd>
            <dt>@Html.DisplayNameFor(model => model.LoanNumber)</dt>
            <dd>@Html.DisplayFor(model => model.LoanNumber)</dd>
            <dt>@Html.DisplayNameFor(model => model.DateAllocated)</dt>
            <dd>@ViewData["DateAllocated"]</dd>
            <dt>@Html.DisplayNameFor(model => model.CustomerFirstName)</dt>
            <dd>@Html.DisplayFor(model => model.CustomerFirstName)</dd>
            <dt>@Html.DisplayNameFor(model => model.CustomerLastName)</dt>
            <dd>@Html.DisplayFor(model => model.CustomerLastName)</dd>
            <dt>@Html.DisplayNameFor(model => model.LoanType)</dt>
            <dd>@Html.DisplayFor(model => model.LoanType)</dd>
            <dt>@Html.DisplayNameFor(model => model.LoanAmount)</dt>
            <dd>@Html.DisplayFor(model => model.LoanAmount)</dd>
            <dt>@Html.DisplayNameFor(model => model.InterestRate)</dt>
            <dd>@Html.DisplayFor(model => model.InterestRate)</dd>
            <dt>@Html.DisplayNameFor(model => model.Periods)</dt>
            <dd>@Html.DisplayFor(model => model.Periods)</dd>
            <dt>@Html.DisplayNameFor(model => model.MonthlyPayment)</dt>
            <dd>@Html.DisplayFor(model => model.MonthlyPayment)</dd>
            <dt>@Html.DisplayNameFor(model => model.FutureValue)</dt>
            <dd>@Html.DisplayFor(model => model.FutureValue)</dd>
            <dt>@Html.DisplayNameFor(model => model.InterestAmount)</dt>
            <dd>@Html.DisplayFor(model => model.InterestAmount)</dd>
            <dt>@Html.DisplayNameFor(model => model.PaymentStartDate)</dt>
            <dd>@ViewData["PaymentStartDate"]</dd>
        </dl>
    
        @using (Html.BeginForm())
        {
            @Html.AntiForgeryToken()
    
            <div class="form-actions no-color">
                <input type="submit" value="Delete this Loan Contract" class="btn btn-warning" /> ::
                @Html.ActionLink("Loans Contracts", "Index", null, htmlAttributes: new { @class = "wal-lead" })
            </div>
        }
    </div>
  22. In the Solution Explorer, under Views and under LoanContracts, click Details
  23. Change the document as follows:
    @model WattsALoan1.Models.LoanContract
    
    @{
        ViewBag.Title = "Loan Contract Details";
    }
    
    <h2 class="bold text-center common-font wheat">Loan Contract Details</h2>
    
    <hr />
    
    <div class="containment">
        <dl class="dl-horizontal common-font wheat">
            <dt>@Html.DisplayNameFor(model => model.LoanContractId)</dt>
            <dd>@Html.DisplayFor(model => model.LoanContractId)</dd>
    
            <dt>Processed By</dt>
            <dd>@Html.DisplayFor(model => model.Employee.Identification)</dd>
    
            <dt>@Html.DisplayNameFor(model => model.LoanNumber)</dt>
            <dd>@Html.DisplayFor(model => model.LoanNumber)</dd>
    
            <dt>@Html.DisplayNameFor(model => model.DateAllocated)</dt>
            <dd>@ViewData["DateAllocated"]</dd>
    
            <dt>@Html.DisplayNameFor(model => model.CustomerFirstName)</dt>
            <dd>@Html.DisplayFor(model => model.CustomerFirstName)</dd>
    
            <dt>@Html.DisplayNameFor(model => model.CustomerLastName)</dt>
            <dd>@Html.DisplayFor(model => model.CustomerLastName)</dd>
    
            <dt>@Html.DisplayNameFor(model => model.LoanType)</dt>
            <dd>@Html.DisplayFor(model => model.LoanType)</dd>
    
            <dt>@Html.DisplayNameFor(model => model.LoanAmount)</dt>
            <dd>@Html.DisplayFor(model => model.LoanAmount)</dd>
    
            <dt>@Html.DisplayNameFor(model => model.InterestRate)</dt>
            <dd>@Html.DisplayFor(model => model.InterestRate)</dd>
    
            <dt>@Html.DisplayNameFor(model => model.Periods)</dt>
            <dd>@Html.DisplayFor(model => model.Periods)</dd>
    
            <dt>@Html.DisplayNameFor(model => model.MonthlyPayment)</dt>
            <dd>@Html.DisplayFor(model => model.MonthlyPayment)</dd>
    
            <dt>@Html.DisplayNameFor(model => model.FutureValue)</dt>
            <dd>@Html.DisplayFor(model => model.FutureValue)</dd>
    
            <dt>@Html.DisplayNameFor(model => model.InterestAmount)</dt>
            <dd>@Html.DisplayFor(model => model.InterestAmount)</dd>
    
            <dt>@Html.DisplayNameFor(model => model.PaymentStartDate)</dt>
            <dd>@ViewData["PaymentStartDate"]</dd>
        </dl>
    </div>
    
    <p class="text-center">
        @Html.ActionLink("Edit this Loan Contract", "Edit", new { id = Model.LoanContractId }, htmlAttributes: new { @class = "wal-lead" }) ::
        @Html.ActionLink("Loans Contracts", "Index", null, htmlAttributes: new { @class = "wal-lead" })
    </p>
  24. In the Solution Explorer, under Views and under LoanContracts, click Edit
  25. Change the document as follows:
    @model WattsALoan1.Models.LoanContract
    
    @{
        ViewBag.Title = "Edit/Update Loan Contract";
    }
    
    <h2 class="bold wheat common-font text-center">Edit/Update Loan Contract</h2>
    
    <hr />
    
    @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()
    
        <div class="form-horizontal common-font">
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            @Html.HiddenFor(model => model.LoanContractId)
    
            <div class="form-group">
                @Html.LabelFor(model => model.LoanNumber, htmlAttributes: new { @class = "control-label col-md-5 wheat" })
                <div class="col-md-7">
                    @Html.EditorFor(model => model.LoanNumber, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.LoanNumber, "", new { @class = "text-danger" })
                </div>
            </div>
    
            <div class="form-group">
                @Html.LabelFor(model => model.DateAllocated, htmlAttributes: new { @class = "control-label col-md-5 wheat" })
                <div class="col-md-7">
                    @Html.EditorFor(model => model.DateAllocated,
                                    new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.DateAllocated, "", new { @class = "text-danger" })
                </div>
            </div>
    
            <div class="form-group">
                @Html.LabelFor(model => model.EmployeeId, htmlAttributes: new { @class = "control-label col-md-5 wheat" })
                <div class="col-md-1">
                    @Html.TextBox("EmployeeId", null, htmlAttributes: new { @class = "form-control", id = "emplId" })
                    @Html.ValidationMessageFor(model => model.EmployeeId, "", new { @class = "text-danger" })
                </div>
                <div class="col-md-6">
                    <span id="employeeIdentification" class="wheat"></span>
                </div>
            </div>
    
            <div class="form-group">
                @Html.LabelFor(model => model.CustomerFirstName, htmlAttributes: new { @class = "control-label col-md-5 wheat" })
                <div class="col-md-7">
                    @Html.EditorFor(model => model.CustomerFirstName, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.CustomerFirstName, "", new { @class = "text-danger" })
                </div>
            </div>
    
            <div class="form-group">
                @Html.LabelFor(model => model.CustomerLastName, htmlAttributes: new { @class = "control-label col-md-5 wheat" })
                <div class="col-md-7">
                    @Html.EditorFor(model => model.CustomerLastName, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.CustomerLastName, "", new { @class = "text-danger" })
                </div>
            </div>
    
            <div class="form-group">
                @Html.LabelFor(model => model.LoanType, htmlAttributes: new { @class = "control-label col-md-5 wheat" })
                <div class="col-md-7">
                    @Html.EditorFor(model => model.LoanType, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.LoanType, "", new { @class = "text-danger" })
                </div>
            </div>
    
            <div class="form-group">
                @Html.LabelFor(model => model.LoanAmount, htmlAttributes: new { @class = "control-label col-md-5 wheat" })
                <div class="col-md-7">
                    @Html.EditorFor(model => model.LoanAmount, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.LoanAmount, "", new { @class = "text-danger" })
                </div>
            </div>
    
            <div class="form-group">
                @Html.LabelFor(model => model.InterestRate, htmlAttributes: new { @class = "control-label col-md-5 wheat" })
                <div class="col-md-7">
                    @Html.EditorFor(model => model.InterestRate, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.InterestRate, "", new { @class = "text-danger" })
                </div>
            </div>
    
            <div class="form-group">
                @Html.LabelFor(model => model.Periods, htmlAttributes: new { @class = "control-label col-md-5 wheat" })
                <div class="col-md-7">
                    @Html.EditorFor(model => model.Periods, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Periods, "", new { @class = "text-danger" })
                </div>
            </div>
    
            <div class="form-group">
                @Html.LabelFor(model => model.MonthlyPayment, htmlAttributes: new { @class = "control-label col-md-5 wheat" })
                <div class="col-md-7">
                    @Html.EditorFor(model => model.MonthlyPayment, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.MonthlyPayment, "", new { @class = "text-danger" })
                </div>
            </div>
    
            <div class="form-group">
                @Html.LabelFor(model => model.FutureValue, htmlAttributes: new { @class = "control-label col-md-5 wheat" })
                <div class="col-md-7">
                    @Html.EditorFor(model => model.FutureValue, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.FutureValue, "", new { @class = "text-danger" })
                </div>
            </div>
    
            <div class="form-group">
                @Html.LabelFor(model => model.InterestAmount, htmlAttributes: new { @class = "control-label col-md-5 wheat" })
                <div class="col-md-7">
                    @Html.EditorFor(model => model.InterestAmount, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.InterestAmount, "", new { @class = "text-danger" })
                </div>
            </div>
    
            <div class="form-group">
                @Html.LabelFor(model => model.PaymentStartDate, htmlAttributes: new { @class = "control-label col-md-5 wheat" })
                <div class="col-md-7">
                    @Html.EditorFor(model => model.PaymentStartDate, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.PaymentStartDate, "", new { @class = "text-danger" })
                </div>
            </div>
    
            <div class="form-group">
                <label class="control-label col-md-6">
                    @Html.ActionLink("Loans Contracts", "Index", null, htmlAttributes: new { @class = "wal-lead" })
                </label>
                <div class="col-md-6">
                    <input type="submit" value="Update this Loan Contract" class="btn btn-warning" />
                </div>
            </div>
        </div>
    }
    
    @section Scripts {
        @Scripts.Render("~/bundles/jqueryval")
    }
    
    @Scripts.Render("~/bundles/jquery")
    
    <script type="text/javascript">
        $(document).ready(function () {
    //        $("#emplId").blur(function (event) {
                $.ajax({
                    method: "GET",
                    dataType: "json",
                    url: "/api/Employees/" + $("#emplId").val(),
                    success: function (data) {
                        $("#employeeIdentification").text(data.Identification);
                    }
                });
      //      }); // Employee id Lost Focus
        });
    </script>

Payments

Customers who have current loan contract must make monthly payments until the loan is paid off. To assist the company with this, our application uses a form in a webpage from which information about a payment can be entered and the payment can be processed. Once again, we will use jQuery to use events we need.

Practical LearningPractical Learning: Using a Local Object

  1. In the Solution Explorer, under Models, double-click Payment.cs
  2. Change the class as follows:
    namespace WattsALoan1.Models
    {
        using System.ComponentModel.DataAnnotations;
    
        [Table("Management.Payments")]
        public partial class Payment
        {
            [Display(Name = "Payment Id")]
            public int PaymentID { get; set; }
            [Display(Name = "Receipt #")]
            public int? ReceiptNumber { get; set; }
    
            [StringLength(40)]
            [Display(Name = "Payment Date")]
            public string PaymentDate { get; set; }
            [Display(Name = "Employee Id")]
            public int? EmployeeID { get; set; }
            [Display(Name = "Loan Contract Id")]
            public int? LoanContractID { get; set; }
            [StringLength(10)]
            [Display(Name = "Payment Amount")]
            public string PaymentAmount { get; set; }
    	      [StringLength(10)]
            public string Balance { get; set; }
    
            public virtual Employee Employee { get; set; }
            public virtual LoanContract LoanContract { get; set; }
        }
    }
  3. In the Solution Explorer, right-click BusinessControllers -> Add -> New Scaffolded Item...
  4. In the left list of the Add Scaffold dialog box, under Common, click Web API and, in the middle list, click Web API 2 Controller With Actions, Using Entity Framework
  5. Click Add
  6. In the Model Class combo box, select Payment (WattsALoan1.Models)
  7. Click Add
  8. In the Solution Explorer, right-click Controllers -> Add -> Controller...
  9. In the middle list of the Add Scaffold dialog box, click MVC 5 Controller With Views, Using Entity Framework
  10. Click Add
  11. In the Model Class combo box of the Add Controller dialog box, select Payment (WattsALoan1.Models)
  12. Make sure the Data Context Class combo box displays LoansManagementModel (WattsALoan1.Models). Click Add
  13. Change the PaymentsController class as follows:
    using System;
    using System.Data.Entity;
    using System.Linq;
    using System.Net;
    using System.Web.Mvc;
    using WattsALoan1.Models;
    
    namespace WattsALoan1.Controllers
    {
        public class PaymentsController : Controller
        {
            private LoansManagementModel db = new LoansManagementModel();
    
            // GET: Payments
            public ActionResult Index()
            {
                var payments = db.Payments.Include(p => p.Employee).Include(p => p.LoanContract);
                return View(payments.ToList());
            }
    
            // GET: Payments/Details/5
            public ActionResult Details(int? id)
            {
                if (id == null)
                {
                    return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
                }
                Payment payment = db.Payments.Find(id);
    
                ViewData["PaymentDate"] = DateTime.Parse(payment.PaymentDate.ToString()).ToLongDateString();
    
                if (payment == null)
                {
                    return HttpNotFound();
                }
                return View(payment);
            }
    
            // GET: Payments/Create
            public ActionResult Create()
            {
                Random rndNumber = new Random();
    
                ViewData["ReceiptNumber"] = rndNumber.Next(100001, 999999);
                
                return View();
            }
    
            // POST: Payments/Create
            // To protect from overposting attacks, please enable the specific properties you want to bind to, for 
            // more details see https://go.microsoft.com/fwlink/?LinkId=317598.
            [HttpPost]
            [ValidateAntiForgeryToken]
            public ActionResult Create([Bind(Include = "PaymentId,ReceiptNumber,PaymentDate,EmployeeId,LoanContractId,PaymentAmount,Balance")] Payment payment)
            {
                if (ModelState.IsValid)
                {
                    db.Payments.Add(payment);
                    db.SaveChanges();
                    return RedirectToAction("Index");
                }
    
                return View(payment);
            }
    
            // GET: Payments/Edit/5
            public ActionResult Edit(int? id)
            {
                if (id == null)
                {
                    return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
                }
                Payment payment = db.Payments.Find(id);
                if (payment == null)
                {
                    return HttpNotFound();
                }
    
                return View(payment);
            }
    
            // POST: Payments/Edit/5
            // To protect from overposting attacks, please enable the specific properties you want to bind to, for 
            // more details see https://go.microsoft.com/fwlink/?LinkId=317598.
            [HttpPost]
            [ValidateAntiForgeryToken]
            public ActionResult Edit([Bind(Include = "PaymentId,ReceiptNumber,PaymentDate,EmployeeId,LoanContractId,PaymentAmount,Balance")] Payment payment)
            {
                if (ModelState.IsValid)
                {
                    db.Entry(payment).State = EntityState.Modified;
                    db.SaveChanges();
                    return RedirectToAction("Index");
                }
    
                return View(payment);
            }
    
            // GET: Payments/Delete/5
            public ActionResult Delete(int? id)
            {
                if (id == null)
                {
                    return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
                }
                Payment payment = db.Payments.Find(id);
    
                ViewData["PaymentDate"] = DateTime.Parse(payment.PaymentDate.ToString()).ToLongDateString();
    
                if (payment == null)
                {
                    return HttpNotFound();
                }
                return View(payment);
            }
    
            // POST: Payments/Delete/5
            [HttpPost, ActionName("Delete")]
            [ValidateAntiForgeryToken]
            public ActionResult DeleteConfirmed(int id)
            {
                Payment payment = db.Payments.Find(id);
                db.Payments.Remove(payment);
                db.SaveChanges();
                return RedirectToAction("Index");
            }
    
            protected override void Dispose(bool disposing)
            {
                if (disposing)
                {
                    db.Dispose();
                }
                base.Dispose(disposing);
            }
        }
    }
  14. In the class, right-click Index() and click Go To View...
  15. Change the code as follows:
    @model IEnumerable<WattsALoan1.Models.Payment>
    
    @{
        ViewBag.Title = "Loans Payments";
    }
    
    <h2 class="bold wheat common-font text-center">Loans Payments</h2>
    
    <table class="table common-font">
        <tr>
            <th class="text-center">@Html.DisplayNameFor(model => model.PaymentId)</th>
            <th>@Html.DisplayNameFor(model => model.Employee.EmployeeNumber)</th>
            <th>@Html.DisplayNameFor(model => model.LoanContract.CustomerFirstName)</th>
            <th class="text-center">@Html.DisplayNameFor(model => model.ReceiptNumber)</th>
            <th>@Html.DisplayNameFor(model => model.PaymentDate)</th>
            <th>@Html.DisplayNameFor(model => model.PaymentAmount)</th>
            <th>@Html.DisplayNameFor(model => model.Balance)</th>
            <th>@Html.ActionLink("Make Loan Payment", "Create", null, htmlAttributes: new { @class = "wal-lead" })</th>
        </tr>
    
        @foreach (var item in Model)
        {
            string strPaymentDate = DateTime.Parse(item.PaymentDate.ToString()).ToLongDateString();
    
            <tr>
                <td class="text-center">@Html.DisplayFor(modelItem => item.PaymentId)</td>
                <td>@Html.DisplayFor(modelItem => item.Employee.EmployeeNumber)</td>
                <td>@Html.DisplayFor(modelItem => item.LoanContract.CustomerFirstName)</td>
                <td class="text-center">@Html.DisplayFor(modelItem => item.ReceiptNumber)</td>
                <td>@strPaymentDate</td>
                <td>@Html.DisplayFor(modelItem => item.PaymentAmount)</td>
                <td>@Html.DisplayFor(modelItem => item.Balance)</td>
                <td>
                    @Html.ActionLink("Edit",    "Edit",    new { id = item.PaymentId }, htmlAttributes: new { @class = "wal-lead" }) :: 
                    @Html.ActionLink("Details", "Details", new { id = item.PaymentId }, htmlAttributes: new { @class = "wal-lead" }) :: 
                    @Html.ActionLink("Delete",  "Delete",  new { id = item.PaymentId }, htmlAttributes: new { @class = "wal-lead" })
                </td>
            </tr>
        }
    </table>
  16. In the Solution Explorer, under Views and under Payments, double-click Create.cshtml
  17. Change the form as follows:
    @model WattsALoan1.Models.Payment
    
    @{
        ViewBag.Title = "Create Payment";
    }
    
    <h2 class="bold wheat common-font text-center">Create Loan Payment</h2>
    
    <hr />
    
    @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()
    
        <div class="form-horizontal common-font">
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            <div class="form-group">
                @Html.LabelFor(model => model.ReceiptNumber, htmlAttributes: new { @class = "control-label col-md-5 wheat" })
                <div class="col-md-7">
                    @Html.TextBox("ReceiptNumber", ViewData["ReceiptNumber"], htmlAttributes: new { @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.ReceiptNumber, "", new { @class = "text-danger" })
                </div>
            </div>
    
            <div class="form-group">
                @Html.LabelFor(model => model.PaymentDate, htmlAttributes: new { @class = "control-label col-md-5 wheat" })
                <div class="col-md-7">
                    @Html.EditorFor(model => model.PaymentDate, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.PaymentDate, "", new { @class = "text-danger" })
                </div>
            </div>
    
            <div class="form-group">
                @Html.LabelFor(model => model.EmployeeId, htmlAttributes: new { @class = "control-label col-md-5 wheat" })
                <div class="col-md-1">
                    @Html.TextBox("EmployeeId", null, htmlAttributes: new { @class = "form-control", id = "emplId" })
                    @Html.ValidationMessageFor(model => model.EmployeeId, "", new { @class = "text-danger" })
                </div>
                <div class="col-md-6">
                    <span id="employeeIdentification" class="wheat"></span>
                </div>
            </div>
    
            <div class="form-group">
                @Html.LabelFor(model => model.LoanContractId, htmlAttributes: new { @class = "control-label col-md-5 wheat" })
                <div class="col-md-7">
                    @Html.TextBox("LoanContractId", null, htmlAttributes: new { @class = "form-control", id = "loanId" })
                    @Html.ValidationMessageFor(model => model.LoanContractId, "", new { @class = "text-danger" })
                </div>
            </div>
    
            <div class="form-group">
                <label class="control-label col-md-5 wheat"></label>
                <div class="col-md-7">
                    <span id="loanDetails" class="form-control"></span>
                    @Html.ValidationMessageFor(model => model.LoanContractId, "", new { @class = "text-danger" })
                </div>
            </div>
    
            <div class="form-group">
                @Html.LabelFor(model => model.PaymentAmount, htmlAttributes: new { @class = "control-label col-md-5 wheat" })
                <div class="col-md-7">
                    @Html.TextBox("PaymentAmount", null, htmlAttributes: new { @class = "form-control", id = "pmtAmt" })
                    @Html.ValidationMessageFor(model => model.PaymentAmount, "", new { @class = "text-danger" })
                </div>
            </div>
    
            <div class="form-group">
                @Html.LabelFor(model => model.Balance, htmlAttributes: new { @class = "control-label col-md-5 wheat" })
                <div class="col-md-7">
                    @Html.TextBox("Balance", null, htmlAttributes: new { @class = "form-control", id = "balance" })
                    @Html.ValidationMessageFor(model => model.Balance, "", new { @class = "text-danger" })
                </div>
            </div>
    
            <div class="form-group">
                <label class="control-label col-md-6">
                    @Html.ActionLink("Loans Payments", "Index", null, htmlAttributes: new { @class = "wal-lead" })
                </label>
                <div class="col-md-6">
                    <input type="submit" value="Create Loan Payment" class="btn btn-warning" />
                </div>
            </div>
        </div>
    }
    
    @section Scripts {
        @Scripts.Render("~/bundles/jqueryval")
    }
    
    @Scripts.Render("~/bundles/jquery")
    
    <script type="text/javascript">
        $(document).ready(function () {
            $("#emplId").blur(function (event) {
                $.ajax({
                    method: "GET",
                    dataType: "json",
                    url: "/api/Employees/" + $("#emplId").val(),
                    success: function (data) {
                        $("#employeeIdentification").text(data.Identification);
                    }
                });
            }); // Employee id Lost Focus
    
            $("#loanId").blur(function (event) {
                $.ajax({
                    method: "GET",
                    dataType: "json",
                    url: "/api/LoanContracts/" + $("#loanId").val(),
                    success: function (data) {
                        $("#loanDetails").text(data.Identification);
                    }
                });
            }); // Loan Contract Id Lost Focus
        });
    </script>
  18. In the Solution Explorer, under Views and under Payments, double-click Delete.cshtml
  19. Change the document as follows:
    @model WattsALoan1.Models.Payment
    
    @{
        ViewBag.Title = "Delete Payment";
    }
    
    <h2 class="bold common-font text-center wheat">Delete Payment</h2>
    
    <hr />
    
    <h3 class="common-font wheat text-center">Are you sure you want to cancel this loan payment?</h3>
    
    <div class="containment">
        <dl class="dl-horizontal common-font wheat">
            <dt>@Html.DisplayNameFor(model => model.PaymentId)</dt>
            <dd>@Html.DisplayFor(model => model.PaymentId)</dd>
            <dt>Processed By</dt>
            <dd>@Html.DisplayFor(model => model.Employee.Identification)</dd>
            <dt>Loan Details</dt>
            <dd>@Html.DisplayFor(model => model.LoanContract.Identification)</dd>
            <dt>@Html.DisplayNameFor(model => model.ReceiptNumber)</dt>
            <dd>@Html.DisplayFor(model => model.ReceiptNumber)</dd>
            <dt>@Html.DisplayNameFor(model => model.PaymentDate)</dt>
            <dd>@ViewData["PaymentDate"]</dd>
            <dt>@Html.DisplayNameFor(model => model.PaymentAmount)</dt>
            <dd>@Html.DisplayFor(model => model.PaymentAmount)</dd>
            <dt>@Html.DisplayNameFor(model => model.Balance)</dt>
            <dd>@Html.DisplayFor(model => model.Balance)</dd>
        </dl>
    
        @using (Html.BeginForm())
        {
            @Html.AntiForgeryToken()
    
            <div class="form-actions no-color">
                <input type="submit" value="Delete Loan Payment" class="btn btn-warning" /> |
                @Html.ActionLink("Loans Payments", "Index", null, htmlAttributes: new { @class = "wal-lead" })
            </div>
        }
    </div>
  20. In the Solution Explorer, under Views and under Payments, double-click Details.cshtml
  21. Change the webpage as follows:
    @model WattsALoan1.Models.Payment
    
    @{
        ViewBag.Title = "Payment Details";
    }
    
    <h2 class="bold text-center common-font wheat">Payment Details</h2>
    
    <hr />
    
    <div class="containment">
        <dl class="dl-horizontal common-font wheat">
            <dt>@Html.DisplayNameFor(model => model.PaymentId)</dt>
            <dd>@Html.DisplayFor(model => model.PaymentId)</dd>
    
            <dt>Processed By</dt>
            <dd>@Html.DisplayFor(model => model.Employee.Identification)</dd>
    
            <dt>Loan Details</dt>
            <dd>@Html.DisplayFor(model => model.LoanContract.Identification)</dd>
    
            <dt>@Html.DisplayNameFor(model => model.ReceiptNumber)</dt>
            <dd>@Html.DisplayFor(model => model.ReceiptNumber)</dd>
    
            <dt>@Html.DisplayNameFor(model => model.PaymentDate)</dt>
            <dd>@ViewData["PaymentDate"]</dd>
    
    
            <dt>@Html.DisplayNameFor(model => model.PaymentAmount)</dt>
            <dd>@Html.DisplayFor(model => model.PaymentAmount)</dd>
    
            <dt>@Html.DisplayNameFor(model => model.Balance)</dt>
            <dd>@Html.DisplayFor(model => model.Balance)</dd>
        </dl>
    </div>
    
    <p class="text-center">
        @Html.ActionLink("Edit this Loan Payment", "Edit", new { id = Model.PaymentId }, htmlAttributes: new { @class = "wal-lead" }) |
        @Html.ActionLink("Loans Payments", "Index", null, htmlAttributes: new { @class = "wal-lead" })
    </p>
  22. In the Solution Explorer, under Views and under Payments, double-click Edit.cshtml
  23. Transform the webform as follows:
    @model WattsALoan1.Models.Payment
    
    @{
        ViewBag.Title = "Edit/Update Loan Payment";
    }
    
    <h2 class="bold wheat common-font text-center">Edit/Update Loan Payment</h2>
    
    <hr />
    
    @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()
    
    <div class="form-horizontal common-font">
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.HiddenFor(model => model.PaymentId)
    
        <div class="form-group">
            @Html.LabelFor(model => model.ReceiptNumber, htmlAttributes: new { @class = "control-label col-md-5 wheat" })
            <div class="col-md-7">
                @Html.EditorFor(model => model.ReceiptNumber, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.ReceiptNumber, "", new { @class = "text-danger" })
            </div>
        </div>
    
        <div class="form-group">
            @Html.LabelFor(model => model.PaymentDate, htmlAttributes: new { @class = "control-label col-md-5 wheat" })
            <div class="col-md-7">
                @Html.EditorFor(model => model.PaymentDate, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.PaymentDate, "", new { @class = "text-danger" })
            </div>
        </div>
    
        <div class="form-group">
            @Html.LabelFor(model => model.EmployeeId, htmlAttributes: new { @class = "control-label col-md-5 wheat" })
            <div class="col-md-1">
                @Html.TextBox("EmployeeId", null, htmlAttributes: new { @class = "form-control", id = "emplId" })
                @Html.ValidationMessageFor(model => model.EmployeeId, "", new { @class = "text-danger" })
            </div>
            <div class="col-md-6">
                <span id="employeeIdentification" class="wheat"></span>
            </div>
        </div>
    
        <div class="form-group">
            @Html.LabelFor(model => model.LoanContractId, htmlAttributes: new { @class = "control-label col-md-5 wheat" })
            <div class="col-md-7">
                @Html.TextBox("LoanContractId", null, htmlAttributes: new { @class = "form-control", id = "loanId" })
                @Html.ValidationMessageFor(model => model.LoanContractId, "", new { @class = "text-danger" })
            </div>
        </div>
    
        <div class="form-group">
            <label class="control-label col-md-5 wheat"></label>
            <div class="col-md-7">
                <span id="loanDetails" class="form-control"></span>
                @Html.ValidationMessageFor(model => model.LoanContractId, "", new { @class = "text-danger" })
            </div>
        </div>
    
        <div class="form-group">
            @Html.LabelFor(model => model.PaymentAmount, htmlAttributes: new { @class = "control-label col-md-5 wheat" })
            <div class="col-md-7">
                @Html.EditorFor(model => model.PaymentAmount, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.PaymentAmount, "", new { @class = "text-danger" })
            </div>
        </div>
    
        <div class="form-group">
            @Html.LabelFor(model => model.Balance, htmlAttributes: new { @class = "control-label col-md-5 wheat" })
            <div class="col-md-7">
                @Html.EditorFor(model => model.Balance, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Balance, "", new { @class = "text-danger" })
            </div>
        </div>
    
        <div class="form-group">
            <label class="control-label col-md-6">
                @Html.ActionLink("Loans Payments", "Index", null, htmlAttributes: new { @class = "wal-lead" })
            </label>
            <div class="col-md-6">
                <input type="submit" value="Update this Loan Payment" class="btn btn-warning" />
            </div>
        </div>
    </div>
    }
    
    @section Scripts {
        @Scripts.Render("~/bundles/jqueryval")
    }
    
    @Scripts.Render("~/bundles/jquery")
    
    <script type="text/javascript">
        $(document).ready(function () {
            $.ajax({
                method: "GET",
                dataType: "json",
                url: "/api/Employees/" + $("#emplId").val(),
                success: function (data) {
                    $("#employeeIdentification").text(data.Identification);
                }
            });
    
            $.ajax({
                method: "GET",
                dataType: "json",
                url: "/api/LoanContracts/" + $("#loanId").val(),
                success: function (data) {
                    $("#loanDetails").text(data.Identification);
                }
            });
    
            $("#emplId").blur(function (event) {
                $.ajax({
                method: "GET",
                dataType: "json",
                url: "/api/Employees/" + $("#emplId").val(),
                success: function (data) {
                    $("#employeeIdentification").text(data.Identification);
                }
                });
            }); // Employee id Lost Focus
    
            $("#loanId").blur(function (event) {
                $.ajax({
                    method: "GET",
                    dataType: "json",
                    url: "/api/LoanContracts/" + $("#loanId").val(),
                    success: function (data) {
                        $("#loanDetails").text(data.Identification);
                    }
                });
            }); // Loan Contract Id Lost Focus
        });
    </script>
  24. In the Solution Explorer, under Views, expand Shared and double-click _Layout.cshtml
  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>Watts' A Loan :: @ViewBag.Title</title>
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
    </head>
    <body>
        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container top-menu-holder">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    @Html.ActionLink("Watts' A Loan", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li>@Html.ActionLink("Employees", "Index", "Employees")</li>
                        <li>@Html.ActionLink("Loans Contracts", "Index", "LoanContracts")</li>
                        <li>@Html.ActionLink("Payments", "Index", "Payments")</li>
                        <li>@Html.ActionLink("About Watts' A Loan", "About", "Home")</li>
                        <li>@Html.ActionLink("Contact Us", "Contact", "Home")</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="container body-content">
            @RenderBody()
            <hr />
            <footer>
                <p class="text-center common-font wheat">&copy; @DateTime.Now.Year - Watts' A Loan</p>
            </footer>
        </div>
    
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/bootstrap")
        @RenderSection("scripts", required: false)
    </body>
    </html>
  26. In the Solution Explorer, under Views, expand Home and double-click Index.cshtml
  27. Change the document as follows:
    @{
        ViewBag.Title = "Home Page";
    }
    
    <div class="jumbotron">
        <h1 class="text-center">Watts' A Loan</h1>
        <p class="text-center">
            <img src="~/Images/wal1.png" alt="Watts A Loan" width="650" height="200" />
        </p>
    </div>
    
    <hr />
    
    <div class="row">
        <div class="col-md-9">
            <dic class="row">
                <div class="col-md-2">
                    <img src="~/Images/wal2.png" alt="Watts A Loan - Personal Loans" width="100" height="71" class="bordered" />
                </div>
                <div class="col-md-10 common-font">
                    <h4 class="wheat">Personal Loans</h4>
                    <p class="regular-text">Our most popular program is for personal loans, usually as cash, delivered directly from our office. The application process is very fast and easy. To start, access our loan application.</p>
                </div>
            </dic>
    
            <hr color="white" />
            <dic class="row">
                <div class="col-md-6">
                    <div class="row">
                        <div class="col-md-4">
                            <img src="~/Images/wal3.png" alt="Watts A Loan - Furniture Loans" width="100" height="75" class="bordered" />
                        </div>
                        <div class="col-md-8 common-font">
                            <h4 class="wheat">Furniture Loans</h4>
                            <p class="regular-text">Another one of our popular loan program is to assist customers in buying furniture.</p>
                        </div>
                    </div>
                </div>
    
                <div class="col-md-6">
                    <div class="row">
                        <div class="col-md-4">
                            <img src="~/Images/wal4.png" alt="Watts A Loan - Car Financing" width="100" height="75" class="bordered" />
                        </div>
                        <div class="col-md-8 common-font">
                            <h4 class="wheat">Car Financing</h4>
                            <p class="regular-text">Another one of our popular loan program is to assist customers in buying furniture.</p>
                        </div>
                    </div>
                </div>
            </dic>
        </div>
        <div class="col-md-3">
            <div class="menu-box">
                <ul>
                    <li>Loan Application</li>
                    <li>Loam Process</li>
                    <li>Types of Loans</li>
                    <li>Financial Aid</li>
                    <li>Students Concerns</li>
                    <li>Car Financing</li>
                    <li>Musical Instruments</li>
                    <li>Small Business Loan</li>
                    <li>Documentation</li>
                    <li>Newsletters</li>
                </ul>
            </div>
        </div>
    </div>
  28. To execute, on the main menu, click Debug -> Start Without Debugging

    Creating and Using Virtual Members

  29. Click the Employees link
  30. In the webpage, click Hire New Employee

    Joins Fundamentals

  31. Create the following records:
     
    Employee # First Name Last Name Employment Title
    293-747 Catherine Watts Owner - General Manager
    836-486 Thomas Felton Accounts Representative
    492-947 Caroline Wernick Assistant Manager
    240-750 Catherine Donato Accounts Representative
    804-685 Melissa Browns Customer Accounts Representative
    429-374 Denise Leighton Accounts Manager
    INSERT Employees
    VALUES(N'293-747', N'Catherine', N'Watts',    N'Owner'),
          (N'836-486', N'Thomas',    N'Felton',   N'Accounts Representative'),
          (N'492-947', N'Caroline',  N'Wernick',  N'Assistant Manager'),
          (N'240-750', N'Catherine', N'Donato',   N'Accounts Representative'),
          (N'804-685', N'Melissa',   N'Browns',   N'Customer Accounts Representative'),
          (N'429-374', N'Denise',    N'Leighton', N'Accounts Manager');
    GO

    Views Fundamentals

  32. Click the Loans Contracts link

    Views Fundamentals

  33. Click the Create Loan Contract link

    Views Fundamentals

    Views Fundamentals

  34. In the text boxes, enter the following values:

    Date Allocated Processed By First Name Last Name Loan Type Loan Amount Interest Rate Periods Monthly Payment Future Value Interest Amount Payment Start Date
    01/18/2019 6 Joanne Kennan Personal Loan 2500 14.65 36 99.97 3598.92 1098.92 02/01/2019
    01/22/2019 3 Stephanie Haller Boat Financing 16500 12.25 60 443.44 26606.40 10106.40 03/01/2019
    03/12/2019 6 Annette Vargas Furniture Purchase 2258.75 16.15 36 93.14 3353.11 1094.36 05/01/2019
    03/12/2019 2 Gérard Maloney Car Financing 22748 10.25 60 573.44 34406.40 11658.40 05-01-2019

    Views Fundamentals

  35. Click the Payments link

    Views Fundamentals

  36. Click New Payment

    Views Fundamentals

    Views Fundamentals

  37. In the text boxes, enter the following values:

    Loan Contract ID Payment Date Processed By Payment Amount Balance
    1 03/03/2019 6 99.97 3498.95
    2 03/30/2019 3 443.44 26162.96
    2 04/30/2019 2 443.44 25719.52
    4 05/22/2019 2 573.44 33832.96
    3 05/28/2019 6 93.14 3259.97
    2 05/30/2019 6 443.44 25276.08
    4 05/31/2019 3 573.44 33259.52
    1 06/10/2019 4 199.94 3299.01
    3 06/30/2019 4 93.14 3166.83
    1 07/02/2019 6 99.97 3199.04
    1 07/31/2019 2 99.97 3099.07

    Views Fundamentals

  38. Close the browser and return to your programming environment
  39. Close your programming environment

Home Copyright © 2017-2019, FunctionX Home