ASP.NET MVC With jQuery - Traffic Tickets System

An Application for Traffic Tickets

Introduction

Practical Learning: Introducing the Application

Start Microsoft Visual Studio
In the Visual Studio 2022 dialog box, click Create a New Project
In the languages combo box, select C#.
In the list of projects templates, click ASP.NET Web Application (.NET Framework)
Click Next
Change the project Name to TrafficTicketsSystem2.
Access or change the contents of the Location text box.
In the Framework combo box, select the highest (.NET Framework 4.8)
Click Create
In the Create a New ASP.NET Web Application dialog box, click the Web API icon
Click Create
In the Solution Explorer, right-click TrafficTicketsSystem1 -> Add -> New Folder
Type Images

Copy and paste the following pictures to the Images folder:

In the Solution Explorer, right-click Content -> Add -> Style Sheet
Type TrafficSystem as the name of the file
Click OK

In the empty document, create the following styles:

.bg-maroon         { --bs-bg-opacity:  1;
                     background-color: maroon !important;                           }
.border-bottom     { border-bottom:    1px solid gray !important;                   }
.card              { border:           1px solid #404080;                           }
.marginer          { margin-left:      10px;
                     margin-right:     10px;                                        }
.shadow-md         { box-shadow:       0.65rem 0.65rem 0.65rem #808080 !important;  }
.nav-link          { color:            white;
                     font-family:      Georgia, Garamond, 'Times New Roman', serif; }
.nav-link:hover,
.nav-link:focus    { color:            yellow;                                      }
.nav-link.disabled { color:            black;                                       }
.common-font       { font-family:      Georgia, Garamond, 'Times New Roman', serif; }
.box-holder        { margin:           auto;
                     width:            450px;                                       }
.top-padding       { padding-top:      0.40em;                                      }
.col-md-36         { width:            36%;
                     flex:             0 0 auto;                                    }
.col-md-64         { width:            64%;
                     flex:             0 0 auto;                                    }
.col-md-32         { width:            32%;
                     flex:             0 0 auto;                                    }
.tts-nav           { color:            blue;
                     text-decoration:  none;
                     font-family:      Georgia, Garamond, 'Times New Roman', serif; }
.tts-nav:link      { color:            blue;                                        }
.tts-nav:visited   { color:            tomato;                                      }
.tts-nav:active    { color:            #A8C3CE;                                     }
.tts-nav:hover     { color:            maroon;                                      }

In the Solution Explorer, under Views, expand Shared and click _Layout.cshtml

Change the document as follows:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title - Traffic Tickets System</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-dark bg-maroon">
        <div class="container">
            @Html.ActionLink("Traffic Tickets System", "Index", "Home", new { area = "" }, new { @class = "navbar-brand common-font" })
            <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" title="Toggle navigation" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse d-sm-inline-flex justify-content-between">
                <ul class="navbar-nav flex-grow-1">
                    <li>@Html.ActionLink("Traffic Violations", "Index", "Traffic Violations", new { area = "" }, new { @class = "nav-link" })</li>
                    <li>@Html.ActionLink("Cameras",          "Index", "Camera", new { area = "" }, new { @class = "nav-link" })</li>
                    <li>@Html.ActionLink("Drivers",          "Index", "Driver", new { area = "" }, new { @class = "nav-link" })</li>
                    <li>@Html.ActionLink("Vehicles",         "Index", "Vehicle", new { area = "" }, new { @class = "nav-link" })</li>
                    <li>@Html.ActionLink("Violations Types", "Index", "ViolationsTypes", new { area = "" }, new { @class = "nav-link" })</li>
                    <li>@Html.ActionLink("API",              "Index", "Help", new { area = "" }, new { @class = "nav-link" })</li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p class="text-center common-font">&copy; 2011-@DateTime.Now.Year - Traffic Tickets System</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

In the Solution Explorer, under Views, expand Home and double-click Index.cshtml

Change the document as follows:

<main>
    <section class="row">
        <h1 class="text-center fw-bold text-capitalize common-font">Traffic Tickets System</h1>
        <p class="lead text-center common-font">The Solomon County Police Department is a division of the Solomon County government. This department is proud to insure the safety, security, and wellbeing of both our citizens and our visitors.</p>
    </section>
    <hr />
    <div class="row common-font">
        <section class="col-md-4" aria-labelledby="government">
            <div class="card shadow-md">
                <p><img src="~/Images/Government.png" style="width: 100%; height: 225px;" /></p>
                <h2 class="fw-bold text-capitalize border-bottom marginer">government</h2>
                <p class="marginer">Citizens and visitors can get more information about the available services and duties.</p>
            </div>
        </section>
        <section class="col-md-4" aria-labelledby="communityServices">
            <div class="card shadow-md">
                <p><img src="~/Images/Community.png" style="width: 100%; height: 225px;" /></p>
                <h2 class="fw-bold text-capitalize border-bottom marginer">community services</h2>
                <p class="marginer">Here you can find more information about public parks (recreatiional parks, etc).</p>
            </div>
        </section>
        <section class="col-md-4" aria-labelledby="publicInformation">
            <div class="card shadow-md">
                <p><img src="~/Images/Relations.png" style="width: 100%; height: 225px;" /></p>
                <h2 class="fw-bold text-capitalize border-bottom marginer">public information</h2>
                <p class="marginer">Here is information about our activities, how we operate, and our future projects.</p>
            </div>
        </section>
    </div>
</main>

Creating a Database

Our Traffic Tickets System application needs a database. We will create it as a Microsoft SQL Server database. To use it in jQuery, we will use the Entity Framework to take advantage of the Web API.

Practical Learning: Creating a Database

To create a local database, in the Solution Explorer of Microsoft Visual Studio, right-click App_Data -> Add -> New Item...
In the middle frame of the Add New Item dialog box, click SQL Server Database.
Change the Name to TrafficTicketsSystem1
Click Add
In the Solution Explorer, under App_Data, right-click TrafficTicketsSystem1 and click Open
In the Server Explorer, right-click TrafficTicketsSystem1 and click New Query

Type the following code:

CREATE TABLE Cameras
(
    CameraId               INT IDENTITY(1, 1),
    CameraNumber           NVARCHAR(20),
    Make                   NVARCHAR(40),
    Model                  NVARCHAR(40),
    [Location]             NVARCHAR(120),
    CONSTRAINT PK_Cameras PRIMARY KEY(CameraId)
);
GO

CREATE TABLE Drivers
(
    DriverId               INT IDENTITY(1, 1),
    DrvLicNumber           NVARCHAR(20),
    FirstName              NVARCHAR(25),
    LastName               NVARCHAR(25),
    [Address]              NVARCHAR(120),
    City                   NVARCHAR(50),
    County                 NVARCHAR(50),
    [State]                NVARCHAR(40),
    ZIPCode                NVARCHAR(50),
    CONSTRAINT PK_Drivers PRIMARY KEY(DriverId)
);
GO

CREATE TABLE Vehicles
(
    VehicleId              INT IDENTITY(1, 1),
    TagNumber              NVARCHAR(20),
    DrvLicNumber           NVARCHAR(20),
    Make                   NVARCHAR(40),
    Model                  NVARCHAR(40),
    VehicleYear            NVARCHAR(5),
    Color                  NVARCHAR(32),
    CONSTRAINT PK_Vehicles PRIMARY KEY (VehicleId)
)
GO

CREATE TABLE ViolationTypes
(
    ViolationTypeId        INT IDENTITY(1, 1),
    ViolationName          NVARCHAR(30),
    [Description]          NVARCHAR(max),
    CONSTRAINT PK_ViolationsTypes PRIMARY KEY(ViolationTypeId)
);
GO

CREATE TABLE TrafficViolations
(
    TrafficViolationId     INT IDENTITY(1, 1),
    TrafficViolationNumber NVARCHAR(12),
    CameraNumber           NVARCHAR(20),
    TagNumber              NVARCHAR(20),
    ViolationName          NVARCHAR(30),
    ViolationDate          NVARCHAR(40),
    ViolationTime          NVARCHAR(40),
    PhotoAvailable         NVARCHAR(10),
    VideoAvailable         NVARCHAR(10),
    PaymentDueDate         NVARCHAR(40),
    PaymentDate            NVARCHAR(40),
    PaymentAmount          NVARCHAR(10),
    PaymentStatus          NVARCHAR(25),
    CONSTRAINT PK_Violations PRIMARY KEY(TrafficViolationId)
);
GO

To execute, on the SQL Editor toolbar, click the Execute button
Close the Query window
When asked whether you want to save, click No
In the Solution Explorer, right-click Models -> Add -> New Item...
In the left frame of the dialog box, click Data and, in the middle frame, click ADO.NET Entity Data Model
Change the name to TicketsManagementModel
Click Add
In the first page of the Entity Data Model Wizard, click Code First From Database
Click Next
In the second page of the Entity Data Model Wizard, click the arrow of the top combo box and select TrafficTicketsSystem1.mdf.
Make sure the bottom text box displays TicketsManagementModel
Click Next
In the third page of the Entity Data Model Wizard, click the Tables check box
Click Finish
On the main menu, click Debug -> Start Without Debugging:

An AngularJS Module

Practical Learning: Creating an AngularJS Module

In the Solution Explorer, right-click Scripts -> Add -> JavaScript File
Change the file name to TrafficSystem
Click OK
In the empty document, type the following line of code to create an AngularJS module:
```
var appTicketsSystem = angular.module("ticketsSystem", []);
```

Violations Types

A List of Violations Types

Different countries, different states, differents counties, and different jurisdictions have different laws or various views on what constitutes a traffic violation. To represent the categories of violations that a vehicle can comit, as seen above in our database, our application will provide the ability to display a list of types of traffic violation. For this exercise, our application will use just a sample list.

Practical Learning: Displaying Violations Types

In the Solution Explorer, right-click Controllers -> Add -> Controller...
In the left list of the Add New Scaffolded Item dialog box, click Web API
In the middle list, click Web API 2 Controller With Actions, Using Entity Framework
Click Add
Click the arrow of the Model Class combo box and select ViolationType (TrafficTicketsSystem1.Models)
Click the arrow of the Data Context Class combo box and select TicketsManagementModel (TrafficTicketsSystem1.Models)

Make sure the Controller Name text box is displaying ViolationTypesController:

Add Controller

Click Add:

using System.Data.Entity;
using System.Data.Entity.Infrastructure;
using System.Linq;
using System.Net;
using System.Web.Http;
using System.Web.Http.Description;
using TrafficTicketsSystem11.Models;

namespace TrafficTicketsSystem11.Controllers
{
    public class ViolationTypesController : ApiController
    {
        private TicketsManagementModel db = new TicketsManagementModel();

        // GET: api/ViolationTypes
        public IQueryable<ViolationType> GetViolationTypes()
        {
            return db.ViolationTypes;
        }

        // GET: api/ViolationTypes/5
        [ResponseType(typeof(ViolationType))]
        public IHttpActionResult GetViolationType(int id)
        {
            ViolationType violationType = db.ViolationTypes.Find(id);
            if (violationType == null)
            {
                return NotFound();
            }

            return Ok(violationType);
        }

        // PUT: api/ViolationTypes/5
        [ResponseType(typeof(void))]
        public IHttpActionResult PutViolationType(int id, ViolationType violationType)
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }

            if (id != violationType.ViolationTypeId)
            {
                return BadRequest();
            }

            db.Entry(violationType).State = EntityState.Modified;

            try
            {
                db.SaveChanges();
            }
            catch (DbUpdateConcurrencyException)
            {
                if (!ViolationTypeExists(id))
                {
                    return NotFound();
                }
                else
                {
                    throw;
                }
            }

            return StatusCode(HttpStatusCode.NoContent);
        }

        // POST: api/ViolationTypes
        [ResponseType(typeof(ViolationType))]
        public IHttpActionResult PostViolationType(ViolationType violationType)
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }

            db.ViolationTypes.Add(violationType);
            db.SaveChanges();

            return CreatedAtRoute("DefaultApi", new { id = violationType.ViolationTypeId }, violationType);
        }

        // DELETE: api/ViolationTypes/5
        [ResponseType(typeof(ViolationType))]
        public IHttpActionResult DeleteViolationType(int id)
        {
            ViolationType violationType = db.ViolationTypes.Find(id);
            if (violationType == null)
            {
                return NotFound();
            }

            db.ViolationTypes.Remove(violationType);
            db.SaveChanges();

            return Ok(violationType);
        }

        protected override void Dispose(bool disposing)
        {
            if (disposing)
            {
                db.Dispose();
            }
            base.Dispose(disposing);
        }

        private bool ViolationTypeExists(int id)
        {
            return db.ViolationTypes.Count(e => e.ViolationTypeId == id) > 0;
        }
    }
}

In the Solution Explorer, right-click Scripts -> Add -> JavaScript File
Change the file name to ViolationsTypes
Click OK
In the empty document, type the following line of code to create an AngularJS controller for the violations types:
In the Solution Explorer, expand App_Start and double-click BundleConfig.cs

Change the document as follows:

using System.Web.Optimization;

namespace TrafficTicketsSystem1
{
    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",
                        "~/Scripts/angular.js",
                        "~/Scripts/TrafficSystem.js",
                        "~/Scripts/ViolationsTypes.js"));

            // 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 Bundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.js"));

            bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/site.css",
                      "~/Content/TicketsSystem.css"));
        }
    }
}

Click the ViolationTypeController.cs tab
In the Solution Explorer, right-click Controllers -> Add -> Controller...
In the middle list of the Add New Scaffolded Item dialog box, click MVC 5 Controller With Read/Write Actions
Click Add
In the Controller Name text box of the Add Controller dialog box, replace Default with ViolationsTypes to get ViolationsTypesController
Click Add

In the Details(), the Edit(), and the Delete() methods, make the id argument nullable:

using System.Web.Mvc;

namespace TrafficTicketsSystem11.Controllers
{
    public class ViolationsTypesController : Controller
    {
        // GET: ViolationsTypes
        public ActionResult Index()
        {
            return View();
        }

        // GET: ViolationsTypes/Details/5
        public ActionResult Details(int? id)
        {
            return View();
        }

        // GET: ViolationsTypes/Create
        public ActionResult Create()
        {
            return View();
        }

        // POST: ViolationsTypes/Create
        [HttpPost]
        public ActionResult Create(FormCollection collection)
        {
            try
            {
                // TODO: Add insert logic here

                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }

        // GET: ViolationsTypes/Edit/5
        public ActionResult Edit(int? id)
        {
            return View();
        }

        // POST: ViolationsTypes/Edit/5
        [HttpPost]
        public ActionResult Edit(int? id, FormCollection collection)
        {
            try
            {
                // TODO: Add update logic here

                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }

        // GET: ViolationsTypes/Delete/5
        public ActionResult Delete(int? id)
        {
            return View();
        }

        // POST: ViolationsTypes/Delete/5
        [HttpPost]
        public ActionResult Delete(int id?, FormCollection collection)
        {
            try
            {
                // TODO: Add delete logic here

                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }
    }
}

In the ViolationsTypesController class, right-click Index() and click Add View...
In the Add New Scaffolded Item dialog box, make sure MVC 5 View is selected:
Click Add
In the Add View dialog box, make sure the View Name text box is displaying Index
Click Add
Change the document as follows:

Creating a Category of Violation

Various administrations treat traffic violations differently. They start by defining what a violation type is. In this section, we will create the objects that create and manage the types of violations.

Practical Learning: Creating Violations Types

Click the ViolationsTypes.js tab
In the document, add the following code to create a violation category:
Click the ViolationTypeController.cs tab
In the class, right-click one of the Create() methods and click Add View...
In the Add New Scaffolded Item dialog box, make sure MVC 5 View is selected:
Click Add
In the Add View dialog box, make sure the View Name text box is displaying Create
Click Add
Change the document as follows:
Click the ViolationTypeController.cs tab
To execute, on the main menu, click Debug -> Start Without Debugging
Click the Violation Types link:
Click New Violation Type:

Create some records using the following values:

Violation Name	Description
Unknown	The violation is not, or cannot be, defined.
Speed	The vehicle drove at a speed significantly above the speed limit. The laws in this state require that every non-emergency and non-utility vehicle drive at or below the posted speed limit (or at or below the default speed regulation where the speed is not clearly posted).
Stop Sign	The vehicle did not stop at the Stop sign. The law in the state indicates that every non-emergency vehicle must completely stop at every Stop sign, regardless of the presence or absence of incoming or adjacent vehicles.
Red Light Steady	A vehicle drives by the red light. The law in our state says that if a vehicle comes by a red light, the driver must stop to wait for the green light.
Red Light Flashing	The vehicle drove through a red light that was flashing (or blinking). The laws in this state require that if a vehicle comes to a flashing red light, whether it is at an intersection or not, the vehicle must first stop completely, the driver must observe around for pedestrians, animals, and other cars, and then proceed cautiously.
Low Light	The car was moving on a low light street.
Red Light Right Turn	The vehicle turned to the right without stopping. The laws in this state require that, when a vehicle reaches a traffic light and wants to make a right turn, if the light is red, regardless of any presence or not of another vehicle or pedestrian, the vehicle must first stop completely, wait a few seconds, and then make the right turn.

Return to your programming environment

Getting Information About a Category of Violation

Practical Learning: Getting a Violation Type

Click the ViolationsTypes.js tab
In the document, add the following code used to select a violation type:
Click the ViolationTypeController.cs tab
In the class, right-click Details() and click Add View...
In the Add New Scaffolded Item dialog box, make sure MVC 5 View is selected:
Click Add
Make sure the View Name text box is displaying Details
Click Add
Change the document as follows:
Click the ViolationsTypes.js tab
To execute, on the main menu, click Debug -> Start Without Debugging
Click the Violation Types link:
Click Details on Violation Type:
In the Violation Type Id text box, type 2
Click the Find Violation Type button:
Return to your programming environment

Updating Information About a Category of Violation

Practical Learning: Updating a Violation Type

In the document, add the following code used to update a violation type:
Click the ViolationTypeController.cs tab
In the ViolationTypeController.cs tab, right-click one of the Edit() methods and click Add View...
In the Add New Scaffolded Item dialog box, make sure MVC 5 View is selected:
Click Add
In the Add View dialog box, make sure the View Name text box is displaying Edit:
Click Add
Change the document as follows:
Click the ViolationTypeController.cs tab
To execute, on the main menu, click Debug -> Start Without Debugging
Click the Violation Types link:
Click Edit/Update Violation Type:
In the Violation Type Id text box, type 3
Click the Find Violation Type button:
Change the text of the large text area as follows:
The vehicle drove through a steady red light. The law in the state requires that when a vehicle approaches a steady red light, it must completely stop and wait for the light to change to green.
Click the Update Violation Type button:
Click OK on the message box:
Return to your programming environment

Deleting a Violation Type

For any reason, an administration may want to stop considering a certain category of violation. To help with this, our application will be equipped with a form that allows a user to delete a violation category.

Practical Learning: Deleting a Violation Type

Click the ViolationsTypes.js tab
In the document, add the following code used to delete a violation type:
In the ViolationTypeController.cs tab, right-click inside the Delete() method and click Add View...
In the Add New Scaffolded Item dialog box, make sure MVC 5 View is selected:
Click Add
In the Add View dialog box, make sure the View Name text box is displaying Delete:
Click Add

Change the document as follows:

@{
    ViewBag.Title = "Delete Violation Type";
}

<h2 class="text-center fw-bold common-font">Delete Violation Type</h2>

<hr />

<form name="frmDeleteViolationType" method="post">
    <div class="box-holder common-font">
        <div class="form-group row">
            <label for="violationTypeId" class="col-md-36 top-padding">Violation Type Id:</label>
            <div class="col-md-32"><input type="text" id="violationTypeId" class="form-control" /></div>
            <div class="col-md-32">
                <input type="button" id="btnGetViolationType" class="btn btn-primary" value="Get Violation Type" />
            </div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36">Volation Type:</label>
            <div class="col-md-64"><span id="vType"></span></div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36">Description:</label>
            <div class="col-md-64"><span id="describe"></span></div>
        </div>
    </div>

    <hr />

    <p class="text-center">
        <input type="button" name="btnDeleteViolationType"
               class="btn btn-primary" value="Delete Violation Type" />
    </p>
</form>

<hr />

<p class="text-center">
    @Html.ActionLink("Traffic Violations Types", "Index", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("New Violation Type", "Create", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("Description of a Violation Type", "Details", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("Edit/Update Violation Type", "Edit", null, htmlAttributes: new { @class = "tts-nav" })
</p>

@Scripts.Render("~/bundles/jquery")

<script type="text/javascript">
    $(document).ready(function () {
        $("#btnGetViolationType").on("click", function (event) {
            $.ajax({
                method: "GET",
                dataType: "json",
                url: "/api/ViolationTypes/" + $("#violationTypeId").val(),
                success: function (data) {
                    $("#violationTypeId").val(data.ViolationTypeId);
                    $("#vType").text(data.ViolationName);
                    $("#describe").text(data.Description);
                }
            });
        });

        $("input[value='Delete Violation Type']").on("click", function (event) {
            var car = {
                ViolationTypeId: $("#violationTypeId").val()
            };
            $.ajax({
                data: car,
                method: "DELETE",
                url: "/api/ViolationTypes/" + $("#violationTypeId").val(),
                success: function (data) {
                    alert("The violation type has been removed from our system.")

                    window.location.href = 'Index';
                }
            });
        });
    });
</script>

To execute, on the main menu, click Debug -> Start Without Debugging
Click the Violation Types link:
Click the Remove Violation Type link:
In the Violation Type Id text box, type 5
Click the Find Violation Type button:
Click the Delete Violation Type button:
Click OK on the message box:
Return to your programming environment

Cameras

A List of Cameras

Some violations are processed by a police officer. Some other violations are proved by a photo or a video taken by some cameras that are installed in some streets and areas of the administration. Our application will allow a user to see a list of cameras that are available and where they are installed.

Practical Learning: Displaying a List of Cameras

In the Solution Explorer, right-click Controllers -> Add -> New Scaffolded Item...
In the left list of the Add New Scaffolded Item dialog box, click Web API and, in the middle list, click Web API 2 Controller With Actions, Using Entity Framework
Click Add
In the Model Class combo box, select Camera (TrafficTicketsSystem1.Models)

Make sure the Data Context Class combo box is displaying TicketsManagementModel (TrafficTicketsSystem1.Models).
Make sure the Controller Name text box is displaying CamerasController:

Add Controller

Click Add:

using System.Data.Entity;
using System.Data.Entity.Infrastructure;
using System.Linq;
using System.Net;
using System.Web.Http;
using System.Web.Http.Description;
using TrafficTicketsSystem11.Models;

namespace TrafficTicketsSystem11.Controllers
{
    public class CamerasController : ApiController
    {
        private TicketsManagementModel db = new TicketsManagementModel();

        // GET: api/Cameras
        public IQueryable<Camera> GetCameras()
        {
            return db.Cameras;
        }

        // GET: api/Cameras/5
        [ResponseType(typeof(Camera))]
        public IHttpActionResult GetCamera(int id)
        {
            Camera camera = db.Cameras.Find(id);
            if (camera == null)
            {
                return NotFound();
            }

            return Ok(camera);
        }

        // PUT: api/Cameras/5
        [ResponseType(typeof(void))]
        public IHttpActionResult PutCamera(int id, Camera camera)
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }

            if (id != camera.CameraId)
            {
                return BadRequest();
            }

            db.Entry(camera).State = EntityState.Modified;

            try
            {
                db.SaveChanges();
            }
            catch (DbUpdateConcurrencyException)
            {
                if (!CameraExists(id))
                {
                    return NotFound();
                }
                else
                {
                    throw;
                }
            }

            return StatusCode(HttpStatusCode.NoContent);
        }

        // POST: api/Cameras
        [ResponseType(typeof(Camera))]
        public IHttpActionResult PostCamera(Camera camera)
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }

            db.Cameras.Add(camera);
            db.SaveChanges();

            return CreatedAtRoute("DefaultApi", new { id = camera.CameraId }, camera);
        }

        // DELETE: api/Cameras/5
        [ResponseType(typeof(Camera))]
        public IHttpActionResult DeleteCamera(int id)
        {
            Camera camera = db.Cameras.Find(id);
            if (camera == null)
            {
                return NotFound();
            }

            db.Cameras.Remove(camera);
            db.SaveChanges();

            return Ok(camera);
        }

        protected override void Dispose(bool disposing)
        {
            if (disposing)
            {
                db.Dispose();
            }
            base.Dispose(disposing);
        }

        private bool CameraExists(int id)
        {
            return db.Cameras.Count(e => e.CameraId == id) > 0;
        }
    }
}

In the Solution Explorer, right-click Controllers -> Add -> Controller...
In the middle list of the Add New Scaffolded Item dialog box, click MVC 5 Controller With Read/Write Actions:
Click Add
Replace Default with Camera to get CameraController
Click Add

In the Details(), the Edit(), and the Delete() methods, make the id argument nullable:

using System.Web.Mvc;

namespace TrafficTicketsSystem11.Controllers
{
    public class CameraController : Controller
    {
        // GET: Camera
        public ActionResult Index()
        {
            return View();
        }

        // GET: Camera/Details/5
        public ActionResult Details(int? id)
        {
            return View();
        }

        // GET: Camera/Create
        public ActionResult Create()
        {
            return View();
        }

        // POST: Camera/Create
        [HttpPost]
        public ActionResult Create(FormCollection collection)
        {
            try
            {
                // TODO: Add insert logic here

                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }

        // GET: Camera/Edit/5
        public ActionResult Edit(int? id)
        {
            return View();
        }

        // POST: Camera/Edit/5
        [HttpPost]
        public ActionResult Edit(int? id, FormCollection collection)
        {
            try
            {
                // TODO: Add update logic here

                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }

        // GET: Camera/Delete/5
        public ActionResult Delete(int? id)
        {
            return View();
        }

        // POST: Camera/Delete/5
        [HttpPost]
        public ActionResult Delete(int? id, FormCollection collection)
        {
            try
            {
                // TODO: Add delete logic here

                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }
    }
}

In the CameraController class, right-click Index() and click Add View...
In the Add New Scaffolded Item dialog box, make sure MVC 5 View is selected:
Click Add
In the Add View dialog box, make sure the View Name text box is displaying Index
Click Add

Change the webpage as follows:

@{
    ViewBag.Title = "Traffic Cameras";
}

<h2 class="text-center fw-bold common-font">Traffic Cameras</h2>

<table class="table table-striped common-font">
    <tr>
        <th class="fw-bold text-center">Camera Id</th>
        <th class="fw-bold">Camera #</th>
        <th class="fw-bold">Make</th>
        <th class="fw-bold">Model</th>
        <th class="fw-bold">Location</th>
    </tr>
</table>

<hr />

<p class="text-center">
    @Html.ActionLink("New Traffic Camera", "Create", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("Traffic Camera Details", "Details", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("Edit/Update Camera Information", "Edit", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("Remove Traffic Camera", "Delete", null, htmlAttributes: new { @class = "tts-nav" })
</p>

@Scripts.Render("~/bundles/jquery")

<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            url:      "/api/Cameras",
            method:   "GET",
            dataType: "json",
            success:  function (data) {
                $.each(data, function (index, camera) {
                    $("table").append("<tr>" +
                        "<td class='text-center'>" + camera["CameraId"] + "</td>" +
                        "<td>" + camera["CameraNumber"] + "</td>" +
                        "<td>" + camera["Make"] + "</td>" +
                        "<td>" + camera["Model"] + "</td>" +
                        "<td>" + camera["Location"] + "</td></tr>");
                });
            }
        });
    });
</script>

Click CameraController.cs tab

Setting Up a Camera

When some type of violation occurs, an installed camera would take a photo or shoot a video. Of course, the camera has to be physically installed on a street. Then, the information about the camera has to be entered into the application. To help with this, we will create a form that can assist a user.

Practical Learning: Setting Up a Camera

In the CameraController class, right-click inside one of the Create() methods -> Add View...
In the Add New Scaffolded Item dialog box, make sure MVC 5 View is selected:
Click Add
In the Add View dialog box, make sure the View Name text box is displaying Create
Click Add

Create the form as follows:

@{
    ViewBag.Title = "Traffic Camera";
}

<h2 class="text-center fw-bold common-font">New Traffic Camera</h2>

<hr />

<form name="frmCreateTrafficCamera" method="post">
    <div class="box-holder common-font">
        <div class="form-group row">
            <label for="cameraNumber" class="col-md-3 top-padding">Camera #:</label>
            <div class="col-md-9"><input type="text" id="cameraNumber" class="form-control" /></div>
        </div>

        <hr />

        <div class="form-group row">
            <label for="make" class="col-md-3 top-padding">Make:</label>
            <div class="col-md-9"><input type="text" id="make" class="form-control" /></div>
        </div>

        <hr />

        <div class="form-group row">
            <label for="model" class="col-md-3 top-padding">Model:</label>
            <div class="col-md-9"><input type="text" id="model" class="form-control" /></div>
        </div>

        <hr />

        <div class="form-group row">
            <label for="location" class="col-md-3 top-padding">Location:</label>
            <div class="col-md-9"><input type="text" id="location" class="form-control" /></div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-3">&nbsp;</label>
            <div class="col-md-9 text-center">
                <input type="button" id="btnCreateRecord"
                       class="btn btn-primary" value="Create Traffic Camera" />
            </div>
        </div>
    </div>
</form>

<hr />

<p class="text-center">
    @Html.ActionLink("Traffic Cameras", "Index", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("Traffic Camera Details", "Details", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("Edit/Update Camera Information", "Edit", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("Remove Traffic Camera", "Delete", null, htmlAttributes: new { @class = "tts-nav" })
</p>

@Scripts.Render("~/bundles/jquery")

<script type="text/javascript">
    $(document).ready(function () {
        $("#btnCreateRecord").click(function () {
            var camera = {
                CameraNumber: $("#cameraNumber").val(),
                Make:         $("#make").val(),
                Model:        $("#model").val(),
                Location:     $("#location").val()
            };

            $.ajax({
                url:          "/api/Cameras",
                method:       "POST",
                data:         camera,
                success: function (data) {
                    alert("The record has been created and saved.");

                    window.location.href = 'Index';
                }
            });
        });
    });
</script>

Click the CameraController.cs tab
To execute, on the main menu, click Debug -> Start Without Debugging
Click the Cameras link:
In the webpage, click New Traffic Camera link:

Create the following records:

Camera #	Make	Model	Location
DGH-38460	Ashton Digital	MPH-6000	Eastern Ave and Asbur Drv
ELQ-79284	Seaside world	BL5	Monroe Str and Westview Rd
MSR-59575	Ashton Digital	MPH-6202	Concordia Blvd and Sunset Way
29417DHT	Wood Sons	NG20	Temple Ave and Barclay Rd
AHR-41518	Igawa Worldwide	442i	Eucharist Ave
WVW-59595	Alley Tech	PP-0202	Sunset Street and Warry Street
987HTR	World Ashton	366d	Monroe Str at Moon Spr
485W070	Igawa International	448H	Sleepy Hallow Av and Sth Anderson Str

Return to your programming environment

Getting the Details of a Camera

Some time to time, a user may want to get the information about a camera. To help the user with this, our application will use a form.

Practical Learning: Getting the Details of a Camera

In the class, right-click Details() -> Add View...
In the Add New Scaffolded Item dialog box, make sure MVC 5 View is selected:
Click Add
In the Add View dialog box, make sure the View Name text box is displaying Details
Click Add

Change the document as follows:

@{
    ViewBag.Title = "Traffic Camera Details";
}

<h2 class="text-center fw-bold common-font">Traffic Camera Details</h2>

<hr />

<form name="frmDetailsTrafficCamera" method="post">
    <div class="box-holder common-font">
        <div class="form-group row">
            <label for="cameraId" class="col-md-36 top-padding">Camera Id:</label>
            <div class="col-md-32"><input type="text" id="cameraId" class="form-control" /></div>
            <div class="col-md-32">
                <input type="button" id="btnFindRecord" class="btn btn-primary" value="Find Camera" />
            </div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36 top-padding">Camera #:</label>
            <div class="col-md-64"><span id="cameraNumber" class="form-control"></span></div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36 top-padding">Make:</label>
            <div class="col-md-64"><span id="make" class="form-control"></span></div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36 top-padding">Model:</label>
            <div class="col-md-64"><span id="model" class="form-control"></span></div>
        </div>

        <hr />

        <div class="form-group row top-padding">
            <label class="col-md-36">Location:</label>
            <div class="col-md-64"><span id="location" class="form-control"></span></div>
        </div>
    </div>
</form>

<hr />

<p class="text-center">
    @Html.ActionLink("Traffic Cameras", "Index", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("New Traffic Camera", "Create", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("Edit/Update Camera Information", "Edit", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("Remove Traffic Camera", "Delete", null, htmlAttributes: new { @class = "tts-nav" })
</p>

@Scripts.Render("~/bundles/jquery")

<script type="text/javascript">
    $(document).ready(function () {
        $("#btnFindRecord").click(function (event) {
            $.ajax({
                url:      "/api/Cameras/" + $("#cameraId").val(),
                method:   "GET",
                dataType: "json",
                success: function (data) {
                    $("#cameraId").val(data.CameraId);
                    $("#cameraNumber").text(data.CameraNumber);
                    $("#make").text(data.Make);
                    $("#model").text(data.Model);
                    $("#location").text(data.Location);
                }
            });
        });
    });
</script>

Click the CameraController.cs tab
To execute, on the main menu, click Debug -> Start Without Debugging
Click the Cameras link:
Click the Traffic Camera Details link:
In the Camera Id text box, type 4
Click the Find Camera button:
Return to your programming environment

Updating the Information of a Camera

Some time to time, the information about a camera is changed. To help the user with this, our application will include a webform that allows a user to view and update any detail of an installed camera.

Practical Learning: Updating the Information of a Camera

In the CameraController class, right-click one of the Edit() methods -> Add View...
In the Add New Scaffolded Item dialog box, make sure MVC 5 View is selected:
Click Add
In the Add View dialog box, make sure the View Name text box is displaying Edit:
Click Add

Change the document as follows:

@{
    ViewBag.Title = "Edit Camera";
}

<h2 class="text-center fw-bold common-font">Edit/Update Camera Information</h2>

<hr />

<form name="frmEditTrafficCamera" method="post">
    <div class="box-holder common-font">
        <div class="form-group row">
            <label for="cameraId" class="col-md-36 top-padding">Camera Id:</label>
            <div class="col-md-32"><input type="text" id="cameraId" class="form-control" /></div>
            <div class="col-md-32">
                <input type="button" id="btnFindRecord" class="btn btn-primary" value="Find Camera" />
            </div>
        </div>

        <hr />

        <div class="form-group row">
            <label for="cameraNumber" class="col-md-36 top-padding">Camera #:</label>
            <div class="col-md-64"><input type="text" id="cameraNumber" class="form-control" /></div>
        </div>

        <hr />

        <div class="form-group row">
            <label for="make" class="col-md-36 top-padding">Make:</label>
            <div class="col-md-64"><input type="text" id="make" class="form-control" /></div>
        </div>

        <hr />

        <div class="form-group row">
            <label for="model" class="col-md-36 top-padding">Model:</label>
            <div class="col-md-64"><input type="text" id="model" class="form-control" /></div>
        </div>

        <hr />

        <div class="form-group row">
            <label for="location" class="col-md-36 top-padding">Location:</label>
            <div class="col-md-64"><input type="text" id="location" class="form-control" /></div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36">&nbsp;</label>
            <div class="col-md-64">
                <input type="button" id="btnUpdateRecord" class="btn btn-primary" value="Update Camera Details" />
            </div>
        </div>
    </div>
</form>

<hr />

<p class="text-center">
    @Html.ActionLink("Traffic Cameras", "Index", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("New Traffic Camera", "Create", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("Traffic Camera Details", "Details", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("Remove Traffic Camera", "Delete", null, htmlAttributes: new { @class = "tts-nav" })
</p>

@Scripts.Render("~/bundles/jquery")

<script type="text/javascript">
    $(document).ready(function () {
        $("#btnFindRecord").click(function (event) {
            $.ajax({
                url:          "/api/Cameras/" + $("#cameraId").val(),
                method:       "GET",
                dataType:     "json",
                success: function (data) {
                    $("#cameraNumber").val(data.CameraNumber);
                    $("#make").val(data.Make);
                    $("#model").val(data.Model);
                    $("#location").val(data.Location);
                }
            });
        });

        $("#btnUpdateRecord").click(function (event) {
            var camera = {
                CameraID:     $("#cameraId").val(),
                CameraNumber: $("#cameraNumber").val(),
                Make:         $("#make").val(),
                Model:        $("#model").val(),
                Location:     $("#location").val()
            };
            $.ajax({
                url:          "/api/Cameras/" + $("#cameraId").val(),
                method:       "PUT",
                data:         camera,
                success: function (data) {
                    alert("The traffic camera data has been updated and saved.")

                    window.location.href = 'Index';
                }
            });
        });
    });
</script>

Click the CameraController.cs tab
To execute, on the main menu, click Debug -> Start Without Debugging
Click the Cameras link:
Click the Edit/Update Camera Information link:

Change the information of the cameras as follows:

Camera Id	Camera #	Make	Model	Location
1	No change	No change	No change	Eastern Avenue and Ashburry Drive
2	No change	Seaside International	BL-5000	Monrovia Street and Westview Road
4	DHT-29417	Woodson and Sons	NG-202	Temple Avenue and Barclay Road
5	No change	No change	No change	Eucharistus Avenue
7	HTR-93847	Ashton Digital	No change	Monrovia Street at Moon Springs
8	No change	No change	No change	Sleepy Hollow Avenue and South Anderson Street

Return to your programming environment

Removing a Camera

If an installed camera becomes useless and/or unnecessary, it must be removed from the system. To assist the user with this, our application will include a form that allows a user to delete an application.

Practical Learning: Removing a Camera

In the CameraController class, right-click one of the Delete() methods and click Add View...
In the Add New Scaffolded Item dialog box, make sure MVC 5 View is selected:
Click Add
In the Add View dialog box, make sure the View Name text box is displaying Delete:
Click Add

Change the document as follows:

@{
    ViewBag.Title = "Delete Traffic Camera";
}

<h2 class="text-center fw-bold common-font">Traffic Camera Removal</h2>

<hr />

<form name="frmDeleteTrafficCamera" method="post">
    <div class="box-holder common-font">
        <div class="form-group row">
            <label for="cameraId" class="col-md-36 top-padding">Camera Id:</label>
            <div class="col-md-32"><input type="text" id="cameraId" class="form-control" /></div>
            <div class="col-md-32">
                <input type="button" id="btnFindRecord" class="btn btn-primary" value="Find Camera" />
            </div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36 top-padding">Camera #:</label>
            <div class="col-md-64"><span id="cameraNumber" class="form-control"></span></div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36 top-padding">Make:</label>
            <div class="col-md-64"><span id="make" class="form-control"></span></div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36 top-padding">Model:</label>
            <div class="col-md-64"><span id="model" class="form-control"></span></div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36 top-padding">Location:</label>
            <div class="col-md-64"><span id="location" class="form-control"></span></div>
        </div>
    </div>

    <hr />

    <p class="text-center">
        <input type="button" id="btnDeleteRecord" class="btn btn-primary" value="Remove Traffic Camera" />
    </p>
</form>

<hr />

<p class="text-center">
    @Html.ActionLink("Traffic Cameras", "Index", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("New Traffic Camera", "Create", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("Traffic Camera Details", "Details", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("Edit/Update Camera Information", "Edit", null, htmlAttributes: new { @class = "tts-nav" })
</p>

@Scripts.Render("~/bundles/jquery")

<script type="text/javascript">
    $(document).ready(function () {
        $("#btnFindRecord").click(function (event) {
            $.ajax({
                url:          "/api/Cameras/" + $("#cameraId").val(),
                method:       "GET",
                dataType:     "json",
                success: function (data) {
                    $("#cameraId").val(data.CameraId);
                    $("#cameraNumber").text(data.CameraNumber);
                    $("#make").text(data.Make);
                    $("#model").text(data.Model);
                    $("#location").text(data.Location);
                }
            });
        });

        $("#btnDeleteRecord").click(function (event) {
            var camera = {
                CameraId:     $("#cameraId").val()
            };
            $.ajax({
                url:          "/api/Cameras/" + $("#cameraId").val(),
                method:       "DELETE",
                data:         camera,
                success: function (data) {
                    alert("The traffic camera record has been removed.")

                    window.location.href = 'Index';
                }
            });
        });
    });
</script>

To execute, on the main menu, click Debug -> Start Without Debugging
Click the Traffic Cameras link:
Click the Remove Traffic Camera link:
In the Camera Id text box, type 6
Click the Find Camera button:
Click the Remove Traffic Camera button:
Click OK on the message box:
Return to your programming environment

Vehicles Drivers

A List of Vehicles Drivers

Infractions are committed by people who drive cars. Normally each driver must possess a driver's license. Those licenses are issued and managed by a state government. For our simple application, we will create the drivers licenses of the drivers of our application.

Practical Learning: Displaying a List of Drivers

In the Solution Explorer, right-click TrafficControllers -> Add -> New Scaffolded Item...
In the middle list of the Add New Scaffolded Item dialog box, make sure Web API 2 Controller With Actions, Using Entity Framework is selected (or click it):
Click Add
In the Model Class combo box, select Driver (TrafficTicketsSystem1.Models)

Make sure the Data Context Class combo box is displaying TicketsManagementModel (TrafficTicketsSystem1.Models).
Make sure the Controller Name text box displays DriversController:

Add Controller

Click Add:

using System.Data.Entity;
using System.Data.Entity.Infrastructure;
using System.Linq;
using System.Net;
using System.Web.Http;
using System.Web.Http.Description;
using TrafficTicketsSystem11.Models;

namespace TrafficTicketsSystem11.Controllers
{
    public class DriversController : ApiController
    {
        private TicketsManagementModel db = new TicketsManagementModel();

        // GET: api/Drivers
        public IQueryable<Driver> GetDrivers()
        {
            return db.Drivers;
        }

        // GET: api/Drivers/5
        [ResponseType(typeof(Driver))]
        public IHttpActionResult GetDriver(int id)
        {
            Driver driver = db.Drivers.Find(id);
            if (driver == null)
            {
                return NotFound();
            }

            return Ok(driver);
        }

        // PUT: api/Drivers/5
        [ResponseType(typeof(void))]
        public IHttpActionResult PutDriver(int id, Driver driver)
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }

            if (id != driver.DriverId)
            {
                return BadRequest();
            }

            db.Entry(driver).State = EntityState.Modified;

            try
            {
                db.SaveChanges();
            }
            catch (DbUpdateConcurrencyException)
            {
                if (!DriverExists(id))
                {
                    return NotFound();
                }
                else
                {
                    throw;
                }
            }

            return StatusCode(HttpStatusCode.NoContent);
        }

        // POST: api/Drivers
        [ResponseType(typeof(Driver))]
        public IHttpActionResult PostDriver(Driver driver)
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }

            db.Drivers.Add(driver);
            db.SaveChanges();

            return CreatedAtRoute("DefaultApi", new { id = driver.DriverId }, driver);
        }

        // DELETE: api/Drivers/5
        [ResponseType(typeof(Driver))]
        public IHttpActionResult DeleteDriver(int id)
        {
            Driver driver = db.Drivers.Find(id);
            if (driver == null)
            {
                return NotFound();
            }

            db.Drivers.Remove(driver);
            db.SaveChanges();

            return Ok(driver);
        }

        protected override void Dispose(bool disposing)
        {
            if (disposing)
            {
                db.Dispose();
            }
            base.Dispose(disposing);
        }

        private bool DriverExists(int id)
        {
            return db.Drivers.Count(e => e.DriverId == id) > 0;
        }
    }
}

In the Solution Explorer, right-click Controllers -> Add -> Controller...
In the middle list of the Add New Scaffolded Item dialog box, click MVC 5 Controller With Read/Write Actions
Click Add
Replace Default with Driver to get DriverController
Click Add

In the class, make all id arguments nullable:

using System.Web.Mvc;

namespace TrafficTicketsSystem11.Controllers
{
    public class DriverController : Controller
    {
        // GET: Driver
        public ActionResult Index()
        {
            return View();
        }

        // GET: Driver/Details/5
        public ActionResult Details(int? id)
        {
            return View();
        }

        // GET: Driver/Create
        public ActionResult Create()
        {
            return View();
        }

        // POST: Driver/Create
        [HttpPost]
        public ActionResult Create(FormCollection collection)
        {
            try
            {
                // TODO: Add insert logic here

                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }

        // GET: Driver/Edit/5
        public ActionResult Edit(int? id)
        {
            return View();
        }

        // POST: Driver/Edit/5
        [HttpPost]
        public ActionResult Edit(int? id, FormCollection collection)
        {
            try
            {
                // TODO: Add update logic here

                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }

        // GET: Driver/Delete/5
        public ActionResult Delete(int? id)
        {
            return View();
        }

        // POST: Driver/Delete/5
        [HttpPost]
        public ActionResult Delete(int? id, FormCollection collection)
        {
            try
            {
                // TODO: Add delete logic here

                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }
    }
}

In the DriverController class, right-click Index() -> Add View...
In the Add New Scaffolded Item dialog box, make sure MVC 5 View is selected:
Click Add
In the Add View dialog box, make sure the View Name text box is displaying Index
Click Add

Change the code as follows:

@{
    ViewBag.Title = "Vehicles Owners/Drivers";
}

<h2 class="text-center fw-bold common-font">Vehicles Owners/Drivers</h2>

<table class="table table-striped common-font">
    <tr>
        <th class="fw-bold text-center">Driver Id</th>
        <th class="fw-bold">Drv. Lic. #</th>
        <th class="fw-bold">First Name</th>
        <th class="fw-bold">Last Name</th>
        <th class="fw-bold">Address</th>
        <th class="fw-bold">City</th>
        <th class="fw-bold">County</th>
        <th class="fw-bold">State</th>
        <th class="fw-bold">ZIP-Code</th>
    </tr>
</table>

<hr />

<p class="text-center">
    @Html.ActionLink("New Driver/Owner", "Create", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("Driver/Owner Details", "Details", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("Edit/Update Driver/Owner Information", "Edit", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("Revoke Driver's License", "Delete", null, htmlAttributes: new { @class = "tts-nav" })
</p>

@Scripts.Render("~/bundles/jquery")

<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            method: "GET",
            dataType: "json",
            url: "/api/Drivers",
            success: function (data) {
                $.each(data, function (index, person) {
                    $("table").append("<tr>" +
                        "<td class='text-center'>" + person["DriverId"] + "</td>" +
                        "<td>" + person["DrvLicNumber"] + "</td>" +
                        "<td>" + person["FirstName"] + "</td>" +
                        "<td>" + person["LastName"] + "</td>" +
                        "<td>" + person["Address"] + "</td>" +
                        "<td>" + person["City"] + "</td>" +
                        "<td>" + person["County"] + "</td>" +
                        "<td>" + person["State"] + "</td>" +
                        "<td>" + person["ZIPCode"] + "</td></tr>");
                });
            }
        });
    });
</script>

Click the DriverController.cs tab

Licensing a Vehicle Driver

A person who drives a car must have a driver's license. To help a user establish such a document, our application will include an appropriate webform. As seen in our database, we will keep the information to a minimum.

Practical Learning: Licensing a Vehicle Driver

In the DriverController class, right-click one of the Create() methods and click Add View...
In the Add New Scaffolded Item dialog box, make sure MVC 5 View is selected:
Click Add
In the Add View dialog box, make sure the View Name text box is displaying Create
Click Add

Change the document as follows:

@{
    ViewBag.Title = "Create Driver";
}

<h2 class="text-center fw-bold common-font">New Vehicle Owner/Driver</h2>

<hr />

<form name="frmCreateVehicleDriver" method="post">
    <div class="box-holder common-font">
        <div class="form-group row">
            <label for="drvLicNbr" class="col-md-36 top-padding">Drv. Lic. #:</label>
            <div class="col-md-64"><input type="text" id="drvLicNbr" class="form-control" /></div>
        </div>

        <hr />

        <div class="form-group row">
            <label for="fName" class="col-md-36 top-padding">First Name:</label>
            <div class="col-md-64"><input type="text" id="fName" class="form-control" /></div>
        </div>

        <hr />

        <div class="form-group row">
            <label for="lName" class="col-md-36 top-padding">Last Name:</label>
            <div class="col-md-64"><input type="text" id="lName" class="form-control" /></div>
        </div>

        <hr />

        <div class="form-group row">
            <label for="adrs" class="col-md-36 top-padding">Address:</label>
            <div class="col-md-64"><input type="text" id="adrs" class="form-control" /></div>
        </div>

        <hr />

        <div class="form-group row">
            <label for="city" class="col-md-36 top-padding">City:</label>
            <div class="col-md-64"><input type="text" id="city" class="form-control" /></div>
        </div>

        <hr />

        <div class="form-group row">
            <label for="county" class="col-md-36 top-padding">County:</label>
            <div class="col-md-64"><input type="text" id="county" class="form-control" /></div>
        </div>

        <hr />

        <div class="form-group row">
            <label for="state" class="col-md-36 top-padding">State:</label>
            <div class="col-md-64"><input type="text" id="state" class="form-control" /></div>
        </div>

        <hr />

        <div class="form-group row">
            <label for="zip" class="col-md-36 top-padding">ZIP Code:</label>
            <div class="col-md-64"><input type="text" id="zip" class="form-control" /></div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36 top-padding"></label>
            <div class="col-md-64 text-center">
                <input type="button" id="btnIssueDriversLicense"
                       class="btn btn-primary" value="Issue a Driver's License" />
            </div>
        </div>
    </div>
</form>

<hr />

<p class="text-center">
    @Html.ActionLink("Drivers/Owners", "Index", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("Driver/Owner Details", "Details", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("Edit/Update Driver/Owner Information", "Edit", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("Delete Drivers/Owner Record", "Delete", null, htmlAttributes: new { @class = "tts-nav" })
</p>

@Scripts.Render("~/bundles/jquery")

<script type="text/javascript">
    $(document).ready(function () {
        $("#btnIssueDriversLicense").click(function () {
            var driver = {
                DrvLicNumber: $("#drvLicNbr").val(),
                FirstName: $("#fName").val(),
                LastName: $("#lName").val(),
                Address: $("#adrs").val(),
                City: $("#city").val(),
                County: $("#county").val(),
                State: $("#state").val(),
                ZIPCode: $("#zip").val()
            };

            $.ajax({
                method: "POST",
                data: driver,
                url: "/api/Drivers",
                success: function (data) {
                    alert("The driver's license has been issued.");

                    window.location.href = 'Index';
                }
            });
        });
    });
</script>

Click the DriverController.cs tab
To execute, on the main menu, click Debug -> Start Without Debugging
Click the Drivers link:
Click the New Driver/Owner link

In the text boxes, enter the following values and click the Save button after each:

Drv. Lic. #	First Name	Last Name	Address	City	County	State	ZIP Code
296 840 681	Simon	Havers	1684 Steward Le	Kittanning	Arms Strongs	PA	11563
273-79-4157	Terrence	McConnell	8304 Polland Street	Meadowview	Washington	VA	24361
A402-630-468	Patrick	Atherton	10744 Quincy Blvd	Cumberland	Allegany	MD	21502

In the Server Explorer, right-click TrafficTicketsSystem1 and click New Query

In the empty document, type the following code:

INSERT INTO Drivers(DrvLicNumber, FirstName, LastName, [Address], City, [State], ZIPCode)
VALUES(N'C-684-394-527', N'Sarah',     N'Cuchran',      N'10804 Euton Road',        N'Shawnee Land',                         N'VA', N'24450');
GO
INSERT INTO Drivers(DrvLicNumber, FirstName, LastName, [Address], City, County, [State], ZIPCode)
VALUES(N'E-928-374-025',  N'Janet',    N'Eubanks',      N'794 Arrow Head Ave',         N'Vyene',        N'Dorchester',     N'MD', N'21669'),
      (N'GV55379422',     N'Frank',    N'Leighton',     N'11428 Swanson Street',       N'Eldorado',     N'Schleicher',     N'TX', N'76932'),
      (N'593-804-597',    N'George',   N'Higgins',      N'884 Willingmont Drive',      N'Krumsville',   N'Berks',          N'PA', N'19530'),
      (N'G483974973',     N'Anthony',  N'Gibbs',        N'672 Pearson Avenue',         N'Springfield',  N'Greene',         N'MO', N'65112'),
      (N'729386468',      N'Victoria', N'Huband',       N'3958 Lubber Court',          N'Middletown',   N'New Castle',     N'DE', N'19709'),
      (N'296806850',      N'Annette',  N'Mann',         N'822 North Freight Avenue',   N'Macon',        N'Noxubee',        N'MS', N'393412'),
      (N'851608526',      N'Patrick',  N'Whalley',      N'10227 Woodrow Rd',           N'Shelleytown',  N'Bedford',        N'TN', N'38561'),
      (N'TM3049805',      N'Denise',   N'Gibson',       N'2794 Bronson Court',         N'Madisonville', N'Madison',        N'TX', N'77862'),
      (N'W639-285-940',   N'David',    N'Woodbank',     N'9703 Abington Ave',          N'Hurlock',      N'Dorchester',     N'MD', N'21643'),
      (N'42803706',       N'James',    N'Rowley',       N'12269 Bingham Street',       N'Briggs Town',  N'Prince Georges', N'MD', N'20776'),
      (N'20374586',       N'Robert',   N'Pearson',      N'648 North Kaduna Boulevard', N'Georgetown',   N'Sussex',         N'DE', N'19942'),
      (N'S-283-942-646',  N'Amil',     N'Saint Burrey', N'4048 Utah Rd',               N'Denville',     N'Morris',         N'NJ', N'07961'),
      (N'KW538479508',    N'Patrick',  N'Fears',        N'10237 Northam Way',          N'Canyon',       N'Randall',        N'TX', N'79015'),
      (N'860-586-175',    N'Kelly',    N'Murray',       N'8622 Rutger Farms Street',   N'Rutger Farms', N'Macon',          N'TN', N'37122');
GO

To execute, on the SQL Editor toolbar, click the Execute button
Close the Query window
When asked whether you want to save, click No
Return to your programming environment

Getting Information About a Driver

Some time to time, an employee may want to see the details of a driver's license. To help with this, we will add a webform to our application.

Practical Learning: Getting Information About a Vehicle Driver

Click the DriverController.cs tab
In the DriverController class, right-click Details() -> Add View...
In the Add New Scaffolded Item dialog box, make sure MVC 5 View is selected:
Click Add
In the Add View dialog box, make sure the View Name text box displays Details
Click Add

Change the webpage as follows:

@{
    ViewBag.Title = "Driver Details";
}

<h2 class="text-center fw-bold common-font">Driver/Owner Details</h2>

<hr />

<form name="frmDetailsDriver" method="post">
    <div class="box-holder common-font">
        <div class="form-group row">
            <label for="cameraId" class="col-md-36 top-padding">Driver Id:</label>
            <div class="col-md-32"><input type="text" id="driverId" class="form-control" /></div>
            <div class="col-md-32">
                <input type="button" id="btnLocateDriver" class="btn btn-primary" value="Locate Driver/Owner" />
            </div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36 top-padding">Drv. Lic. #:</label>
            <div class="col-md-64"><span id="drvLicNbr"></span></div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36 top-padding">First Name:</label>
            <div class="col-md-64"><span id="fname"></span></div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36 top-padding">Last Name:</label>
            <div class="col-md-64"><span id="lname" /></div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36 top-padding">Address:</label>
            <div class="col-md-64"><span id="adrs"></span></div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36 top-padding">City:</label>
            <div class="col-md-64"><span id="city"></span></div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36 top-padding">County:</label>
            <div class="col-md-64"><span id="county"></span></div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36 top-padding">State:</label>
            <div class="col-md-64"><span id="state"></span></div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36 top-padding">ZIP-Code:</label>
            <div class="col-md-64"><span id="zip"></span></div>
        </div>
    </div>
</form>

<hr />

<p class="text-center">
    @Html.ActionLink("Vehicles Drivers/Owners", "Index", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("New Driver", "Create", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("Edit/Update Driver Details", "Edit", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("Revoke Driver's License", "Delete", null, htmlAttributes: new { @class = "tts-nav" })
</p>

@Scripts.Render("~/bundles/jquery")

<script type="text/javascript">
    $(document).ready(function () {
        $(".btn-primary").on("click", function (event) {
            $.ajax({
                method: "GET",
                dataType: "json",
                url: "/api/Drivers/" + $("input[id='driverId']").val(),
                success: function (data) {
                    $("span[id='drvLicNbr']").text(data.DrvLicNumber);
                    $("span[id='fname']").text(data.FirstName);
                    $("span[id='lname']").text(data.LastName);
                    $("span[id='adrs']").text(data.Address);
                    $("span[id='city']").text(data.City);
                    $("span[id='county']").text(data.County);
                    $("span[id='state']").text(data.State);
                    $("span[id='zip']").text(data.ZIPCode);
                }
            });
        });
    });
</script>

Click the DriverController.cs tab
To execute, on the main menu, click Debug -> Start Without Debugging
Click the Drivers link:
Click the Driver/Owner Details link:
In the Driver Id text box, type 3
Click the Locate Driver/Owner button:
Return to your programming environment

Updating the Details of a Driver

A piece of information about a driver can change. When that happens, the database must be updated. We will make this happen in our application through an appropriate form.

Practical Learning: Updating the Information of a Camera

In the DriverController class, right-click one of the Edit() methods -> Add View...
In the Add New Scaffolded Item dialog box, make sure MVC 5 View is selected:
Click Add
In the Add View dialog box, make sure the View Name text box is displaying Edit:
Click Add

Change the document as follows:

@{
    ViewBag.Title = "Edit Driver";
}

<h2 class="text-center fw-bold common-font">Edit/Update Driver Information</h2>

<hr />

<form name="frmEditDriver" method="post">
    <div class="box-holder common-font">
        <div class="form-group row">
            <label for="chauffeur" class="col-md-36 top-padding">Driver Id:</label>
            <div class="col-md-32"><input type="text" id="chauffeur" class="form-control" /></div>
            <div class="col-md-32">
                <input type="button" id="btnGetDriver" class="btn btn-primary" value="Find Driver" />
            </div>
        </div>

        <hr />

        <div class="form-group row">
            <label for="drvLicNbr" class="col-md-36 top-padding">Drv. Lic. #:</label>
            <div class="col-md-64"><input type="text" id="drvLicNbr" class="form-control" /></div>
        </div>

        <hr />

        <div class="form-group row">
            <label for="fName" class="col-md-36 top-padding">First Name:</label>
            <div class="col-md-64"><input type="text" id="fName" class="form-control" /></div>
        </div>

        <hr />

        <div class="form-group row">
            <label for="lName" class="col-md-36 top-padding">Last Name:</label>
            <div class="col-md-64"><input type="text" id="lName" class="form-control" /></div>
        </div>

        <hr />

        <div class="form-group row">
            <label for="adrs" class="col-md-36 top-padding">Address:</label>
            <div class="col-md-64"><input type="text" id="adrs" class="form-control" /></div>
        </div>

        <hr />

        <div class="form-group row">
            <label for="city" class="col-md-36 top-padding">City:</label>
            <div class="col-md-64"><input type="text" id="city" class="form-control" /></div>
        </div>

        <hr />

        <div class="form-group row">
            <label for="county" class="col-md-36 top-padding">County:</label>
            <div class="col-md-64"><input type="text" id="county" class="form-control" /></div>
        </div>

        <hr />

        <div class="form-group row">
            <label for="state" class="col-md-36 top-padding">State:</label>
            <div class="col-md-64"><input type="text" id="state" class="form-control" /></div>
        </div>

        <hr />

        <div class="form-group row">
            <label for="zip" class="col-md-36 top-padding">ZIP-Code:</label>
            <div class="col-md-64"><input type="text" id="zip" class="form-control" /></div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36">&nbsp;</label>
            <div class="col-md-64 text-center">
                <input type="button" id="btnUpdateRecord"
                       class="btn btn-primary" value="Update Camera Details" />
            </div>
        </div>
    </div>
</form>

<hr />

<p class="text-center">
    @Html.ActionLink("Drivers/Owners", "Index", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("New Driver", "Create", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("Driver/Owner Details", "Details", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("Delete Drivers/Owner Record", "Delete", null, htmlAttributes: new { @class = "tts-nav" })
</p>

@Scripts.Render("~/bundles/jquery")

<script type="text/javascript">
    $(document).ready(function () {
        $("#btnGetDriver").click(function (event) {
            $.ajax({
                method: "GET",
                dataType: "json",
                url: "/api/Drivers/" + $("#chauffeur").val(),
                success: function (data) {
                    $("#tagNbr").val(data.TagNumber);
                    $("#drvLicNbr").val(data.DrvLicNumber);
                    $("#fName").val(data.FirstName);
                    $("#lName").val(data.LastName);
                    $("#adrs").val(data.Address);
                    $("#city").val(data.City);
                    $("#county").val(data.County);
                    $("#state").val(data.State);
                    $("#zip").val(data.ZIPCode);
                }
            });
        });

        $("#btnUpdateRecord").click(function (event) {
            var dvr = {
                DriverId: $("#chauffeur").val(),
                DrvLicNumber: $("#drvLicNbr").val(),
                FirstName: $("#fName").val(),
                LastName: $("#lName").val(),
                Address: $("#adrs").val(),
                TagNumber: $("#tagNbr").val(),
                City: $("#city").val(),
                County: $("#county").val(),
                State: $("#state").val(),
                ZIPCode: $("#zip").val()
            };
            $.ajax({
                data: dvr,
                method: "PUT",
                url: "/api/Drivers/" + $("#chauffeur").val(),
                success: function (data) {
                    alert("The driver/owner information is now up-to-date.")

                    window.location.href = 'Index';
                }
            });
        });
    });
</script>

Click the DriverController.cs tab
To execute, on the main menu, click Debug -> Start Without Debugging
Click the Drivers link:
Click the Edit/Update Driver Information link:

Change the information of the Drivers as follows:

Driver Id	Drv. Lic. #	First Name	Last Name	Address	City	County	State	ZIP Code
1	296-840-681	No change	No change	No change	1884 Stewart Lane	Armstrong	No change	15638
5	No change	Jeannette	No change	7294 Arrowhead Avenue	Vienna	No change	No change	21869
16	No change	Emilie	Sainsbury	No change	Shelbyville	No change	No change	No change

Return to your programming environment

Removing a Driver

For any reason, an administration may want to remove a driver's license from a system. To let the user perform this operation, we will create a webform in our application.

Practical Learning: Removing a Camera

In the DriverController class, right-click one of the Delete() methods and click Add View...
In the Add New Scaffolded Item dialog box, make sure MVC 5 View is selected:
Click Add
In the Add View dialog box, make sure the View Name text box is displaying Delete:
Click Add

Change the document as follows:

@{
    ViewBag.Title = "Delete Driver";
}

<h2 class="text-center fw-bold common-font">Delete Driver's Record</h2>

<hr />

<form name="frmDeleteDrivers" method="post">
    <div class="box-holder common-font">
        <div class="form-group row">
            <label for="driverId" class="col-md-36 top-padding">Driver Id:</label>
            <div class="col-md-32"><input type="text" id="driverId" class="form-control small" /></div>
            <div class="col-md-32">
                <input type="button" name="btnFindDriver" class="btn btn-primary" value="Find Driver's Record" />
            </div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36 top-padding">Drv. Lic. #:</label>
            <div class="col-md-64"><span id="dln" class="form-control"></span></div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36 top-padding">First Name:</label>
            <div class="col-md-64"><span id="fname" class="form-control"></span></div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36 top-padding">Last Name:</label>
            <div class="col-md-64"><span id="lname" class="form-control"></span></div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36 top-padding">Address:</label>
            <div class="col-md-64"><span name="adrs" class="form-control"></span></div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36 top-padding">City:</label>
            <div class="col-md-64"><span name="city" class="form-control"></span></div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36 top-padding">County:</label>
            <div class="col-md-64"><span name="county" class="form-control"></span></div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36 top-padding">State:</label>
            <div class="col-md-64"><span name="state" class="form-control"></span></div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36 top-padding">ZIP-Code:</label>
            <div class="col-md-64"><span name="zip" class="form-control"></span></div>
        </div>
    </div>

    <hr />

    <p class="text-center">
        <input type="button" id="btnDeleteRegistration" name="btnRevokeRegistration"
               class="btn btn-primary" value="Delete Driver Record" />
    </p>
</form>

<hr />

<p class="text-center">
    @Html.ActionLink("Drivers/Owners", "Index", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("Create Drivers/Owner Record", "Create", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("Driver/Owner Details", "Details", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("Edit/Update Driver/Owner Information", "Edit", null, htmlAttributes: new { @class = "tts-nav" })
</p>

@Scripts.Render("~/bundles/jquery")

<script type="text/javascript">
    $(document).ready(function () {
        $("input[class='btn btn-primary']").on("click", function (event) {
            $.ajax({
                method:   "GET",
                dataType: "json",
                url:      "/api/Drivers/" + $("input[class='form-control small']").val(),
                success: function (data) {
                    $("span[id='dln']").text(data.DrvLicNumber);
                    $("span[id='fname']").text(data.FirstName);
                    $("span[id='lname']").text(data.LastName);
                    $("span[name='adrs']").text(data.Address);
                    $("span[name='city']").text(data.City);
                    $("span[name='county']").text(data.County);
                    $("span[name='state']").text(data.State);
                    $("span[name='zip']").text(data.ZIPCode);
                }
            });
        });

        $("input[value='Delete Driver Record']").on("click", function (event) {
            var driver = {
                DriverId:     $("input[class='form-control small']").val()
            };
            
            $.ajax({
                data:         driver,
                method:       "DELETE",
                url:          "/api/Drivers/" + $("input[class='form-control small']").val(),
                success: function (data) {
                    alert("The driver's record has been deleted.")

                    window.location.href = 'Index';
                }
            });

        });
    });
</script>

Click the DriverController.cs tab
To execute, on the main menu, click Debug -> Start Without Debugging
Click the Drivers link:
Click the Revoke Drivers's Livense link:
In the Driver Id text box, type 14
Click the Find Driver's Record button:
Click the Revoke Drivers's License button
Click OK on the message box:
Return to your programming environment

Vehicles

Introduction

Vehicles records are created and managed by a state government. For our simple application, we will register the cars in our system. Before doing that, we will make sure a user has the ability to display a list of vehicles.

Practical Learning: Displaying a List of Vehicles

In the Solution Explorer, right-click Controllers -> Add -> New Scaffolded Item...
In the middle list of the Add New Scaffolded Item dialog box, under Common, click Web API and, in the middle list, click Web API 2 Controller With Actions, Using Entity Framework:
Click Add
In the Model Class combo box, select Vehicle (TrafficTicketsSystem1.Models)

Make sure the Data Context Class combo box is displayinig TicketsManagementModel (TrafficTicketsSystem11.Models).
Make sure the Controller Name is displaying VehiclesController:

Click Add:

using System.Data.Entity;
using System.Data.Entity.Infrastructure;
using System.Linq;
using System.Net;
using System.Web.Http;
using System.Web.Http.Description;
using TrafficTicketsSystem11.Models;

namespace TrafficTicketsSystem11.Controllers
{
    public class VehiclesController : ApiController
    {
        private TicketsManagementModel db = new TicketsManagementModel();

        // GET: api/Vehicles
        public IQueryable<Vehicle> GetVehicles()
        {
            return db.Vehicles;
        }

        // GET: api/Vehicles/5
        [ResponseType(typeof(Vehicle))]
        public IHttpActionResult GetVehicle(int id)
        {
            Vehicle vehicle = db.Vehicles.Find(id);
            if (vehicle == null)
            {
                return NotFound();
            }

            return Ok(vehicle);
        }

        // PUT: api/Vehicles/5
        [ResponseType(typeof(void))]
        public IHttpActionResult PutVehicle(int id, Vehicle vehicle)
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }

            if (id != vehicle.VehicleId)
            {
                return BadRequest();
            }

            db.Entry(vehicle).State = EntityState.Modified;

            try
            {
                db.SaveChanges();
            }
            catch (DbUpdateConcurrencyException)
            {
                if (!VehicleExists(id))
                {
                    return NotFound();
                }
                else
                {
                    throw;
                }
            }

            return StatusCode(HttpStatusCode.NoContent);
        }

        // POST: api/Vehicles
        [ResponseType(typeof(Vehicle))]
        public IHttpActionResult PostVehicle(Vehicle vehicle)
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }

            db.Vehicles.Add(vehicle);
            db.SaveChanges();

            return CreatedAtRoute("DefaultApi", new { id = vehicle.VehicleId }, vehicle);
        }

        // DELETE: api/Vehicles/5
        [ResponseType(typeof(Vehicle))]
        public IHttpActionResult DeleteVehicle(int id)
        {
            Vehicle vehicle = db.Vehicles.Find(id);
            if (vehicle == null)
            {
                return NotFound();
            }

            db.Vehicles.Remove(vehicle);
            db.SaveChanges();

            return Ok(vehicle);
        }

        protected override void Dispose(bool disposing)
        {
            if (disposing)
            {
                db.Dispose();
            }
            base.Dispose(disposing);
        }

        private bool VehicleExists(int id)
        {
            return db.Vehicles.Count(e => e.VehicleId == id) > 0;
        }
    }
}

In the Solution Explorer, right-click Controllers -> Add -> Controller...
In the left list of the Add New Scaffolded Item dialog box, click MVC and, in the middle list, click MVC 5 Controller With Read/Write Actions
Click Add
Replace Default with Vehicle to get VehicleController
Click Add

In the VehicleController class, make all id arguments nullable:

using System.Web.Mvc;

namespace TrafficTicketsSystem11.Controllers
{
    public class VehicleController : Controller
    {
        // GET: Vehicle
        public ActionResult Index()
        {
            return View();
        }

        // GET: Vehicle/Details/5
        public ActionResult Details(int? id)
        {
            return View();
        }

        // GET: Vehicle/Create
        public ActionResult Create()
        {
            return View();
        }

        // POST: Vehicle/Create
        [HttpPost]
        public ActionResult Create(FormCollection collection)
        {
            try
            {
                // TODO: Add insert logic here

                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }

        // GET: Vehicle/Edit/5
        public ActionResult Edit(int? id)
        {
            return View();
        }

        // POST: Vehicle/Edit/5
        [HttpPost]
        public ActionResult Edit(int? id, FormCollection collection)
        {
            try
            {
                // TODO: Add update logic here

                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }

        // GET: Vehicle/Delete/5
        public ActionResult Delete(int? id)
        {
            return View();
        }

        // POST: Vehicle/Delete/5
        [HttpPost]
        public ActionResult Delete(int? id, FormCollection collection)
        {
            try
            {
                // TODO: Add delete logic here

                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }
    }
}

In the class, right-click Index() -> Add View...
In the Add New Scaffolded Item dialog box, make sure MVC 5 View is selected:
Click Add
In the Add View dialog box, make sure the View Name text box is displaying Index
Click Add

Change the document as follows:

@{
    ViewBag.Title = "Vehicles";
}

<h2 class="text-center fw-bold common-font">Vehicles Registrations</h2>

<table class="table table-striped common-font">
    <tr>
        <th class="fw-bold text-center">Vehicle Id</th>
        <th class="fw-bold">Tag #</th>
        <th class="fw-bold">Drv. Lic. #</th>
        <th class="fw-bold">Make</th>
        <th class="fw-bold">Model</th>
        <th class="fw-bold">Year</th>
        <th class="fw-bold">Color</th>
    </tr>
</table>

<hr />

<p class="text-center">
    @Html.ActionLink("New Vehicle Registration", "Create", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("Vehicle Registration Details", "Details", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("Edit/Update Vehicle Registration Details", "Edit", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("Delete Vehicle Registration", "Delete", null, htmlAttributes: new { @class = "tts-nav" })
</p>

@Scripts.Render("~/bundles/jquery")

<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            method:   "GET",
            dataType: "json",
            url:      "/api/Vehicles",
            success: function (data) {
                $.each(data, function (index, car) {
                    $("table").append("<tr>" +
                        "<td class='text-center'>" + car["VehicleId"] + "</td>" +
                        "<td>" + car["TagNumber"] + "</td>" +
                        "<td>" + car["DrvLicNumber"] + "</td>" +
                        "<td>" + car["Make"] + "</td>" +
                        "<td>" + car["Model"] + "</td>" +
                        "<td>" + car["VehicleYear"] + "</td>" +
                        "<td>" + car["Color"] + "</td></tr>");
                });
            }
        });
    });
</script>

Click the VehicleController.cs tab

Registering a Vehicle

Before a vehicle is allowed to circulate in the street, a record must be created in the administration's system. Our application will have a webform that can be used to register a vehicle. As seen in our database, we will keep the information to a minimum.

Practical Learning: Registering a Vehicle

In the VehicleController class, right-click one of the Create() methods and click Add View...
In the Add New Scaffolded Item dialog box, make sure MVC 5 View is selected:
Click Add
In the Add View dialog box, make sure the View Name text box is displaying Create
Click Add

Change the document as follows:

@{
    ViewBag.Title = "Vehicle Registration";
}

<h2 class="text-center fw-bold common-font">New Vehicle Registration</h2>

<hr />

<form name="VehicleRegistration" method="post">
    <div class="box-holder common-font">
        <div class="form-group row">
            <label for="tagNbr" class="col-md-36 top-padding">Vehicle Tag #:</label>
            <div class="col-md-64"><input type="text" id="tagNbr" class="form-control" /></div>
        </div>

        <hr />

        <div class="form-group row">
            <label for="drvLicNbr" class="col-md-36 top-padding">Drv. Lic. #:</label>
            <div class="col-md-64"><input type="text" id="drvLicNbr" class="form-control" /></div>
        </div>
        <div class="form-group row">
            <label for="ownerName" class="col-md-36 top-padding">Owner/Driver:</label>
            <div class="col-md-64">
                <span id="ownerName" name="ownerName"></span>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-md-36"></label>
            <div class="col-md-64">
                <span id="ownerAddress" name="ownerAddress"></span>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-md-36"></label>
            <div class="col-md-64">
                <span id="ownerCityState" name="ownerCityState"></span>
            </div>
        </div>

        <hr />

        <div class="form-group row">
            <label for="make" class="col-md-36 top-padding">Make:</label>
            <div class="col-md-64"><input type="text" id="make" class="form-control" /></div>
        </div>

        <hr />

        <div class="form-group row">
            <label for="model" class="col-md-36 top-padding">Model:</label>
            <div class="col-md-64"><input type="text" id="model" class="form-control" /></div>
        </div>

        <hr />

        <div class="form-group row">
            <label for="year" class="col-md-36 top-padding">Year:</label>
            <div class="col-md-64"><input type="text" id="year" class="form-control" /></div>
        </div>

        <hr />

        <div class="form-group row">
            <label for="clr" class="col-md-36 top-padding">Color:</label>
            <div class="col-md-64"><input type="text" id="clr" class="form-control" /></div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36">&nbsp;</label>
            <div class="col-md-64 text-center">
                <input type="button" id="btnRegisterVehicle"
                       class="btn btn-primary" value="Save this Vehicle Registration" />
            </div>
        </div>
    </div>
</form>

<hr />

<p class="text-center">
    @Html.ActionLink("Vehicles Registrations", "Index", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("Vehicle Registration Details", "Details", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("Edit/Update Vehicle Registration", "Edit", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("Delete Vehicle Registration", "Delete", null, htmlAttributes: new { @class = "tts-nav" })
</p>

@Scripts.Render("~/bundles/jquery")

<script type="text/javascript">
    $(document).ready(function () {
        $("#drvLicNbr").blur(function (event) {
            $.ajax({
                method: "GET",
                dataType: "json",
                url: "/api/Drivers",
                success: function (data) {
                    $.each(data, function (index, person) {
                        if (person["DrvLicNumber"] === $("#drvLicNbr").val()) {
                            $("span[name='ownerName']").text(person["FirstName"] + " " + person["LastName"]);
                            $("span[name='ownerAddress']").text(person["Address"]);
                            $("span[name='ownerCityState']").text(person["City"] + ", " +
                                person["State"] + " " +
                                person["ZIPCode"]);
                        }
                    });
                }
            });
        }); // Driver's License Number Lost Focus

        $("#btnRegisterVehicle").click(function () {
            var car = {
                TagNumber:    $("#tagNbr").val(),
                DrvLicNumber: $("#drvLicNbr").val(),
                Make:         $("#make").val(),
                Model:        $("#model").val(),
                VehicleYear:  $("#year").val(),
                Color:        $("#clr").val()
            };

            $.ajax({
                data: car,
                method: "POST",
                url: "/api/Vehicles",
                success: function (data) {
                    alert("The vehicle has been registered.");

                    window.location.href = 'Index';
                }
            });
        });
    });
</script>

Click the VehicleController.cs tab
To execute, on the main menu, click Debug -> Start Without Debugging
Click the Vehicles link:
Click the New Vehicle Registration link

In the text boxes, enter the following values and click the Save button after each:

Tag #	Drv. Lic. #	Make	Model	Year	Color
8DE9275	296-840-681	Ford	Escape ST	2023	Vapor Blue
KLT4805	593-804-597	Toyota	Corolla LE	2021	Maroon

In the Server Explorer, right-click TrafficTicketsSystem1 and click New Query

In the empty document, type the following code:

INSERT INTO Vehicles(TagNumber, DrvLicNumber, Make, Model, VehicleYear, Color)
VALUES(N'807-394', N'851-608-526',   N'Toyota',   N'Camry',      N'2010', N'Silver'),
	  (N'KAS9314', N'W639-285-940',  N'Cadillac', N'Escalade',   N'2018', N'Cream'),
	  (N'FKEWKR',  N'72938468',      N'Toyota',   N'Camry',      N'2020', N'Silver'),
	  (N'HAK3936', N'S-283-942-646', N'Chrysler', N'Crossfire',  N'2020', N'Red'),
	  (N'PER2849', N'296-840-681',   N'Buick',    N'LeSabre',    N'2022', N'Silver'),
	  (N'379-708', N'593-804-597',   N'Toyota',   N'Prius',      N'2025', N'Gray'),
	  (N'938-074', N'A-402-630-468', N'Ford',     N'Bronco',     N'2025', N'Green'),
	  (N'MWH4685', N'851-608-526',   N'Honda',    N'Accord',     N'2019', N'Blue'),
	  (N'971384',  N'E-928-374-025', N'BMW',      N'325i',       N'2015', N'Navy'),
	  (N'380-740', N'729-386-468',   N'Chrysler', N'Pacifica',   N'2022', N'White'),
	  (N'KD5842',  N'860596175',     N'Nissan',   N'Rogue',      N'2020', N'Yellow'),
	  (N'5293WPL', N'C-684-394-527', N'Ford',     N'F-150',      N'2018', N'Light Gray'),
	  (N'394-849', N'593-804-597',   N'Toyota',   N'Corolla',    N'2015', N'Red'),
	  (N'PP-9584', N'851-608-526',   N'Mazda',    N'CX-30',      N'2024', N'Dark Red'),
	  (N'MKR9374', N'273-79-4157',   N'Lincoln',  N'MKT',        N'2018', N'Black'),
	  (N'2937DG',  N'860596175',     N'Ford',     N'Mustang GT', N'2025', N'Blue Metallic');
GO

To execute, on the SQL Editor toolbar, click the Execute button
Close the Query window
When asked whether you want to save, click No
Click the VehicleController.cs tab

Viewing the Details of a Vehicle

Some time to time, an employee may want to see the information related to a vehicle. To assist the user with this operation, we will create a certain webpage in our application.

Practical Learning: Viewing the Details of a Vehicle

In the VehicleController class, right-click inside the Details() method and click Add View...
In the Add New Scaffolded Item dialog box, make sure MVC 5 View is selected:
Click Add
In the Add View dialog box, make sure the View Name text box is displaying Details
Click Add

Change the document as follows:

@{
    ViewBag.Title = "Vehicle Details";
}

<h2 class="text-center fw-bold common-font">Vehicle Details</h2>

<hr />

<form name="frmDetailsVehicle" method="post">
    <div class="box-holder common-font">
        <div class="form-group row">
            <label for="cameraId" class="col-md-36 top-padding">Vehicle Id:</label>
            <div class="col-md-32"><input type="text" id="carId" class="form-control small" /></div>
            <div class="col-md-32">
                <input type="button" id="btnFindVehicle" class="btn btn-primary" value="Find Vehicle" />
            </div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36 top-padding">Tag #:</label>
            <div class="col-md-64"><span class="tagNbr form-control"></span></div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36 top-padding">Drv. Lic. #:</label>
            <div class="col-md-64"><span class="dln form-control"></span></div>
        </div>

        <input type="hidden" id="btnLocateDriver" value="Find Driver" />

        <hr />

        <div class="form-group row">
            <label class="col-md-36">Owner/Driver:</label>
            <div class="col-md-64">
                <span id="ownerName" name="ownerName"></span>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-md-36"></label>
            <div class="col-md-64">
                <span id="ownerAddress" name="ownerAddress"></span>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-md-36"></label>
            <div class="col-md-64">
                <span id="ownerCityState" name="ownerCityState"></span>
            </div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36 top-padding">Make:</label>
            <div class="col-md-64"><span class="make form-control" /></div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36 top-padding">Model:</label>
            <div class="col-md-64"><span class="mdl form-control"></span></div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36 top-padding">Year:</label>
            <div class="col-md-64"><span class="year form-control"></span></div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36 top-padding">Color:</label>
            <div class="col-md-64"><span class="color form-control"></span></div>
        </div>
    </div>
</form>

<hr />

<p class="text-center">
    @Html.ActionLink("Vehicles", "Index", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("Vehicle Registration", "Create", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("Edit/Update Vehicle", "Edit", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("Delete Vehicle Record", "Delete", null, htmlAttributes: new { @class = "tts-nav" })
</p>

@Scripts.Render("~/bundles/jquery")

<script type="text/javascript">
    $(document).ready(function () {
        $(".btn-primary").on("click", function (event) {
            var drvLicNbr = "";

            $.ajax({
                method: "GET",
                dataType: "json",
                url: "/api/Vehicles/" + $(".small").val(),
                success: function (data) {
                    $("span.tagNbr").text(data.TagNumber);
                    $("span.dln").text(data.DrvLicNumber);
                    drvLicNbr = data.DrvLicNumber;
                    $("span.make").text(data.Make);
                    $("span.mdl").text(data.Model);
                    $("span.year").text(data.VehicleYear);
                    $("span.color").text(data.Color);

                    $("span[name='ownerName']").text("");
                    $("span[name='ownerAddress']").text("");
                    $("span[name='ownerCityState']").text("");

                    locateDriver();
                }
            });

            $("#btnLocateDriver").on("click", function (event) {
                locateDriver();
            });

            function locateDriver() {
                $.ajax({
                    method: "GET",
                    dataType: "json",
                    url: "/api/Drivers/" + $("span.dln").val(),
                    success: function (data) {
                        $.each(data, function (index, person) {
                            if (person["DrvLicNumber"] === drvLicNbr) {
                                $("span[name='ownerName']").text(person["FirstName"] + " " +
                                    person["LastName"]);
                                $("span[name='ownerAddress']").text(person["Address"]);
                                $("span[name='ownerCityState']").text(person["City"] + ", " +
                                    person["State"] + " " +
                                    person["ZIPCode"]);
                            }
                        });

                    }
                });
            }
        });
    });
</script>

Click the VehicleController.cs tab
To execute, on the main menu, click Debug -> Start Without Debugging
Click the Vehicles link:
Click the Vehicle Details link:
In the Vehicle Id text box, type 3
Click the Find Vehicle button:
Return to your programming environment

Updating the Information of a Vehicle

Many times throughout the lifetime of a vehicle, its information changes from time to time. Of course, such information must be changed in an administration's system. To make this happen, our application will have an appropriate webform.

Practical Learning: Updating the Information of a Vehicle

In the VehicleController class, right-click one of the Edit() methods -> Add View...
In the Add New Scaffolded Item dialog box, make sure MVC 5 View is selected:
Click Add
In the Add View dialog box, make sure the View Name text box is displaying Edit:
Click Add

Change the document as follows:

@{
    ViewBag.Title = "Edit Vehicle";
}

<h2 class="text-center fw-bold common-font">Edit/Update Vehicle Information</h2>

<hr />

<form name="frmEditVehicle" method="post">
    <div class="box-holder common-font">
        <div class="form-group row">
            <label for="carId" class="col-md-36 top-padding">Vehicle Id:</label>
            <div class="col-md-32"><input type="text" id="carId" name="carId" class="form-control" /></div>
            <div class="col-md-32">
                <input type="button" id="btnLocateVehicle" class="btn btn-primary" value="Find Vehicle" />
            </div>
        </div>

        <hr />

        <div class="form-group row">
            <label for="drvLicNbr" class="col-md-36 top-padding">Drv. Lic. #:</label>
            <div class="col-md-64">
                <input type="text" id="drvLicNbr" name="drvLicNbr" class="form-control" />
            </div>
        </div>

        <input type="hidden" id="btnLocateDriver" class="btn btn-primary" value="Find Driver" />

        <div class="form-group row">
            <label class="col-md-36">Owner/Driver:</label>
            <div class="col-md-64">
                <span id="ownerName" name="ownerName"></span>
            </div>
        </div>

        <div class="form-group row">
            <label class="col-md-36"></label>
            <div class="col-md-64">
                <span id="ownerAddress" name="ownerAddress"></span>
            </div>
        </div>

        <div class="form-group row">
            <label class="col-md-36"></label>
            <div class="col-md-64">
                <span id="ownerCityState" name="ownerCityState"></span>
            </div>
        </div>

        <hr />

        <div class="form-group row">
            <label for="tagNbr" class="col-md-36 top-padding">Vehicle Tag #:</label>
            <div class="col-md-64"><input type="text" id="tagNbr" name="tagNbr" class="form-control" /></div>
        </div>

        <hr />

        <div class="form-group row">
            <label for="make" class="col-md-36 top-padding">Make:</label>
            <div class="col-md-64"><input type="text" id="make" name="make" class="form-control" /></div>
        </div>

        <hr />

        <div class="form-group row">
            <label for="model" class="col-md-36 top-padding">Model:</label>
            <div class="col-md-64"><input type="text" id="model" name="model" class="form-control" /></div>
        </div>

        <hr />

        <div class="form-group row">
            <label for="year" class="col-md-36 top-padding">Year:</label>
            <div class="col-md-64"><input type="text" id="year" name="year" class="form-control" /></div>
        </div>

        <hr />

        <div class="form-group row">
            <label for="color" class="col-md-36 top-padding">Color:</label>
            <div class="col-md-64"><input type="text" id="color" name="color" class="form-control" /></div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36">&nbsp;</label>
            <div class="col-md-64">
                <input type="button" id="btnUpdateVehicleRegistration"
                       class="btn btn-primary" value="Update Vehicle Registration" />
            </div>
        </div>
    </div>
</form>

<hr />

<p class="text-center">
    @Html.ActionLink("Vehicles Registrations", "Index", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("Create Vehicle Registration", "Create", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("Vehicle Registration Details", "Details", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("Delete Vehicle Registration", "Delete", null, htmlAttributes: new { @class = "tts-nav" })
</p>

@Scripts.Render("~/bundles/jquery")

<script type="text/javascript">
    $(document).ready(function () {
        $("#btnLocateVehicle").click(function (event) {
            var drvLicNbr = "";

            $.ajax({
                method: "GET",
                dataType: "json",
                url: "/api/Vehicles/" + $("input[name='carId']").val(),
                success: function (data) {
                    $("input[name='tagNbr']").val(data.TagNumber);
                    $("input[name='drvLicNbr']").val(data.DrvLicNumber);
                    drvLicNbr = data.DrvLicNumber;
                    $("input[name='make']").val(data.Make);
                    $("input[name='model']").val(data.Model);
                    $("input[name='year']").val(data.VehicleYear);
                    $("input[name='color']").val(data.Color);

                    locateDriver();
                }
            });

            $("#btnLocateDriver").on("click", function (event) {
                locateDriver();
            });

            function locateDriver() {
                $.ajax({
                    method: "GET",
                    dataType: "json",
                    url: "/api/Drivers/",
                    success: function (data) {
                        $.each(data, function (index, person) {
                            if (person["DrvLicNumber"] === $("input[name='drvLicNbr']").val()) {
                                $("span[name='ownerName']").text(person["FirstName"] + " " +
                                                                 person["LastName"]);
                                $("span[name='ownerAddress']").text(person["Address"]);
                                $("span[name='ownerCityState']").text(person["City"] + ", " +
                                                                      person["State"] + " " +
                                                                      person["ZIPCode"]);
                            }
                        });
                    }
                });
            }
        });

        $("input[name='drvLicNbr']").blur(function (event) {
            //alert("The Driver's License text box lost focus.");
            $.ajax({
                method: "GET",
                dataType: "json",
                url: "/api/Drivers/",
                success: function (data) {
                    $.each(data, function (index, person) {
                        if (person["DrvLicNumber"] === $("input[name='drvLicNbr']").val()) {
                            $("span[name='ownerName']").text(person["FirstName"] + " " +
                                person["LastName"]);
                            $("span[name='ownerAddress']").text(person["Address"]);
                            $("span[name='ownerCityState']").text(person["City"] + ", " +
                                person["State"] + " " +
                                person["ZIPCode"]);
                        }
                    });
                }
            });
        }); // Driver's License Number Lost Focus

        $("#btnUpdateVehicleRegistration").click(function (event) {
            var car = {
                VehicleId:    $("input[name='carId']").val(),
                TagNumber:    $("input[name='tagNbr']").val(),
                DrvLicNumber: $("input[name='drvLicNbr']").val(),
                Make:         $("input[name='make']").val(),
                Model:        $("input[name='model']").val(),
                VehicleYear:  $("input[name='year']").val(),
                Color:        $("input[name='color']").val()
            };
            $.ajax({
                data: car,
                method:       "PUT",
                url:          "/api/Vehicles/" + $("input[name='carId").val(),
                success: function (data) {
                    alert("The information about the vehicle has been updated.")

                    window.location.href = 'Index';
                }
            });
        });
    });
</script>

Click the VehicleController.cs tab
To execute, on the main menu, click Debug -> Start Without Debugging
Click the Vehicles link:
Click the Edit/Update Vehicle Information link:
In the Vehicle Id text box, type 9
Click the Find Vehicle button:
In the Vehicle Id text box, change the value to 5
Click the Find Vehicle button:

Change the information of some of the Vehicles as follows:

Vehicle Id	Tag #	Drv. Lic. #	Make	Model	Year	Color
5	973FKE	20374586	No change	No change	2010	Black
8	No change	296-840-681	No change	Highlander XLE	2024	Celestial Silver
13	No change	No change	No change	Pathfinder	2025	Green Pearl / Super Black

Return to your programming environment

Removing a Vehicle

When the record of a vehicle is not necessary, it must be deleted from a system. In our application, we will create a webform that can be used to remove the record of a vehicle.

Practical Learning: Removing a Camera

In the VehicleController class, right-click one of the Delete() methods and click Add View...
In the Add New Scaffolded Item dialog box, make sure MVC 5 View is selected:
Click Add
In the Add View dialog box, make sure the View Name text box is displaying Delete:
Click Add

Change the document as follows:

@{
    ViewBag.Title = "Delete Vehicle";
}

<h2 class="text-center fw-bold common-font">Delete Vehicle Registration</h2>

<hr />

<form name="frmDeleteVehicles" method="post">
    <div class="box-holder common-font">
        <div class="form-group row">
            <label for="carId" class="col-md-36 top-padding">Vehicle Id:</label>
            <div class="col-md-32"><input type="text" name="carId" class="form-control" /></div>
            <div class="col-md-32">
                <input type="button" name="btnFindVehicleRegistration"
                       class="btn btn-primary" value="Find Vehicle" />
            </div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36 top-padding">Vehicle Tag #:</label>
            <div class="col-md-64"><span name="tagNbr" class="form-control"></span></div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36 top-padding">Owner Drv. Lic. #:</label>
            <div class="col-md-64"><span name="dln" class="form-control"></span></div>
        </div>

        <input type="hidden" id="btnLocateDriver" class="btn btn-primary" value="Find Driver" />

        <hr />

        <div class="form-group row">
            <label class="col-md-36">Owner/Driver:</label>
            <div class="col-md-64">
                <span id="ownerName" name="ownerName"></span>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-md-36"></label>
            <div class="col-md-64">
                <span id="ownerAddress" name="ownerAddress"></span>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-md-36"></label>
            <div class="col-md-64">
                <span id="ownerCityState" name="ownerCityState"></span>
            </div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36 top-padding">Make:</label>
            <div class="col-md-64"><span name="manufacturer" class="form-control"></span></div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36 top-padding">Model:</label>
            <div class="col-md-64"><span name="model" class="form-control"></span></div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36 top-padding">Year:</label>
            <div class="col-md-64"><span name="yr" class="form-control"></span></div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36 top-padding">Color:</label>
            <div class="col-md-64"><span name="color" class="form-control"></span></div>
        </div>
    </div>

    <hr />

    <p class="text-center">
        <input type="button" name="btnRevokeRegistration"
               class="btn btn-primary" value="Revoke Vehicle Registration" />
    </p>
</form>

<p class="text-center">
    @Html.ActionLink("Vehicles Registrations", "Index", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("Create Vehicle Registration", "Create", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("Vehicle Registration Details", "Details", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("Edit/Update Vehicle Registration", "Edit", null, htmlAttributes: new { @class = "tts-nav" })
</p>

@Scripts.Render("~/bundles/jquery")

<script type="text/javascript">
    $(document).ready(function () {
        $("input[value='Find Vehicle']").on("click", function (event) {
            var drvLicNbr = "";

            $.ajax({
                url:      "/api/Vehicles/" + $("input[name='carId']").val(),
                method:   "GET",
                dataType: "json",
                success: function (data) {
                    $("span[name='tagNbr']").text(data.TagNumber);
                    $("span[name='dln']").text(data.DrvLicNumber);
                    drvLicNbr = data.DrvLicNumber;
                    $("span[name='manufacturer']").text(data.Make);
                    $("span[name='model']").text(data.Model);
                    $("span[name='yr']").text(data.VehicleYear);
                    $("span[name='color']").text(data.Color);

                    $("span[name='ownerName']").text("");
                    $("span[name='ownerAddress']").text("");
                    $("span[name='ownerCityState']").text("");

                    locateDriver();
                } // success
            }); // $.ajax

            $("#btnLocateDriver").on("click", function (event) {
                locateDriver();
            });

            function locateDriver() {
                $.ajax({
                    method: "GET",
                    dataType: "json",
                    url: "/api/Drivers/" + $("span[name='dln']").val(),
                    success: function (data) {
                        $.each(data, function (index, person) {
                            if (person["DrvLicNumber"] === drvLicNbr) {
                                $("span[name='ownerName']").text(person["FirstName"] + " " +
                                    person["LastName"]);
                                $("span[name='ownerAddress']").text(person["Address"]);
                                $("span[name='ownerCityState']").text(person["City"] + ", " +
                                    person["State"] + " " +
                                    person["ZIPCode"]);
                            }
                        });

                    }
                });
            }
        });

        $("input[value='Revoke Vehicle Registration']").on("click", function (event) {
            var car = {
                VehicleId:    $("input[name='carId']").val()
            };
            $.ajax({
                data:   car,
                method: "DELETE",
                url:    "/api/Vehicles/" + $("input[name='carId']").val(),
                success: function (data) {
                    alert("The vehicle registration has been cancelled.")

                    window.location.href = 'Index';
                }
            });
        });
    });
</script>

Click the VehicleController.cs tab
To execute, on the main menu, click Debug -> Start Without Debugging
Click the Vehicles link:
Click the Remove Vehicle link:
In the Vehicle Id text box, type 12
Click the Locate Vehicle button:
Click the Delete Vehicle Registration button:
Click OK on the message box:
Return to your programming environment

Traffic Violations

Introduction

An administration keeps a list of traffic violations. In our application, we will create a webpage that allows a user to see such a list.

Practical Learning: Showing Traffic Violations

In the Solution Explorer, right-click Controllers -> Add -> Controller...
In the left list of the Add New Scaffolded Item dialig box, click Web API
In the middle list, click Web API 2 Controller With Actions, Using Entity Framework:
Click Add
In the Model Class combo box, select TrafficViolation (TrafficTicketsSystem1.Models)

Make sure the Data Context Class is displaying TicketsManagementModel (TrafficTicketsSystem11.Models).
Make sure the Controller Name is displaying TrafficViolationsController:

Click Add:

using System.Data.Entity;
using System.Data.Entity.Infrastructure;
using System.Linq;
using System.Net;
using System.Web.Http;
using System.Web.Http.Description;
using TrafficTicketsSystem11.Models;

namespace TrafficTicketsSystem11.Controllers
{
    public class TrafficViolationsController : ApiController
    {
        private TicketsManagementModel db = new TicketsManagementModel();

        // GET: api/TrafficViolations
        public IQueryable<TrafficViolation> GetTrafficViolations()
        {
            return db.TrafficViolations;
        }

        // GET: api/TrafficViolations/5
        [ResponseType(typeof(TrafficViolation))]
        public IHttpActionResult GetTrafficViolation(int id)
        {
            TrafficViolation trafficViolation = db.TrafficViolations.Find(id);
            if (trafficViolation == null)
            {
                return NotFound();
            }

            return Ok(trafficViolation);
        }

        // PUT: api/TrafficViolations/5
        [ResponseType(typeof(void))]
        public IHttpActionResult PutTrafficViolation(int id, TrafficViolation trafficViolation)
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }

            if (id != trafficViolation.TrafficViolationId)
            {
                return BadRequest();
            }

            db.Entry(trafficViolation).State = EntityState.Modified;

            try
            {
                db.SaveChanges();
            }
            catch (DbUpdateConcurrencyException)
            {
                if (!TrafficViolationExists(id))
                {
                    return NotFound();
                }
                else
                {
                    throw;
                }
            }

            return StatusCode(HttpStatusCode.NoContent);
        }

        // POST: api/TrafficViolations
        [ResponseType(typeof(TrafficViolation))]
        public IHttpActionResult PostTrafficViolation(TrafficViolation trafficViolation)
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }

            db.TrafficViolations.Add(trafficViolation);
            db.SaveChanges();

            return CreatedAtRoute("DefaultApi", new { id = trafficViolation.TrafficViolationId }, trafficViolation);
        }

        // DELETE: api/TrafficViolations/5
        [ResponseType(typeof(TrafficViolation))]
        public IHttpActionResult DeleteTrafficViolation(int id)
        {
            TrafficViolation trafficViolation = db.TrafficViolations.Find(id);
            if (trafficViolation == null)
            {
                return NotFound();
            }

            db.TrafficViolations.Remove(trafficViolation);
            db.SaveChanges();

            return Ok(trafficViolation);
        }

        protected override void Dispose(bool disposing)
        {
            if (disposing)
            {
                db.Dispose();
            }
            base.Dispose(disposing);
        }

        private bool TrafficViolationExists(int id)
        {
            return db.TrafficViolations.Count(e => e.TrafficViolationId == id) > 0;
        }
    }
}

In the Solution Explorer, right-click Controllers -> Add -> New Scaffolded Item...
In the left list of the Add New Scaffolded Item dialog box, click MVC and, in the middle list, click MVC 5 Controller With Read/Write Actions:
Click Add
Replace Default with TrafficViolation to get TrafficViolationController
click Add

Change the TrafficViolationController class as follows:

using System.Web.Mvc;

namespace TrafficTicketsSystem11.Controllers
{
    public class TrafficViolationController : Controller
    {
        // GET: TrafficViolation
        public ActionResult Index()
        {
            return View();
        }

        // GET: TrafficViolation/Details/5
        public ActionResult Details(int? id)
        {
            return View();
        }

        // GET: TrafficViolation/Create
        public ActionResult Create()
        {
            return View();
        }

        // POST: TrafficViolation/Create
        [HttpPost]
        public ActionResult Create(FormCollection collection)
        {
            try
            {
                // TODO: Add insert logic here

                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }

        // GET: TrafficViolation/Edit/5
        public ActionResult Edit(int? id)
        {
            return View();
        }

        // POST: TrafficViolation/Edit/5
        [HttpPost]
        public ActionResult Edit(int? id, FormCollection collection)
        {
            try
            {
                // TODO: Add update logic here

                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }

        // GET: TrafficViolation/Delete/5
        public ActionResult Delete(int? id)
        {
            return View();
        }

        // POST: TrafficViolation/Delete/5
        [HttpPost]
        public ActionResult Delete(int? id, FormCollection collection)
        {
            try
            {
                // TODO: Add delete logic here

                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }

        // GET: TrafficViolation/CitationMessage/5
        public ActionResult CitationMessage(int? id)
        {
            return View();
        }
    }
}

In the class, right-click Index() -> Add View...
In the Add New Scaffolded Item dialog box, make sure MVC 5 View is selected:
Click Add
In the Add View dialog box, make sure the View Name text box is displaying Index
Click Add

Create the webpage as follows:

@{
    ViewBag.Title = "Traffic Violations";
}

<h2 class="text-center fw-bold common-font">Traffic Violations</h2>

<table class="table table-striped common-font">
    <tr>
        <th class="fw-bold text-center">Violation Id</th>
        <th class="fw-bold text-center">Traffic Violation #</th>
        <th class="fw-bold text-center">Camera #</th>
        <th class="fw-bold text-center">Tag #</th>
        <th class="fw-bold">Violation</th>
        <th class="fw-bold text-center">Date</th>
        <th class="fw-bold text-center">Time</th>
        <th class="fw-bold text-center">Photo Available</th>
        <th class="fw-bold text-center">Video Available</th>
        <th class="fw-bold">Payment Due Date</th>
        <th class="fw-bold">Payment Date</th>
        <th class="fw-bold">Payment Amount</th>
        <th class="fw-bold">Payment Status</th>
    </tr>
</table>

<hr />

<p class="text-center">
    @Html.ActionLink("New Traffic Violation", "Create", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("Traffic Violation Details", "Details", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("Edit/Update Traffic Violation", "Edit", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("Delete/Cancel Traffic Violation", "Delete", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("Review Citation Message", "CitationMessage", null, htmlAttributes: new { @class = "tts-nav" })
</p>

@Scripts.Render("~/bundles/jquery")

<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            method: "GET",
            dataType: "json",
            url: "/api/TrafficViolations",
            success: function (data) {
                $.each(data, function (index, ticket) {
                    $(".table-striped").append("<tr>"     +
                        "<td class='text-center'>" + ticket["TrafficViolationId"]     + "</td>" +
                        "<td class='text-center'>" + ticket["TrafficViolationNumber"] + "</td>" +
                        "<td class='text-center'>" + ticket["CameraNumber"]           + "</td>" +
                        "<td class='text-center'>" + ticket["TagNumber"]              + "</td>" +
                        "<td>"                     + ticket["ViolationName"]          + "</td>" +
                        "<td class='text-center'>" + ticket["ViolationDate"]          + "</td>" +
                        "<td class='text-center'>" + ticket["ViolationTime"]          + "</td>" +
                        "<td class='text-center'>" + ticket["PhotoAvailable"]         + "</td>" +
                        "<td class='text-center'>" + ticket["VideoAvailable"]         + "</td>" +
                        "<td>"                     + ticket["PaymentDueDate"]         + "</td>" +
                        "<td>"                     + ticket["PaymentDate"]            + "</td>" +
                        "<td>"                     + ticket["PaymentAmount"]          + "</td>" +
                        "<td>"                     + ticket["PaymentStatus"]          + "</td></tr>");
                });
            }
        });
    });
</script>

Click the TrafficViolationController.cs tab

Creating a Traffic Violation

A traffic violation is a process with many steps. To start, when an infraction has been committed, a user must create a record. We will start such a process with an appropriate webform.

Practical Learning: Creating a Traffic Violation

In the TrafficViolationController class, right-click one of the Create() methods and click Add View...
In the Add New Scaffolded Item dialog box, make sure MVC 5 View is selected:
Click Add
In the Add View dialog box, make sure the View Name text box is displaying Create
Click Add

Change the document as follows:

@{
    ViewBag.Title = "Create Traffic Ticket";
}

<h2 class="text-center fw-bold common-font">Traffic Violation - New Traffic Ticket</h2>

<hr />

<form name="frmCreateTrafficViolation" method="post">
    <div class="box-holder common-font">
        <div class="form-group row">
            <label for="trafViolNbr" class="col-md-36 top-padding">Traffic Violation #:</label>
            <div class="col-md-64"><input type="text" id="trafViolNbr" class="form-control" /></div>
        </div>

        <hr />

        <div class="form-group row">
            <label for="cameraNumber" class="col-md-36 top-padding">Camera #:</label>
            <div class="col-md-64">
                <input type="text" id="cameraNumber" class="form-control camera-number" />
            </div>
        </div>
        <div class="form-group row">
            <label class="col-md-36 top-padding">Camera Details:</label>
            <div class="col-md-64">
                <span id="cameraDetails" class="camera-details"></span>
            </div>
        </div>

        <hr />

        <div class="form-group row">
            <label for="vehicleTagNbr" class="col-md-36 top-padding">Vehicle Tag #:</label>
            <div class="col-md-64">
                <input type="text" id="vehicleTagNbr" class="form-control vehicle-tag-number" />
            </div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36">Vehicle Details:</label>
            <div class="col-md-64">
                <span id="vehicleDetails" name="vehicleDetails"></span>
            </div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36">Owner/Driver:</label>
            <div class="col-md-64">
                <span id="ownerName" name="ownerName"></span>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-md-36"></label>
            <div class="col-md-64">
                <span id="ownerAddress" name="ownerAddress"></span>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-md-36"></label>
            <div class="col-md-64">
                <span id="ownerCityState" name="ownerCityState"></span>
            </div>
        </div>

        <hr />

        <div class="form-group row">
            <label for="category" class="col-md-36 top-padding">Violation Type:</label>
            <div class="col-md-64">
                <select id="category" class="form-control"></select>
            </div>
        </div>

        <hr />

        <div class="form-group row">
            <label for="county" class="col-md-36 top-padding">Violation Date:</label>
            <div class="col-md-64"><input type="date" id="trafficDate" class="form-control" /></div>
        </div>

        <hr />

        <div class="form-group row">
            <label for="trafficTime" class="col-md-36 top-padding">Violation Time:</label>
            <div class="col-md-64"><input type="time" id="trafficTime" class="form-control" /></div>
        </div>

        <hr />

        <div class="form-group row">
            <label for="photo" class="col-md-36 top-padding">Photo Available:</label>
            <div class="col-md-64">
                <select id="photo" class="form-control">
                    <option value="No">No</option>
                    <option value="Yes">Yes</option>
                </select>
            </div>
        </div>

        <hr />

        <div class="form-group row">
            <label for="photo" class="col-md-36 top-padding">Video Available:</label>
            <div class="col-md-64">
                <select id="video" class="form-control">
                    <option value="No">No</option>
                    <option value="Yes">Yes</option>
                </select>
            </div>
        </div>

        <hr />

        <div class="form-group row">
            <label for="pdd" class="col-md-36 top-padding">Payment Due Date:</label>
            <div class="col-md-64"><input type="date" id="pdd" class="form-control" /></div>
        </div>

        <hr />

        <div class="form-group row">
            <label for="pmtDate" class="col-md-36 top-padding">Payment Date:</label>
            <div class="col-md-64"><input type="date" id="pmtDate" class="form-control" /></div>
        </div>

        <hr />

        <div class="form-group row">
            <label for="pmtAmt" class="col-md-36 top-padding">Payment Amount:</label>
            <div class="col-md-64"><input type="text" id="pmtAmt" class="form-control" /></div>
        </div>

        <hr />

        <div class="form-group row">
            <label for="pmtStatus" class="col-md-36 top-padding">Video Available:</label>
            <div class="col-md-64">
                <select id="pmtStatus" class="form-control">
                    <option value="Pending">Pending</option>
                    <option value="Rejected">Rejected</option>
                    <option value="Cancelled">Cancelled</option>
                    <option value="Paid Late">Paid Late</option>
                    <option value="Paid On Time">Paid On Time</option>
                </select>
            </div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36">&nbsp;</label>
            <div class="col-md-64">
                <input type="button" id="btnCreateTicket" class="btn btn-primary" value="Save Traffic Violation" />
            </div>
        </div>
    </div>
</form>

<hr />

<p class="text-center">
    @Html.ActionLink("Traffic Violations", "Index", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("Traffic Violation Details", "Details", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("Edit/Update Traffic Violation", "Edit", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("Cancel Traffic Violation", "Delete", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("Review Citation Message", "Citation Message", null, htmlAttributes: new { @class = "tts-nav" })
</p>

@Scripts.Render("~/bundles/jquery")

<script type="text/javascript">
    $(document).ready(function () {
        var drvLicNbr = "";

        $.ajax({
            url: "/api/ViolationTypes",
            method: "GET",
            dataType: "json",
            success: function (data) {
                $.each(data, function (index, category) {
                    $("#category").append("<option value = '" + category["ViolationName"] + "'>" +
                        category["ViolationName"] + "</option>");
                });
            }
        });

        $(".camera-number").blur(function (event) {
            $.ajax({
                method: "GET",
                dataType: "json",
                url: "/api/Cameras",
                success: function (data) {
                    $.each(data, function (index, device) {
                        if (device["CameraNumber"] === $(".camera-number").val()) {
                            $(".camera-details").text(device["Make"] + " " +
                                device["Model"] + " (Location: " +
                                device["Location"] + ")");
                        }
                    });
                }
            });
        }); // Camera Number Lost Focus

        $(".vehicle-tag-number").blur(function (event) {
            $.ajax({
                method: "GET",
                dataType: "json",
                url: "/api/Vehicles",
                success: function (data) {
                    $.each(data, function (index, vehicle) {
                        if (vehicle["TagNumber"] === $(".vehicle-tag-number").val()) {
                            drvLicNbr = vehicle["DrvLicNumber"];

                            $("span[name='vehicleDetails']").text(vehicle["Make"] + " " +
                                vehicle["Model"] + " (" +
                                vehicle["VehicleYear"] + ", " + vehicle["Color"] + ")");
                        }
                    });

                    FindOwner();
                }
            });
        }); // Vehicle Tag Number Lost Focus

        function FindOwner() {
            $.ajax({
                method: "GET",
                dataType: "json",
                url: "/api/Drivers/",
                success: function (data) {
                    $.each(data, function (index, person) {
                        if (person["DrvLicNumber"] === drvLicNbr) {
                            $("span[name='ownerName']").text(person["FirstName"] + " " +
                                person["LastName"]);
                            $("span[name='ownerAddress']").text(person["Address"]);
                            $("span[name='ownerCityState']").text(person["City"] + ", " +
                                person["State"] + " " +
                                person["ZIPCode"]);
                        }
                    });

                }
            });
        }

        $("#btnCreateTicket").click(function () {
            var ticket = {
                TrafficViolationNumber: $("#trafViolNbr").val(),
                CameraNumber:           $("#cameraNbr").val(),
                TagNumber:              $("#tagNbr").val(),
                ViolationName:          $("#category").val(),
                ViolationDate:          $("#trafficDate").val(),
                ViolationTime:          $("#trafficTime").val(),
                PhotoAvailable:         $("#photo").val(),
                VideoAvailable:         $("#video").val(),
                PaymentDueDate:         $("#pdd").val(),
                PaymentDate:            $("#pmtDate").val(),
                PaymentAmount:          $("#pmtAmt").val(),
                PaymentStatus:          $("#pmtStatus").val()
            };

            $.ajax({
                method: "POST",
                data: ticket,
                url: "/api/TrafficViolations",
                success: function (data) {
                    alert("A ticket for the traffic violation has been issued.");

                    window.location.href = 'Index';
                }
            });
        });
    });
</script>

Click the TrafficViolationController.cs tab
To execute, on the main menu, click Debug -> Start Without Debugging
Click the Traffic Violations link:
Click the New Traffic Violation link

In the Web controls, enter or select the following values and click the Save button after each:

Traffic Violation #	Camera #	Tag #	Violation Type	Violation Date	Violation Time	Photo Available	Video Available	Payment Due Date	Payment Date	Payment Amount	Payment Status
68469242	MSR-59575	KLT4805	Stop Sign	01/18/2020	09:12 AM	Yes	Yes	02/28/2020	02-27-2020	75	Paid On Time

Click the Save Traffic Violation:
Once again, click the New Traffic Violation link

In the Web controls, enter or select the following values:

29727048

DHT-29417

971384

Speed

02/06/2020

19:04 PM

Yes

04-05-2020

03-31-2020

Paid On Time

Click the Save Traffic Violation button

Return to your programming environment
In the Server Explorer, right-click TrafficTicketsSystem1 and click New Query

In the empty document, type the following code:

INSERT INTO TrafficViolations(TrafficViolationNumber, CameraNumber, TagNumber, ViolationName, 
							  ViolationDate, ViolationTime, PhotoAvailable, VideoAvailable, 
							  PaymentDueDate, PaymentDate, PaymentStatus)
VALUES(N'42717297', N'DGH-38460', N'PER2849', N'Red Light Steady', N'01/31/2020', N'05:15:18', N'Yes', N'No', N'03/10/2020', N'125', N'Pending'),
	  (N'47827081', N'AHR-41518', N'MWH4685', N'Speed',            N'03-31-2020', N'22:07:31', N'Yes', N'No', N'02-28-2020', N'60', N'Pending');
GO
INSERT INTO TrafficViolations(TrafficViolationNumber, CameraNumber, TagNumber, ViolationName, 
							  ViolationDate, ViolationTime, PhotoAvailable, VideoAvailable,
							  PaymentDueDate, PaymentDate, PaymentAmount, PaymentStatus)
VALUES(N'47183148', N'MSR-59575', N'8DE9275', N'Stop Sign', N'01/18/2020', N'14:22:48', N'No', N'Yes', N'03/10/2020', N'03/27/2020', N'90', N'Paid Late');
GO
INSERT INTO TrafficViolations(TrafficViolationNumber, CameraNumber, TagNumber, ViolationName,
							  ViolationDate, ViolationTime, PhotoAvailable, VideoAvailable,
							  PaymentDueDate, PaymentDate, PaymentStatus)
VALUES(N'26850869', N'ELQ-79284', N'KLT4805', N'Speed', N'04-12-2020', N'08:16:22', N'No', N'Yes', N'06-08-2020', N'100', N'Cancelled');
GO
INSERT INTO TrafficViolations(TrafficViolationNumber, CameraNumber, TagNumber, ViolationName,
							  ViolationDate, ViolationTime, PhotoAvailable, VideoAvailable,
							  PaymentDueDate, PaymentDate, PaymentAmount, PaymentStatus)
VALUES(N'37920479', N'HTR-93847', N'PER2849', N'Red Light Flashing',   N'01/28/2020', N'22:14:53', N'No',  N'No',  N'03/02/2020', N'03-01-2020', N'45', N'Rejected'),
	  (N'82424140', N'DGH-38460', N'KAS9314', N'Red Light Right Turn', N'01/31/2020', N'12:30:11', N'Yes', N'No',  N'02-28-2020', N'04-02-2020', N'90', N'Paid Late'),
	  (N'44808258', N'DHT-29417', N'FKEWKR',  N'Speed',                N'03/05/2020', N'16:07:15', N'No',  N'Yes', N'04/22/2020', N'04/15/2020', N'85', N'Paid On Time'),
	  (N'74806976', N'DHT-29417', N'971384',  N'Speed',                N'02/06/2020', N'11:58:06', N'No',  N'Yes', N'04/05/2020', N'03/31/2020', N'85', N'Paid On Time');
GO
INSERT INTO TrafficViolations(TrafficViolationNumber, CameraNumber, TagNumber, ViolationName,
							  ViolationDate, ViolationTime, PhotoAvailable, VideoAvailable,
							  PaymentDueDate, PaymentDate, PaymentStatus)
VALUES(N'59718502', N'ELQ-79284', N'8DE9275', N'Speed', N'04-15-2020', N'15:25:53', N'Yes', N'No', N'06/02/2020', N'40', N'Pending');
GO

To execute, on the SQL Editor toolbar, click the Execute button
Close the Query window
When asked whether you want to save, click No
Click the TrafficViolationController.cs tab

Reviewing a Traffic Violation

At any time, a user may want to review the details of a traffic violation. To help the user get such information, we will create a form.

Practical Learning: Viewing the Details of a Vehicle

In the TrafficViolationController class, right-click inside the Details() method and click Add View...
In the Add New Scaffolded Item dialog box, make sure MVC 5 View is selected:
Click Add
In the Add View dialog box, make sure the View Name text box is displaying Details
Click Add

Change the document as follows:

@{
    ViewBag.Title = "Violation/Infraction Details";
}

<h2 class="text-center fw-bold common-font">Violation/Infraction Details</h2>

<hr />

<form name="frmDetailsTrafficViolation" method="post">
    <div class="box-holder common-font">
        <div class="form-group row">
            <label for="cameraId" class="col-md-36 top-padding">Violation Id:</label>
            <div class="col-md-2"><input type="text" id="infractionId" class="form-control" /></div>
            <div class="col-md-4">
                <input type="button" id="btnShowViolation"
                       class="btn btn-primary" value="Find Traffic Violation" />
            </div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36 top-padding">Traffic Violation #:</label>
            <div class="col-md-64">
                <span name="traffic-violation-number" class="form-control"></span>
            </div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36 top-padding">Camera:</label>
            <div class="col-md-64"><span name="camera" class="form-control"></span></div>
        </div>

        <input type="hidden" id="btnFindCamera" value="Find Camera" />

        <div class="form-group row">
            <label class="col-md-36">Camera Details:</label>
            <div class="col-md-64">
                <span id="cameraDetails" name="cameraDetails"></span>
            </div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36 top-padding">Vehicle Tag #:</label>
            <div class="col-md-64"><span name="vehicleTagNbr" class="form-control"></span></div>
        </div>

        <input type="hidden" id="btnFindVehicle" value="Find Vehicle" />
        <input type="hidden" id="btnFindOwner" value="Find Owner" />

        <hr />

        <div class="form-group row">
            <label class="col-md-36">Vehicle Details:</label>
            <div class="col-md-64">
                <span id="vehicleDetails" name="vehicleDetails"></span>
            </div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36">Owner/Driver:</label>
            <div class="col-md-64">
                <span id="ownerName" name="ownerName"></span>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-md-36"></label>
            <div class="col-md-64">
                <span id="ownerAddress" name="ownerAddress"></span>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-md-36"></label>
            <div class="col-md-64">
                <span id="ownerCityState" name="ownerCityState"></span>
            </div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36 top-padding">Violation Type:</label>
            <div class="col-md-64"><span name="category" class="form-control"></span></div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36 top-padding">Violation Date:</label>
            <div class="col-md-64"><span name="date-of-infraction" class="form-control"></span></div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36 top-padding">Violation Time:</label>
            <div class="col-md-64"><span name="time-of-infraction" class="form-control"></span></div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36 top-padding">Photo is Available:</label>
            <div class="col-md-64"><span name="steady-photo-available" class="form-control"></span></div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36 top-padding">Video is Available:</label>
            <div class="col-md-64"><span name="streaming-video-available" class="form-control"></span></div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36 top-padding">Payment Due Date:</label>
            <div class="col-md-64"><span name="payment due date" class="form-control"></span></div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36 top-padding">Payment Date:</label>
            <div class="col-md-64"><span name="last-day-payment" class="form-control"></span></div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36 top-padding">Amount Owed:</label>
            <div class="col-md-64"><span name="amount-owed" class="form-control"></span></div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36 top-padding">Payment Status:</label>
            <div class="col-md-64"><span name="payment-status" class="form-control"></span></div>
        </div>
    </div>
</form>

<hr />

<p class="text-center">
    @Html.ActionLink("Traffic Violations", "Index", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("New Traffic Violation", "Create", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("Edit/Update Traffic Violation", "Edit", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("Delete/Cancel Traffic Violation", "Delete", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("Preview Citation Message", "CitationMessage", null, htmlAttributes: new { @class = "tts-nav" })
</p>

@Scripts.Render("~/bundles/jquery")

<script type="text/javascript">
    $(document).ready(function () {
        $(".btn-primary").on("click", function (event) {
            var tagNumber = "";
            var drvLicNbr = "";
            var cameraNumber = "";

            $.ajax({
                method: "GET",
                dataType: "json",
                url: "/api/TrafficViolations/" + $("#infractionId").val(),
                success: function (data) {
                    $("span[name$='traffic-violation-number']").text(data.TrafficViolationNumber);
                    $("span[name$='camera']").text(data.CameraNumber);
                    cameraNumber = data.CameraNumber;
                    $("span[name$='vehicleTagNbr']").text(data.TagNumber);
                    tagNumber = data.TagNumber;
                    $("span[name$='category']").text(data.ViolationName);
                    $("span[name|='date']").text(data.ViolationDate);
                    $("span[name|='time']").text(data.ViolationTime);
                    $("span[name*='photo']").text(data.PhotoAvailable);
                    $("span[name*='video']").text(data.VideoAvailable);
                    $("span[name~='due']").text(data.PaymentDueDate);
                    $("span[name='last-day-payment']").text(data.PaymentDate);
                    $("span[name='amount-owed']").text(data.PaymentAmount);
                    $("span[name='payment-status']").text(data.PaymentStatus);

                    FindCamera();
                    FindVehicle();
                    FindOwner();
                }
            });

            $("#btnFindCamera").on("click", function (event) {
                FindCamera();
            });

            $("#btnFindVehicle").on("click", function (event) {
                FindVehicle();
            });

            $("#btnFindOwner").on("click", function (event) {
                FindOwner();
            });

            function FindCamera() {
                $.ajax({
                    url: "/api/Cameras/",
                    method: "GET",
                    dataType: "json",
                    success: function (data) {
                        $.each(data, function (index, device) {
                            if (device["CameraNumber"] === cameraNumber) {
                                $("span[name='cameraDetails']").text(device.Location + " (" +
                                    device.Make + " " + device.Model + ")");
                            }
                        });
                    }
                });
            }

            function FindVehicle() {
                $.ajax({
                    method: "GET",
                    dataType: "json",
                    url: "/api/Vehicles/",
                    success: function (data) {
                        $.each(data, function (index, vehicle) {
                            if (vehicle["TagNumber"] === tagNumber) {
                                drvLicNbr = vehicle["DrvLicNumber"];
                                $("span[name='vehicleDetails']").text(vehicle["VehicleYear"] + " " +
                                    vehicle["Make"] + " " +
                                    vehicle["Model"] + ", " +
                                    vehicle["Color"]);
                            }
                        });
                    }
                });
            }

            function FindOwner() {
                $.ajax({
                    method: "GET",
                    dataType: "json",
                    url: "/api/Drivers/",
                    success: function (data) {
                        $.each(data, function (index, person) {
                            if (person["DrvLicNumber"] === drvLicNbr) {
                                $("span[name='ownerName']").text(person["FirstName"] + " " +
                                    person["LastName"]);
                                $("span[name='ownerAddress']").text(person["Address"]);
                                $("span[name='ownerCityState']").text(person["City"] + ", " +
                                    person["State"] + " " +
                                    person["ZIPCode"]);
                            }
                        });

                    }
                });
            }
        });
    });
</script>

Click the TrafficViolationController.cs tab
To execute, on the main menu, click Debug -> Start Without Debugging
Click the Traffic Violations link:
Click the Traffic Violation Details link:
In the Violation Id text box, type 9
Click the Find Traffic Violation button:
Return to your programming environment

Updating a Traffic Violation

A traffic violation is like a living document. Any of its information can change any time. To assist the user, we will create a webform that can be used to update the details of a traffic violation.

Practical Learning: Updating a Traffic Violation

In the TrafficViolationController class, right-click one of the Edit() methods -> Add View...
In the Add New Scaffolded Item dialog box, make sure MVC 5 View is selected:
Click Add
In the Add View dialog box, make sure the View Name text box is displaying Edit:
Click Add

Change the document as follows:

@{
    ViewBag.Title = "Edit/Update Violation Details";
}

<h2 class="text-center fw-bold common-font">Edit/Update Violation Details</h2>

<hr />

<form name="frmTrafficViolationDetails" method="post">
    <div class="box-holder common-font">
        <div class="form-group row">
            <label for="infractionId" class="col-md-36 top-padding">Violation Id:</label>
            <div class="col-md-2"><input type="text" id="infractionId" class="form-control" /></div>
            <div class="col-md-4">
                <input type="button" id="btnFindTrafficViolation" 
                       class="btn btn-primary" value="Find Traffic Violation" />
            </div>
        </div>

        <hr />

        <div class="form-group row">
            <label for="trafViolNbr" class="col-md-36 top-padding">Traffic Violation #:</label>
            <div class="col-md-64">
                <input type="text" id="trafficViolationNbr" name="trafficViolationNbr" class="form-control" />
            </div>
        </div>

        <hr />
        <div class="form-group row">
            <label for="cmrNbr" class="col-md-36 top-padding">Camera #:</label>
            <div class="col-md-64">
                <input type="text" id="cameraNumber" name="cameraNumber" class="form-control" />
            </div>
        </div>

        <input type="hidden" id="btnFindCamera" value="Find Camera" />

        <div class="form-group row">
            <label class="col-md-36">Camera Location:</label>
            <div class="col-md-64">
                <span id="cameraDetails" name="cameraDetails"></span>
            </div>
        </div>

        <hr />

        <div class="form-group row">
            <label for="vehicleTagNbr" class="col-md-36 top-padding">Vehicle Tag #:</label>
            <div class="col-md-64">
                <input type="text" id="vehicleTagNbr"
                       name="vehicleTagNbr" class="form-control" />
            </div>
        </div>

        <input type="hidden" id="btnFindVehicle" value="Find Vehicle" />
        <input type="hidden" id="btnFindOwner" value="Find Owner" />

        <hr />

        <div class="form-group row">
            <label class="col-md-36">Vehicle Details:</label>
            <div class="col-md-64">
                <span id="vehicleDetails" name="vehicleDetails"></span>
            </div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36">Owner/Driver:</label>
            <div class="col-md-64">
                <span id="ownerName" name="ownerName"></span>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-md-36"></label>
            <div class="col-md-64">
                <span id="ownerAddress" name="ownerAddress"></span>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-md-36"></label>
            <div class="col-md-64">
                <span id="ownerCityState" name="ownerCityState"></span>
            </div>
        </div>

        <hr />

        <div class="form-group row">
            <label for="category" class="col-md-36 top-padding">Violation Type:</label>
            <div class="col-md-64">
                <select id="category" name="category" class="form-control">
                    <option value="Unknown"></option>
                </select>
            </div>
        </div>

        <hr />

        <div class="form-group row">
            <label for="county" class="col-md-36 top-padding">Violation Date:</label>
            <div class="col-md-64">
                <input id="violationDate" name="violationDate" class="form-control" />
            </div>
        </div>

        <hr />

        <div class="form-group row">
            <label for="trafficTime" class="col-md-36 top-padding">Violation Time:</label>
            <div class="col-md-64">
                <input type="time" id="violationTime" name="violationTime" class="form-control" />
            </div>
        </div>

        <hr />

        <div class="form-group row">
            <label for="photo" class="col-md-36 top-padding">Photo Available:</label>
            <div class="col-md-64">
                <select id="photo" name="photoAvailable" class="form-control">
                    <option value="No">No</option>
                    <option value="Yes">Yes</option>
                </select>
            </div>
        </div>

        <hr />

        <div class="form-group row">
            <label for="photo" class="col-md-36 top-padding">Video Available:</label>
            <div class="col-md-64">
                <select id="video" name="videoAvailable" class="form-control">
                    <option value="No">No</option>
                    <option value="Yes">Yes</option>
                </select>
            </div>
        </div>

        <hr />

        <div class="form-group row">
            <label for="pdd" class="col-md-36 top-padding">Payment Due Date:</label>
            <div class="col-md-64">
                <input id="paymentDueDate" name="paymentDueDate" class="form-control" />
            </div>
        </div>

        <hr />

        <div class="form-group row">
            <label for="pmtDate" class="col-md-36 top-padding">Payment Date:</label>
            <div class="col-md-64">
                <input id="paymentDate" name="paymentDate" class="form-control" />
            </div>
        </div>

        <hr />

        <div class="form-group row">
            <label for="pmtAmt" class="col-md-36 top-padding">Payment Amount:</label>
            <div class="col-md-64">
                <input type="text" id="paymentAmt" name="paymentAmt" class="form-control" />
            </div>
        </div>

        <hr />

        <div class="form-group row">
            <label for="pmtStatus" class="col-md-36 top-padding">Payment Status:</label>
            <div class="col-md-64">
                <select id="paymentStatus" name="paymentStatus" class="form-control">
                    <option value="Pending">Pending</option>
                    <option value="Rejected">Rejected</option>
                    <option value="Cancelled">Cancelled</option>
                    <option value="Paid Late">Paid Late</option>
                    <option value="Paid On Time">Paid On Time</option>
                </select>
            </div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36 top-padding">&nbsp;</label>
            <div class="col-md-64">
                <input type="button" id="btnUpdateViolation"
                       class="btn btn-primary" value="Update Violation/Ticket Details" />
            </div>
        </div>
    </div>
</form>

<hr />

<p class="text-center">
    @Html.ActionLink("Traffic Violations", "Index", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("Process New Violation", "Create", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("Traffic Violation Details", "Details", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("Scrap Traffic Violation", "Delete", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("Review Citation Message", "CitationMessage", null, htmlAttributes: new { @class = "tts-nav" })
</p>

@Scripts.Render("~/bundles/jquery")

<script type="text/javascript">
    $(document).ready(function () {
        $("#btnFindTrafficViolation").on("click", function (event) {
            var tagNumber = "";
            var drvLicNbr = "";
            var cameraNumber = "";

            $.ajax({
                method: "GET",
                dataType: "json",
                url: "/api/TrafficViolations/" + $("#infractionId").val(),
                success: function (data) {
                    $("input[name='trafficViolationNbr']").val(data.TrafficViolationNumber);
                    $("input[name$='cameraNumber']").val(data.CameraNumber);
                    cameraNumber = data.CameraNumber;
                    $("input[name$='vehicleTagNbr']").val(data.TagNumber);
                    tagNumber = data.TagNumber;
                    $("select[name$='category']").val(data.ViolationName);
                    $("input[name|='violationDate']").val(data.ViolationDate);
                    $("input[name|='violationTime']").val(data.ViolationTime);
                    $("select[name*='photoAvailable']").val(data.PhotoAvailable);
                    $("select[name*='videoAvailable']").val(data.VideoAvailable);
                    $("input[name~='paymentDueDate']").val(data.PaymentDueDate);
                    $("input[name='paymentDate']").val(data.PaymentDate);
                    $("input[name='paymentAmt']").val(data.PaymentAmount);
                    $("select[name='paymentStatus']").val(data.PaymentStatus);

                    FindCamera();
                    FindVehicle();
                    FindOwner();
                }
            });

            $("#btnFindCamera").on("click", function (event) {
                FindCamera();
            });

            function FindCamera() {
                $.ajax({
                    method: "GET",
                    dataType: "json",
                    url: "/api/Cameras/",
                    success: function (data) {
                        $.each(data, function (index, device) {
                            if (device["CameraNumber"] === cameraNumber) {
                                $("span[name='cameraDetails']").text(device.Location + " (" +
                                    device.Make + " " + device.Model + ")");
                            }
                        });
                    }
                });
            }

            function FindVehicle() {
                $.ajax({
                    method: "GET",
                    dataType: "json",
                    url: "/api/Vehicles/",
                    success: function (data) {
                        $.each(data, function (index, vehicle) {
                            if (vehicle["TagNumber"] === tagNumber) {
                                drvLicNbr = vehicle["DrvLicNumber"];
                                $("span[name='vehicleDetails']").text(vehicle["VehicleYear"] + " " +
                                    vehicle["Make"] + " " +
                                    vehicle["Model"] + ", " +
                                    vehicle["Color"]);
                            }
                        });
                    }
                });
            }

            function FindOwner() {
                $.ajax({
                    method: "GET",
                    dataType: "json",
                    url: "/api/Drivers/",
                    success: function (data) {
                        $.each(data, function (index, person) {
                            if (person["DrvLicNumber"] === drvLicNbr) {
                                $("span[name='ownerName']").text(person["FirstName"] + " " +
                                    person["LastName"]);
                                $("span[name='ownerAddress']").text(person["Address"]);
                                $("span[name='ownerCityState']").text(person["City"] + ", " +
                                    person["State"] + " " +
                                    person["ZIPCode"]);
                            }
                        });

                    }
                });
            }

            $.ajax({
                url: "/api/ViolationTypes",
                method: "GET",
                dataType: "json",
                success: function (data) {
                    $.each(data, function (index, category) {
                        $("#category").append("<option value = '" + category["ViolationName"] + "'>" +
                            category["ViolationName"] + "</option>");
                    });
                }
            });
        });

        $("input[name$='cameraNumber']").blur(function (event) {
            $.ajax({
                method: "GET",
                dataType: "json",
                url: "/api/Cameras/",
                success: function (data) {
                    $.each(data, function (index, device) {
                        if (device["CameraNumber"] === $("#cameraNumber").val()) {
                            $("span[name='cameraDetails']").text(device.Location + " (" +
                                device.Make + " " + device.Model + ")");
                        }
                    });
                }
            });
        }); // Camera Number Lost Focus

        $("input[name$='vehicleTagNbr']").blur(function (event) {
            var drvLicNbr = "";

            $.ajax({
                method: "GET",
                dataType: "json",
                url: "/api/Vehicles/",
                success: function (data) {
                    $.each(data, function (index, vehicle) {
                        if (vehicle["TagNumber"] === $("input[name$='vehicleTagNbr']").val()) {
                            drvLicNbr = vehicle["DrvLicNumber"];
                            $("span[name='vehicleDetails']").text(vehicle["VehicleYear"] + " " +
                                vehicle["Make"] + " " +
                                vehicle["Model"] + ", " +
                                vehicle["Color"]);
                        }
                    });
                }
            });

            $.ajax({
                method: "GET",
                dataType: "json",
                url: "/api/Drivers/",
                success: function (data) {
                    $.each(data, function (index, person) {
                        if (person["DrvLicNumber"] === drvLicNbr) {
                            $("span[name='ownerName']").text(person["FirstName"] + " " +
                                person["LastName"]);
                            $("span[name='ownerAddress']").text(person["Address"]);
                            $("span[name='ownerCityState']").text(person["City"] + ", " +
                                person["State"] + " " +
                                person["ZIPCode"]);
                        }
                    });

                }
            });
        }); // Vehicle Tag Number Lost Focus

        $("#btnUpdateViolation").click(function (event) {
            var ticket = {
                TrafficViolationNumber: $("input[name='trafficViolationNbr']").val(),
                TrafficViolationId:     $("#infractionId").val(),
                CameraNumber: $("input[name$='cameraNumber']").val(),
                TagNumber: $("input[name$='vehicleTagNbr']").val(),
                ViolationName: $("select[name$='category']").val(),
                ViolationDate: $("input[name|='violationDate']").val(),
                ViolationTime: $("input[name|='violationTime']").val(),
                PhotoAvailable: $("select[name*='photoAvailable']").val(),
                VideoAvailable: $("select[name*='videoAvailable']").val(),
                PaymentDueDate: $("input[name~='paymentDueDate']").val(),
                PaymentDate: $("input[name='paymentDate']").val(),
                PaymentAmount: $("input[name='paymentAmt']").val(),
                PaymentStatus: $("select[name='paymentStatus']").val()
            };
            $.ajax({
                data: ticket,
                method: "PUT",
                url: "/api/TrafficViolations/" + $("#infractionId").val(),
                success: function (data) {
                    alert("The information about the violation has been updated.")

                    window.location.href = 'Index';
                }
            });
        });
    });
</script>

Click the TrafficViolationController.cs tab
To execute, on the main menu, click Debug -> Start Without Debugging
Click the Traffic Violations link:
Click the Edit/Update Traffic Violation link:
In the Violation Id text box, type 9
Click the Find Traffic Violation button:
In the Violation Id text box, change the value to 3
Click the Find Vehicle button:

Change the information of some of the Vehicles as follows:

Traffic Violation #:  400004
Camera #:             DHT-29417
Vehicle Tag #:        MWH4685
Violation Type:       Red Light Right Turn
Violation Date:       01/22/2025
Violation Time:       10:26 PM
Photo Available:      No
Video Available:      Yes
Payment Due Date:     02/24/2025
Payment Date:         03/31/2025
Payment Amount:       155
Payment Status:       Paid On Time

Click the Updare Violation/Ticket Details:
Return to your programming environment

Deleting a Traffic Violation

For some a reason, an application can decide to cancel or delete a traffic violation. When this happen, we will equip our application with a form that can be used to delete a traffic violation.

Practical Learning: Deleting a Traffic Violation

In the TrafficViolationController class, right-click one of the Delete() methods and click Add View...
In the Add New Scaffolded Item dialog box, make sure MVC 5 View is selected:
Click Add
In the Add View dialog box, make sure the View Name text box is displaying Delete:
Click Add

Change the document as follows:

@{
    ViewBag.Title = "Delete Traffic Violation";
}

<h2 class="text-center fw-bold common-font">Delete Traffic Violation</h2>

<hr />

<form name="frmTrafficViolationDeletion" method="post">
    <div class="box-holder common-font">
        <div class="form-group row">
            <label for="cameraId" class="col-md-36 top-padding">Violation Id:</label>
            <div class="col-md-32"><input type="text" id="infractionId" class="form-control" /></div>
            <div class="col-md-32">
                <input type="button" id="btnShowViolation" class="btn btn-primary finding" value="Show the Violation" />
            </div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36 top-padding">Traffic Violation #:</label>
            <div class="col-md-64"><span name="traffic-violation-number" class="form-control"></span></div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36 top-padding">Camera:</label>
            <div class="col-md-64"><span name="camera" class="form-control"></span></div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36 top-padding">Vehicle Tag #:</label>
            <div class="col-md-64"><span name="vehicle" class="form-control"></span></div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36 top-padding">Violation Type:</label>
            <div class="col-md-64"><span name="vioType" class="form-control"></span></div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36 top-padding">Violation Date:</label>
            <div class="col-md-64"><span name="date-of-infraction" class="form-control"></span></div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36 top-padding">Violation Time:</label>
            <div class="col-md-64"><span name="time-of-infraction" class="form-control"></span></div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36 top-padding">Photo is Available:</label>
            <div class="col-md-64"><span name="steady-photo-available" class="form-control"></span></div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36 top-padding">Video is Available:</label>
            <div class="col-md-64"><span name="streaming-video-available" class="form-control"></span></div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36 top-padding">Payment Due Date:</label>
            <div class="col-md-64"><span name="payment due date" class="form-control"></span></div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36 top-padding">Payment Date:</label>
            <div class="col-md-64"><span name="last-day-payment" class="form-control"></span></div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36 top-padding">Amount Owed:</label>
            <div class="col-md-64"><span name="amount-owed" class="form-control"></span></div>
        </div>

        <hr />

        <div class="form-group row">
            <label class="col-md-36 top-padding">Payment Status:</label>
            <div class="col-md-64"><span name="payment-status" class="form-control"></span></div>
        </div>

        <hr />

        <h3 class="common-font text-center">Are you sure you want to delete or cancel this citation?</h3>

        <div class="form-actions no-color text-center">
            <input type="submit" value="Delete Traffic Violation" class="btn btn-primary deletion" />
        </div>
    </div>
</form>

<hr />

<p class="text-center">
    @Html.ActionLink("Traffic Violations", "Index", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("New Traffic Violation", "Create", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("Traffic Violation Details", "Details", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("Edit/Update Traffic Violation", "Edit", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("Preview Citation Message", "Citation Messasge", null, htmlAttributes: new { @class = "tts-nav" })
</p>

@Scripts.Render("~/bundles/jquery")

<script type="text/javascript">
    $(document).ready(function () {
        $(".finding").on("click", function (event) {
            $.ajax({
                method:   "GET",
                dataType: "json",
                url:      "/api/TrafficViolations/" + $("#infractionId").val(),
                success: function (data) {
                    $("span[name$='traffic-violation-number']").text(data.TrafficViolationNumber);
                    $("span[name$='camera']").text(data.CameraNumber);
                    $("span[name$='vehicle']").text(data.TagNumber);
                    $("span[name$='vioType']").text(data.ViolationName);
                    $("span[name|='date']").text(data.ViolationDate);
                    $("span[name|='time']").text(data.ViolationTime);
                    $("span[name*='photo']").text(data.PhotoAvailable);
                    $("span[name*='video']").text(data.VideoAvailable);
                    $("span[name~='due']").text(data.PaymentDueDate);
                    $("span[name='last-day-payment']").text(data.PaymentDate);
                    $("span[name='amount-owed']").text(data.PaymentAmount);
                    $("span[name='payment-status']").text(data.PaymentStatus);
                }
            });
        });

        $(".deletion").click(function (event) {
            var citation = {
                TrafficViolationId: $("#infractionId").val()
            };

            $.ajax({
                method:                 "DELETE",
                url:                    "/api/TrafficViolations/" + $("#infractionId").val(),
                data:                   citation,
                success: function (data) {
                    alert("The traffic violation has been deleted.")

                    window.location.href = 'Index';
                }
            });
        });
    });
</script>

Click the TrafficViolationController.cs tab
To execute, on the main menu, click Debug -> Start Without Debugging
Click the Traffic Violations link:
Click the Delete Traffic Violation link:
In the Violation Id text box, type 7
Click the Find Traffic Violation button:
Click the Delete Traffic Violation button:
Click OK on the message box:
Return to your programming environment

A Traffic Violation Message

When a road traffic violation has been committed and registered, a message (or citation) can be sent to the driver. It is a document that contains various pieces of information. We will create such a message as a webpage in our application.

Practical Learning: Creating a Traffic Violation Message

In the TrafficViolationController class, right-click any part of the CitationMessage() method -> Add -> View...
In the Add New Scaffolded Item dialog box, make sure MVC 5 View is selected:
Click Add
In the Add View dialog box, make sure the View Name text box is displaying CitationMessage.
Click Add

Change the document as follows:

@{
    ViewBag.Title = "Citation Message";
}

<h2 class="text-center fw-bold common-font">Citation Message</h2>

<form name="TrafficViolations" method="post">
    <div class="box-holder common-font">
        <div class="form-group row">
            <label for="cameraId" class="col-md-36 top-padding">Violation Id:</label>
            <div class="col-md-32"><input type="text" id="infractionId" class="form-control" /></div>
            <div class="col-md-32">
                <input type="button" id="btnPreviewCitation" class="btn btn-primary" value="Preview the Citation" />
            </div>
        </div>
    </div>

    <hr />

    <div class="common-font">
        <h3 class="fw-bold text-center">City of Jamies Town</h3>
        <h6 class="text-center fw-bold">6824 Cochran Ave, Ste 318<br />Jamies Town, MD 20540</h6>

        <hr />

        <div class="row">
            <div class="col-md-64">
                <table>
                    <tr>
                        <td style="width: 200px"><h6 class="fw-bold">Citation #:</h6></td>
                        <td><span name="traffic-violation-number"></span></td>
                    </tr>
                    <tr>
                        <td><h6 class="fw-bold">Camera #:</h6></td>
                        <td><span name="camera-number"></span></td>
                    </tr>
                    <tr>
                        <td><h6 class="fw-bold">Camera Location:</h6></td>
                        <td><span name="camera-location"></span></td>
                    </tr>
                    <tr>
                        <td><h6 class="fw-bold">Violation Type:</h6></td>
                        <td><span name="violation-name"></span> Violation</td>
                    </tr>
                </table>

                <hr />

                <h5 class="fw-bold">Vehicle</h5>

                <table>
                    <tr>
                        <td style="width: 200px"><h6 class="fw-bold">Tag #:</h6></td>
                        <td><span name="tag-number"></span></td>
                    </tr>
                    <tr>
                        <td><h6 class="fw-bold">Description:</h6></td>
                        <td><span name="vehicle-identification"></span></td>
                    </tr>
                </table>

                <hr />

                <h5 class="fw-bold">Registered Owner</h5>

                <table>
                    <tr>
                        <td style="width: 200px"><h6 class="fw-bold">Driver's License #:</h6></td>
                        <td><span name="drivers-license-number"></span></td>
                    </tr>
                    <tr>
                        <td><h6 class="fw-bold">Registered To:</h6></td>
                        <td><span name="driver-name"></span></td>
                    </tr>
                    <tr>
                        <td><h6 class="fw-bold">Address:</h6></td>
                        <td><span name="driver-address"></span></td>
                    </tr>
                </table>

                <hr />

                <p>Our records indicate that on <span class="fw-bold" name="violation-date"></span> at <span name="violation-time" class="fw-bold"></span>, at <span name="camera-location" class="fw-bold"></span>, the above mentioned vehicle committed a <span class="fw-bold" name="violation-name"></span> violation.</p>

                <p>If you recognize the traffic violation, please pay $<span name="payment-amount" class="fw-bold"></span> by <span name="payment-due-date" class="fw-bold"></span>. Failure to pay the amount by that date will result in an increase of the fine and could result in the suspension of your driving priviledges. If you dispute the violation, to eventually appear in court, please fill out the form on the back of this document and send it back to us.</p>
            </div>
            <div class="col-md-36 top-padding">
                <p><span name="photo-video"></span></p>
            </div>
        </div>
    </div>
</form>

<hr />

<p class="text-center">
    @Html.ActionLink("Traffic Violations", "Index", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("New Traffic Violation", "Create", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("Traffic Violation Details", "Details", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("Edit/Update Traffic Violation", "Edit", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("Delete/Cancel Traffic Violation", "Delete", null, htmlAttributes: new { @class = "tts-nav" })
</p>

@Scripts.Render("~/bundles/jquery")

<script type="text/javascript">
    $(document).ready(function () {
        var cameraNbr = "";
        var drvLicNbr = "";
        var vehicleTagNbr = "";

        var getPhotoVideoOptions = function(photo, video) {
            var sentence = "";
            var pvAvailable = "No";

            if (photo === "Yes") {
                if (video === "Yes") {
                    pvAvailable = "Yes";
                    sentence = "To view the photo and/or video";
                } else {
                    pvAvailable = "Yes";
                    sentence = "To see a photo";
                }
            } else { // if (photo === "No")
                if (video === "Yes") {
                    pvAvailable = "Yes";
                    sentence = "To review a video";
                } else {
                    pvAvailable = "No";
                }
            }

            if (pvAvailable === "No")
                return "There is no photo or video available of this infraction but the violation was committed.";
            else
                return sentence + " of this violation, please access http://www.trafficviolationsmedia.com. In the form, enter the citation number and click Submit.";
        }

        $(".btn-primary").on("click", function (event) {
            $.ajax({
                method:   "GET",
                dataType: "json",
                url:      "/api/TrafficViolations/" + $("#infractionId").val(),
                success: function (data) {
                    $("span[name$='traffic-violation-number']").text(data.TrafficViolationNumber);
                    $("span[name$='violation-name']").text(data.ViolationName);
                    $("span[name$='camera-number']").text(data.CameraNumber);
                    cameraNbr = data.CameraNumber;
                    $("span[name$='tag-number']").text(data.TagNumber);
                    vehicleTagNbr = data.TagNumber;
                    $("span[name|='violation-date']").text(data.ViolationDate);
                    $("span[name|='violation-time']").text(data.ViolationTime);
                    $("span[name='payment-amount']").text(data.PaymentAmount);
                    $("span[name~='payment-due-date']").text(data.PaymentDueDate);

                    $("span[name$='photo-video']").text(getPhotoVideoOptions(data.PhotoAvailable, data.VideoAvailable));
                }
            });

            $.ajax({
                method:   "GET",
                dataType: "json",
                url:      "/api/Cameras",
                success: function (data) {
                    $.each(data, function (index, camera) {
                        if (camera["CameraNumber"] === cameraNbr) {
                            $("span[name|='camera-location']").text(camera["Location"]);
                        }
                    });
                }
            });

            $.ajax({
                method:   "GET",
                dataType: "json",
                url:      "/api/Vehicles",
                success: function (data) {
                    $.each(data, function (index, vehicle) {
                        if (vehicle["TagNumber"] === vehicleTagNbr) {
                            $("span[name$='drivers-license-number']").text(vehicle["DrvLicNumber"]);
                            drvLicNbr = vehicle["DrvLicNumber"];
                            $("span[name$='vehicle-identification']").text(vehicle["VehicleYear"] + ", " +
                                                                           vehicle["Make"] + " " +
                                                                           vehicle["Model"] + ", " +
                                                                           vehicle["Color"]);
                        }
                    });
                }
            });

            $.ajax({
                method: "GET",
                dataType: "json",
                url: "/api/Drivers",
                success: function (data) {
                    $.each(data, function (index, person) {
                        if (person["DrvLicNumber"] === drvLicNbr) {
                            $("span[name$='driver-name']").text(person["FirstName"] + " " +
                                                                person["LastName"]);
                            $("span[name$='driver-address']").text(person["Address"] + " " +
                                person["City"] + ", " +
                                person["State"] + " " +
                                person["ZIPCode"]);
                        }
                    });
                }
            });
        });
    });
</script>

Click the TrafficViolationController.cs tab
To execute the application to test it, on the main menu, click Debug and click Start Without Debugging
Click the Traffic Violations link
Click the bottom Review Citation Message link
In the Violation Id text box, type 1
Click the Preview the Citation button
In the Violation Id text box, replace the value with 7
Click the Preview the Citation button
Close the browser and return to your programming environment
Close your programming environment


Home	Copyright © 2017-2025, FunctionX	Monday 13 January 2025, 11:09	Home