ASP.NET MVC With jQuery - Traffic Tickets System

Introduction

To create an interactive website in ASP.NET MVC. One of its shortcomings is the absence of events. To compensate for this, you can use an additional library. jQuery is one of the JavaScript libraries that you can use in ASP.NET MVC.

Traffic Tickets System is a web-based application for a fictitious local government that needs an application to create, manage, and issue road traffic tickets. We will create the application in ASP.NET MVC using Microsoft Visual Studio. We will use jQuery to perform all necessary CRUD operations. These include creating, viewing, editing, and deleting records.

Practical Learning: Introducing the Application

Start Microsoft Visual Studio
In the Visual Studio 2019 dialog box, click Create a New Project
Click Next
In the list of projects templates, click ASP.NET Web Application (.NET Framework)
Press Enter
Change the project Name to TrafficTicketsSystem1
Select the highest value in the Framework combo box.
Uncheck the Configure For HTTPS check box.
Click Create
In the dialog box, click the Web API icon
Press Enter
In the Solution Explorer, right-click TrafficTicketsSystem1 -> Add -> New Folder
Type TrafficControllers
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 TrafficTicketsSystem
Press Enter

Add the following formats:

body {
    background-color: #FCFBED;
}

footer                  { background-color: #2e0202; }
.bold                   { font-weight:      600;     }
.yellow                 { color:            yellow;  }
.maroon                 { color:            maroon;  }
.push-down              { padding-top:      6.75em;  }
.top-padding            { padding-top:      0.40em;  }
.box-holder             { margin:           auto;
                          width:            415px;   }
.traffic-holder         { margin:           auto;
                          width:            500px;   }
.box-title              { margin-left:      20px;
                          border-bottom:    1px dashed white; }
.bottom-title           { margin-left:      40px;
                          margin-top:       10px;
                          color:            #d9d758;
                          border-bottom:    1px dashed lightblue; }
.bottom-title + ul      { list-style-type:  none;                 }
.bottom-title + ul > li { margin-top:       5px;
                          margin-bottom:    5px;                  }
.management             { background-color: rgb(145, 65, 15);     }
.management > ul        { list-style-type:  none;                 }
.management > ul > li   { margin-top:       5px;
                          margin-bottom:    5px;
                          margin-left:     -20px;           }
.manage-lead            { color:            antiquewhite;   }
.manage-lead:link       { color:            orange;         }
.manage-lead:focus      { color:            white;          }
.manage-lead:hover      { color:            yellow;         }
.bottom-lead            { color:            antiquewhite;   }
.bottom-lead:link       { color:            orange;         }
.bottom-lead:focus      { color:            white;          }
.bottom-lead:hover      { color:            yellow;         }
.bordered               { border:           1px solid #000; }
.navbar-fixed-top       { top:              6em;            }
.while-box              { margin:           3px;
                          background-color: white;
                          border-left:      1px solid #f1e9e9;
                          border-top:       1px solid #f1e9e9;
                          border-right:     2px solid silver;
                          border-bottom:    2px solid silver; }
.navbar-top-fixed       { position:         fixed;
                          right:            0;
                          left:             0;
                          z-index:          1030;        }
.navbar-top-fixed       { top:              0;
                          border-width:     0 0 1px;     }
.navbar-inverse         { background-color: #000;        }
.navbar-brand           { font-size:        14px;        }
.tts-nav                { text-decoration:  none;
                          color:            maroon;
                          font-family:      Georgia, Garamond, 'Times New Roman', serif; }
.tts-nav:link           { color:            saddlebrown;   }
.tts-nav:visited        { color:            tomato;        }
.tts-nav:active         { color:            #A8C3CE;       }
.tts-nav:hover          { color:            darkred;       }
.col-md-20, .col-md-30, .col-md-60 { position:      relative;
                                     min-height:    1px;
                                     padding-right: 15px;
                                     padding-left:  15px; }
@media (min-width: 768px) {
    .navbar-top-fixed .navbar-collapse {
        padding-right: 0;
        padding-left: 0;
    }
}
.navbar-top-fixed .navbar-collapse {
    max-height: 340px;
}

@media (max-device-width: 480px) and (orientation: landscape) {
    .navbar-top-fixed .navbar-collapse {
        max-height: 200px;
    }
}

@media (min-width: 768px) {
    .navbar-top-fixed {
        border-radius: 0;
    }
}

@media (min-width: 992px) {
    .col-md-20, .col-md-30, .col-md-60 {
        float: left;
    }


    .col-md-20 { width: 20%; }
    .col-md-30 { width: 32%; }
    .col-md-60 { width: 60%; }
}

.common-font { font-family: Georgia, Garamond, 'Times New Roman', serif; }
.table-striped > tbody > tr:nth-of-type(even) {
    background-color: #FFFAFA;
    color: maroon;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    color: maroon;
    background-color: #f5e4e0;
}

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"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate*"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at https://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.js"));

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

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, initial-scale=1.0">
    <title>Traffic Tickets System :: @ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div class="navbar-top-fixed">
        <div class="row">
            <div class="col-md-3" style="background-color: rgb(133, 17, 0); height: 6.15em"></div>
            <div class="col-md-6" style="background-image: url(/Images/tts1.png); height: 6.15em"></div>
            <div class="col-md-3" style="background-image: url(/Images/tts2.png); height: 6.15em"></div>
        </div>
    </div>

    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("TRAFFIC TICKETS SYSTEM", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("CAMERAS", "Index", "Cameras")</li>
                    <li>@Html.ActionLink("DRIVERS", "Index", "Drivers")</li>
                    <li>@Html.ActionLink("VEHICLES", "Index", "Vehicles")</li>
                    <li>@Html.ActionLink("VIOLATIONS TYPES", "Index", "ViolationsTypes")</li>
                    <li>@Html.ActionLink("TRAFFIC VIOLATIONS", "Index", "TrafficViolations")</li>
                    <li>@Html.ActionLink("ABOUT US", "About", "Home")</li>
                    <li>@Html.ActionLink("CONTACT TTS", "Contact", "Home")</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content push-down">
        @RenderBody()

        <footer>
            <div class="row">
                <div class="col-md-3">
                    <div class="bottom-title">LOCAL GOVERNMENTS</div>
                    <ul>
                        <li>@Html.ActionLink("Chesterworth County", "Index", "Home", htmlAttributes: new { @class = "bottom-lead" })</li>
                        <li>@Html.ActionLink("Ramses County", "Index", "Home", htmlAttributes: new { @class = "bottom-lead" })</li>
                        <li>@Html.ActionLink("Peyton County", "Index", "Home", htmlAttributes: new { @class = "bottom-lead" })</li>
                        <li>@Html.ActionLink("Clarendon County", "Index", "Home", htmlAttributes: new { @class = "bottom-lead" })</li>
                    </ul>
                </div>
                <div class="col-md-3">
                    <div class="bottom-title">CITY HALL</div>
                    <ul>
                        <li>@Html.ActionLink("Office of the Mayor", "Index", "Home", htmlAttributes: new { @class = "bottom-lead" })</li>
                        <li>@Html.ActionLink("Human Resources", "Index", "Home", htmlAttributes: new { @class = "bottom-lead" })</li>
                        <li>@Html.ActionLink("County Executive", "Index", "Home", htmlAttributes: new { @class = "bottom-lead" })</li>
                        <li>@Html.ActionLink("State Governor", "Index", "Home", htmlAttributes: new { @class = "bottom-lead" })</li>
                    </ul>
                </div>
                <div class="col-md-3">
                    <div class="bottom-title">PUBLIC SERVICES</div>
                    <ul>
                        <li>@Html.ActionLink("Laymans Library", "Index", "Home", htmlAttributes: new { @class = "bottom-lead" })</li>
                        <li>@Html.ActionLink("Entertainment", "Index", "Home", htmlAttributes: new { @class = "bottom-lead" })</li>
                        <li>@Html.ActionLink("Weekend Programs", "Index", "Home", htmlAttributes: new { @class = "bottom-lead" })</li>
                        <li>@Html.ActionLink("Kids/Teens Info", "Index", "Home", htmlAttributes: new { @class = "bottom-lead" })</li>
                    </ul>
                </div>
                <div class="col-md-3">
                    <div class="bottom-title">MISCELLANEOUS</div>
                    <ul>
                        <li>@Html.ActionLink("Labor/Regulations", "Index", "Home", htmlAttributes: new { @class = "bottom-lead" })</li>
                        <li>@Html.ActionLink("Taxes Information", "Index", "Home", htmlAttributes: new { @class = "bottom-lead" })</li>
                        <li>@Html.ActionLink("Seasonals/Weather", "Index", "Home", htmlAttributes: new { @class = "bottom-lead" })</li>
                        <li>@Html.ActionLink("Education", "Index", "Home", htmlAttributes: new { @class = "bottom-lead" })</li>
                    </ul>
                </div>
            </div>
            <hr />
            <p class="text-center common-font yellow">&copy; @DateTime.Now.Year - Traffic Tickets System</p>

        </footer>
    </div>

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

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 database:
- If you will use a Microsoft SQL Server Database:
  1. Start SQL Server Management Studio and login
  2. Right-click the name of the computer and click New Query
  3. Type the following code:
```
USE master;
GO
CREATE DATABASE TrafficTicketsSystem1;
GO
USE TrafficTicketsSystem1;
GO
```
  4. To create the database, right-click inside the Query window and click Execute
  5. Press Ctrl + A to select everything in the Query Editor and press Delete
- If you will use a local database:
  1. In the Solution Explorer of Microsoft Visual Studio, right-click App_Data -> Add -> New Item...
  2. In the middle frame of the Add New Item dialog box, click SQL Server Database.
    Change the Name to TrafficTicketsSystem1
  3. Click Add
  4. Type the following code:
  5. In the Solution Explorer, under App_Data, right-click TrafficTicketsSystem1 and click Open
  6. In the Server Explorer, right-click TrafficTicketsSystem1 and click New Query

In both cases, 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, if you are using a local database, in the top combo box, select TrafficTicketsSystem1.mdf. If you created your database in Microsoft SQL Server Management Studio, use the New Connection button to locate and select the database.
Make sure the bottom text box displays TicketsManagementModel
Click Next
In the third page of the Entity Data Model Wizard, click the Tables and Views check boxes
Click Finish. Click OK on the Security Warning message boxes
On the main menu, click Build -> Build Solution

Violations Types

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: Managing Violations Types

In the Solution Explorer, right-click TrafficControllers -> Add -> Controller...
In the middle list of the Add Scaffold dialog box, click Web API 2 Controller With Actions, Using Entity Framework
Click Add
In the Model Class combo box, select ViolationType (TrafficTicketsSystem1.Models)
In the Data Context Class combo box, select TrafficTicketsSystem1Entities (TrafficTicketsSystem1.Models)
Make sure the Controller Name text box is displaying ViolationTypesController.
Click Add
In the Solution Explorer, right-click Controllers -> Add -> Controller...
In the middle frame of the Add Scaffold dialog box, click MVC 5 Controller With Read/Write Actions
Press Enter
Type ViolationsTypes to get ViolationsTypesController
Click Add
In the ViolationTypesController class, right-click Index() and click Add View...
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 = "Traffic Violations Types";
}

<h2 class="text-center bold common-font maroon bottom-border">Traffic Violations Types</h2>

<table class="table table-striped common-font">
    <tr>
        <th class="bold text-center">Violation Type Id</th>
        <th class="bold">Violation Name</th>
        <th class="bold">Description</th>
    </tr>
</table>

<hr />

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

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

<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            url: "/api/ViolationTypes",
            method: "GET",
            dataType: "json",
            success: function (data) {
                $.each(data, function (index, category) {
                    $("table").append("<tr>" +
                        "<td class='text-center'>" + category["ViolationTypeId"] + "</td>" +
                        "<td>" + category["ViolationName"] + "</td>" +
                        "<td>" + category["Description"] + "</td></tr>");
                });
            }
        });
    });
</script>

Click the ViolationTypesController.cs tab
In the class, right-click Details() and click Add View...
Make sure the View Name text box is displaying Details
Click Add

Change the document as follows:

@{
    ViewBag.Title = "Volation Type Details";
}

<h2 class="text-center bold common-font maroon bottom-border">Volation Type Details</h2>

<hr />

<form name="TrafficCamera" method="post">
    <div class="box-holder common-font">
        <div class="form-group row">
            <label for="cameraId" class="col-md-5 maroon">Volation Type Id:</label>
            <div class="col-md-3"><input type="text" id="categoryId" class="form-control" /></div>
            <div class="col-md-3">
                <input type="button" id="btnFindVolationType" class="btn btn-warning" value="Find Camera" />
            </div>
        </div>
        <div class="form-group row">
            <label for="cameraNumber" class="col-md-3 maroon">Volation Type:</label>
            <div class="col-md-9"><input type="text" id="vType" class="form-control" /></div>
        </div>
        <div class="form-group row">
            <label for="describe" class="col-md-3 maroon">Description:</label>
            <div class="col-md-9"><textarea id="describe" class="form-control" rows="5"></textarea></div>
        </div>
    </div>
</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("Edit/Update Violation Type", "Edit",   null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("Exclude Violation Type",     "Delete", null, htmlAttributes: new { @class = "tts-nav" })
</p>

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

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

Click the ViolationTypesController.cs tab
In the class, right-click one of the Create() methods and click Add View...
Make sure the View Name text box is displayiing Create
Click Add

Change the document as follows:

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

<h2 class="text-center bold common-font maroon bottom-border">Traffic Violation Type</h2>

<hr />

<form name="ViolationType" method="post">
    <div class="box-holder common-font">
        <div class="form-group row">
            <label for="vName" class="col-md-4 maroon top-padding">Violation Name:</label>
            <div class="col-md-8"><input type="text" id="vName" class="form-control" /></div>
        </div>
        <div class="form-group row">
            <label for="describe" class="col-md-4 maroon top-padding">Description:</label>
            <div class="col-md-8"><textarea id="describe" rows="10" class="form-control"></textarea></div>
        </div>
        <div class="form-group row">
            <label class="col-md-3">&nbsp;</label>
            <div class="col-md-9 text-center">
                <input type="button" id="btnDefineViolationType"
                       class="btn btn-warning" value="Create Traffic Camera" />
            </div>
        </div>
    </div>
</form>

<hr />

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

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

<script type="text/javascript">
    $(document).ready(function () {
        $("#btnDefineViolationType").click(function () {
            var violationType = {
                ViolationName: $("#vName").val(),
                Description: $("#describe").val()
            };

            $.ajax({
                url: "/api/ViolationTypes",
                method: "POST",
                data: violationType,
                success: function (data) {
                    alert("The violation type has been defined.");

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

In the Solution Explorer, under Views, right-click ViolationTypes -> Add -> View...
Type Edit in the View Name text box
Click Add

Change the document as follows:

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

<h2 class="text-center bold common-font maroon bottom-border">Edit/Update Violation Type</h2>

<hr />

<form name="TrafficCamera" method="post">
    <div class="box-holder common-font">
        <div class="form-group row">
            <label for="cameraId" class="col-md-5 maroon top-padding">Violation Type Id:</label>
            <div class="col-md-3"><input type="text" id="vTypeId" class="form-control" /></div>
            <div class="col-md-3">
                <input type="button" id="btnSearchType" class="btn btn-warning" value="Find Violation Type" />
            </div>
        </div>
        <div class="form-group row">
            <label for="category" class="col-md-3 maroon top-padding">Violation Type:</label>
            <div class="col-md-9"><input type="text" id="category" class="form-control" /></div>
        </div>
        <div class="form-group row">
            <label for="describe" class="col-md-3 maroon top-padding">Description:</label>
            <div class="col-md-9"><textarea id="describe" class="form-control" rows="10"></textarea></div>
        </div>
        <div class="form-group row">
            <label class="col-md-3">&nbsp;</label>
            <div class="col-md-9 text-center">
                <input type="button" id="btnUpdateViolationType"
                       class="btn btn-warning" value="Update Violation Type" />
            </div>
        </div>
    </div>
</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("Details on Violation Type", "Details", null, htmlAttributes: new { @class = "tts-nav" }) ::
    @Html.ActionLink("Remove Violation Type",     "Delete",  null, htmlAttributes: new { @class = "tts-nav" })
</p>

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

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

        $("#btnUpdateViolationType").click(function (event) {
            var infraction = {
                ViolationTypeID: $("#vTypeId").val(),
                ViolationName: $("#category").val(),
                Description: $("#describe").val()
            };
            $.ajax({
                method: "PUT",
                data: infraction,
                url: "/api/ViolationTypes/" + $("#vTypeId").val(),
                success: function (data) {
                    alert("The violation type has been updated.")

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

In the Solution Explorer, under Views, right-click ViolationTypes -> Add -> View...
Type Delete
Click Add

Change the document as follows:

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

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

<hr />

<form name="TrafficCamera" method="post">
    <div class="traffic-holder common-font">
        <div class="form-group row">
            <label for="violationTypeId" class="col-md-5 maroon">Violation Type Id:</label>
            <div class="col-md-3"><input type="text" id="violationTypeId" class="form-control" /></div>
            <div class="col-md-3">
                <input type="button" id="btnGetViolationType" class="btn btn-warning" value="Get Violation Type" />
            </div>
        </div>
        <div class="form-group row">
            <label class="col-md-3 maroon">Volation Type:</label>
            <div class="col-md-9"><span id="vType"></span></div>
        </div>
        <div class="form-group row">
            <label class="col-md-3 maroon">Description:</label>
            <div class="col-md-9"><span id="describe"></span></div>
        </div>
    </div>
    <p class="text-center"><input type="button" name="btnRevokeRegistration" class="btn btn-warning" value="Revoke Vehicle Registration" /></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='Revoke Vehicle Registration']").on("click", function (event) {
            var car = {
                ViolationTypeId: $("#violationTypeId").val(),
                ViolationName: $("#vType").text(),
                Description: $("#describe").text()
            };
            $.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>

Cameras

When a violation occurs, a camera takes a photo or shoots a video. To setup the cameras, we will create the necessary objects (classes, webpages, etc).

Practical Learning: Creating Cameras

In the Solution Explorer, right-click TrafficControllers -> Add -> New Scaffoled Item...
In the left list of the Add Scaffold 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 TrafficTicketsSystem1Entities (TrafficTicketsSystem1.Models).
Click Add
In the Solution Explorer, right-click Controllers -> Add -> Controller...
In the middle list of the Add Scaffold dialog box, click MVC 5 Controller With Read/Write Actions
Click Add
Type Cameras to get CamerasController
Click Add
In the class, right-click Index() and click Add View...
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 bold common-font maroon bottom-border">Traffic Cameras</h2>

<table class="table table-striped common-font">
    <tr>
        <th class="bold text-center">Camera Id</th>
        <th class="bold">Camera #</th>
        <th class="bold">Make</th>
        <th class="bold">Model</th>
        <th class="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 CamerasController.cs tab
In the class, right-click Details() -> Add View...
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 bold common-font maroon bottom-border">Traffic Camera Details</h2>

<hr />

<form name="TrafficCamera" method="post">
    <div class="box-holder common-font">
        <div class="form-group row">
            <label for="cameraId" class="col-md-4 top-padding">Camera Id:</label>
            <div class="col-md-3"><input type="text" id="cameraId" class="form-control" /></div>
            <div class="col-md-3">
                <input type="button" id="btnFindRecord" class="btn btn-warning" value="Find Camera" />
            </div>
        </div>
        <div class="form-group row">
            <label class="col-md-4 top-padding">Camera #:</label>
            <div class="col-md-8"><span id="cameraNumber"></span></div>
        </div>
        <div class="form-group row">
            <label class="col-md-4 top-padding">Make:</label>
            <div class="col-md-8"><span id="make"></span></div>
        </div>
        <div class="form-group row">
            <label class="col-md-4 top-padding">Model:</label>
            <div class="col-md-8"><span id="model"></span></div>
        </div>
        <div class="form-group row top-padding">
            <label class="col-md-4">Location:</label>
            <div class="col-md-8"><span id="location"></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 CamerasController.cs tab
In the class, right-click inside one of the Create() methods -> Add View...
Make sure the View Name text box is displaying Create.
Click Add

Create the form as follows:

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

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

<hr />

<form name="TrafficCamera" method="post">
    <div class="box-holder common-font">
        <div class="form-group row">
            <label for="cameraNumber" class="col-md-3 maroon top-padding">Camera #:</label>
            <div class="col-md-9"><input type="text" id="cameraNumber" class="form-control" /></div>
        </div>
        <div class="form-group row">
            <label for="make" class="col-md-3 maroon top-padding">Make:</label>
            <div class="col-md-9"><input type="text" id="make" class="form-control" /></div>
        </div>
        <div class="form-group row">
            <label for="model" class="col-md-3 maroon top-padding">Model:</label>
            <div class="col-md-9"><input type="text" id="model" class="form-control" /></div>
        </div>
        <div class="form-group row">
            <label for="location" class="col-md-3 maroon top-padding">Location:</label>
            <div class="col-md-9"><input type="text" id="location" class="form-control" /></div>
        </div>
        <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-warning" 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>

In the Solution Explorer, under Views, right-click Cameras -> Add -> View...
Type Edit
Click Add

Change the document as follows:

@{
    ViewBag.Title = "Edit/Update Camera Information";
}

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

<hr />

<form name="TrafficCamera" method="post">
    <div class="box-holder common-font">
        <div class="form-group row">
            <label for="cameraId" class="col-md-4 top-padding">Camera Id:</label>
            <div class="col-md-3"><input type="text" id="cameraId" class="form-control" /></div>
            <div class="col-md-3">
                <input type="button" id="btnFindRecord" class="btn btn-warning" value="Find Camera" />
            </div>
        </div>
        <div class="form-group row">
            <label for="cameraNumber" class="col-md-4 top-padding">Camera #:</label>
            <div class="col-md-8"><input type="text" id="cameraNumber" class="form-control" /></div>
        </div>
        <div class="form-group row">
            <label for="make" class="col-md-4 top-padding">Make:</label>
            <div class="col-md-8"><input type="text" id="make" class="form-control" /></div>
        </div>
        <div class="form-group row">
            <label for="model" class="col-md-4 top-padding">Model:</label>
            <div class="col-md-8"><input type="text" id="model" class="form-control" /></div>
        </div>
        <div class="form-group row">
            <label for="location" class="col-md-4 top-padding">Location:</label>
            <div class="col-md-8"><input type="text" id="location" class="form-control" /></div>
        </div>
        <div class="form-group row">
            <label class="col-md-4">&nbsp;</label>
            <div class="col-md-8"><input type="button" id="btnUpdateRecord" class="btn btn-warning" 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>

In the Solution Explorer, under Views, right-click Cameras -> Add -> View...
Type Delete
Click Add

Change the document as follows:

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

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

<hr />

<form name="TrafficCamera" method="post">
    <div class="box-holder common-font">
        <div class="form-group row">
            <label for="cameraId" class="col-md-4">Camera Id:</label>
            <div class="col-md-3"><input type="text" id="cameraId" class="form-control" /></div>
            <div class="col-md-3">
                <input type="button" id="btnFindRecord" class="btn btn-warning" value="Find Camera" />
            </div>
        </div>
        <div class="form-group row">
            <label class="col-md-3">Camera #:</label>
            <div class="col-md-9"><span id="cameraNumber"></span></div>
        </div>
        <div class="form-group row">
            <label class="col-md-3">Make:</label>
            <div class="col-md-9"><span id="make"></span></div>
        </div>
        <div class="form-group row">
            <label class="col-md-3">Model:</label>
            <div class="col-md-9"><span id="model"></span></div>
        </div>
        <div class="form-group row">
            <label class="col-md-3">Location:</label>
            <div class="col-md-9"><span id="location"></span></div>
        </div>
    </div>
    <p class="text-center"><input type="button" id="btnDeleteRecord" class="btn btn-warning" 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(),
                CameraNumber: $("#cameraNumber").val(),
                Make: $("#make").val(),
                Model: $("#model").val(),
                Location: $("#location").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>

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: Creating Drivers

In the Solution Explorer, right-click TrafficControllers -> Add -> New Scaffolded Item...
In the middle list of the Add Scaffold 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 TrafficTicketsSystem1Entities (TrafficTicketsSystem1.Models).
Click Add
In the Solution Explorer, right-click Controllers -> Add -> Controller...
In the middle list of the Add Scaffold dialog box, click MVC 5 Controller With Read/Write Actions
Click Add
Type Drivers to get DriversController
Click Add
In the class, right-click Index() -> Add View...
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 bold common-font maroon bottom-border">Vehicles Owners/Drivers</h2>

<table class="table table-striped common-font">
    <tr>
        <th class="bold text-center">Driver Id</th>
        <th class="bold">Drv. Lic. #</th>
        <th class="bold">First Name</th>
        <th class="bold">Last Name</th>
        <th class="bold">Address</th>
        <th class="bold">City</th>
        <th class="bold">County</th>
        <th class="bold">State</th>
        <th class="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 DriversController.cs tab
In the class, right-click Details() -> Add View...
Make sure the View Name text box is displaying Details.
Click Add

Change the webpage as follows:

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

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

<hr />

<form name="DriverOwner" method="post">
    <div class="box-holder common-font">
        <div class="form-group row">
            <label for="cameraId" class="col-md-4">Driver Id:</label>
            <div class="col-md-4"><input type="text" id="driverId" class="form-control" /></div>
            <div class="col-md-4">
                <input type="button" id="btnLocateDriver" class="btn btn-warning" value="Locate Driver/Owner" />
            </div>
        </div>
        <div class="form-group row">
            <label class="col-md-4">Drv. Lic. #:</label>
            <div class="col-md-8"><span id="drvLicNbr"></span></div>
        </div>
        <div class="form-group row">
            <label class="col-md-4">First Name:</label>
            <div class="col-md-8"><span id="fname"></span></div>
        </div>
        <div class="form-group row">
            <label class="col-md-4">Last Name:</label>
            <div class="col-md-8"><span id="lname" /></div>
        </div>
        <div class="form-group row">
            <label class="col-md-4">Address:</label>
            <div class="col-md-8"><span id="adrs"></span></div>
        </div>
        <div class="form-group row">
            <label class="col-md-4">City:</label>
            <div class="col-md-8"><span id="city"></span></div>
        </div>
        <div class="form-group row">
            <label class="col-md-4">County:</label>
            <div class="col-md-8"><span id="county"></span></div>
        </div>
        <div class="form-group row">
            <label class="col-md-4">State:</label>
            <div class="col-md-8"><span id="state"></span></div>
        </div>
        <div class="form-group row">
            <label class="col-md-4">ZIP-Code:</label>
            <div class="col-md-8"><span id="zip"></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 () {
        $(".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>

In the Solution Explorer, under Views, right-click Drivers -> Add -> View...
Type Create
Click Add

Change the form as follows:

@{
    ViewBag.Title = "New Vehicle Owner/Driver";
}

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

<hr />

<form name="VehicleOwnerDriver" method="post">
    <div class="box-holder common-font">
        <div class="form-group row">
            <label for="drvLicNbr" class="col-md-4 top-padding maroon">Drv. Lic. #:</label>
            <div class="col-md-8"><input type="text" id="drvLicNbr" class="form-control" /></div>
        </div>
        <div class="form-group row">
            <label for="fName" class="col-md-4 top-padding maroon">First Name:</label>
            <div class="col-md-8"><input type="text" id="fName" class="form-control" /></div>
        </div>
        <div class="form-group row">
            <label for="lName" class="col-md-4 top-padding maroon">Last Name:</label>
            <div class="col-md-8"><input type="text" id="lName" class="form-control" /></div>
        </div>
        <div class="form-group row">
            <label for="adrs" class="col-md-4 top-padding maroon">Address:</label>
            <div class="col-md-8"><input type="text" id="adrs" class="form-control" /></div>
        </div>
        <div class="form-group row">
            <label for="city" class="col-md-4 top-padding maroon">City:</label>
            <div class="col-md-8"><input type="text" id="city" class="form-control" /></div>
        </div>
        <div class="form-group row">
            <label for="county" class="col-md-4 top-padding maroon">County:</label>
            <div class="col-md-8"><input type="text" id="county" class="form-control" /></div>
        </div>
        <div class="form-group row">
            <label for="state" class="col-md-4 top-padding maroon">State:</label>
            <div class="col-md-8"><input type="text" id="state" class="form-control" /></div>
        </div>
        <div class="form-group row">
            <label for="zip" class="col-md-4 top-padding maroon">ZIP Code:</label>
            <div class="col-md-8"><input type="text" id="zip" class="form-control" /></div>
        </div>
        <div class="form-group row">
            <label class="col-md-4">&nbsp;</label>
            <div class="col-md-8 text-center"><input type="button" id="btnIssueDriversLicense" class="btn btn-warning" 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>

In the Solution Explorer, under Views, right-click Drivers -> Add -> View...
Type Edit
Click Add

Change the document as follows:

@{
    ViewBag.Title = "Edit/Update Driver Information";
}

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

<hr />

<form name="TrafficCamera" method="post">
    <div class="box-holder common-font">
        <div class="form-group row">
            <label for="chauffeur" class="col-md-4">Driver Id:</label>
            <div class="col-md-4"><input type="text" id="chauffeur" class="form-control" /></div>
            <div class="col-md-4">
                <input type="button" id="btnGetDriver" class="btn btn-warning" value="Find Driver" />
            </div>
        </div>
        <div class="form-group row">
            <label for="drvLicNbr" class="col-md-4">Drv. Lic. #:</label>
            <div class="col-md-8"><input type="text" id="drvLicNbr" class="form-control" /></div>
        </div>
        <div class="form-group row">
            <label for="fName" class="col-md-4">First Name:</label>
            <div class="col-md-8"><input type="text" id="fName" class="form-control" /></div>
        </div>
        <div class="form-group row">
            <label for="lName" class="col-md-4">Last Name:</label>
            <div class="col-md-8"><input type="text" id="lName" class="form-control" /></div>
        </div>
        <div class="form-group row">
            <label for="adrs" class="col-md-4">Address:</label>
            <div class="col-md-8"><input type="text" id="adrs" class="form-control" /></div>
        </div>
        <div class="form-group row">
            <label for="city" class="col-md-4">City:</label>
            <div class="col-md-8"><input type="text" id="city" class="form-control" /></div>
        </div>
        <div class="form-group row">
            <label for="county" class="col-md-4">County:</label>
            <div class="col-md-8"><input type="text" id="county" class="form-control" /></div>
        </div>
        <div class="form-group row">
            <label for="state" class="col-md-4">State:</label>
            <div class="col-md-8"><input type="text" id="state" class="form-control" /></div>
        </div>
        <div class="form-group row">
            <label for="zip" class="col-md-4">ZIP-Code:</label>
            <div class="col-md-8"><input type="text" id="zip" class="form-control" /></div>
        </div>
        <div class="form-group row">
            <label class="col-md-4">&nbsp;</label>
            <div class="col-md-8 text-center">
                <input type="button" id="btnUpdateRecord"
                       class="btn btn-warning" 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>

In the Solution Explorer, under Views, right-click Drivers -> Add -> View...
Type Delete
Click Add

Transform the webform as follows:

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

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

<hr />

<form name="TrafficCamera" method="post">
    <div class="box-holder common-font">
        <div class="form-group row">
            <label for="driverId" class="col-md-4">Driver Id:</label>
            <div class="col-md-4"><input type="text" id="driverId" class="form-control" /></div>
            <div class="col-md-4">
                <input type="button" name="btnFindDriver" class="btn btn-warning" value="Find Driver's Record" />
            </div>
        </div>
        <div class="form-group row">
            <label class="col-md-4">Drv. Lic. #:</label>
            <div class="col-md-8"><span id="dln"></span></div>
        </div>
        <div class="form-group row">
            <label class="col-md-4">First Name:</label>
            <div class="col-md-8"><span id="fname"></span></div>
        </div>
        <div class="form-group row">
            <label class="col-md-4">Last Name:</label>
            <div class="col-md-8"><span id="lname"></span></div>
        </div>
        <div class="form-group row">
            <label class="col-md-4">Address:</label>
            <div class="col-md-8"><span name="adrs"></span></div>
        </div>
        <div class="form-group row">
            <label class="col-md-4">City:</label>
            <div class="col-md-8"><span name="city"></span></div>
        </div>
        <div class="form-group row">
            <label class="col-md-4">County:</label>
            <div class="col-md-8"><span name="county"></span></div>
        </div>
        <div class="form-group row">
            <label class="col-md-4">State:</label>
            <div class="col-md-8"><span name="state"></span></div>
        </div>
        <div class="form-group row">
            <label class="col-md-4">ZIP-Code:</label>
            <div class="col-md-8"><span name="zip"></span></div>
        </div>
    </div>
    <p class="text-center"><input type="button" name="btnRevokeRegistration" class="btn btn-warning" value="Revoke Vehicle Registration" /></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[id='driverId']").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='Revoke Vehicle Registration']").on("click", function (event) {
            var car = {
                DriverID: $("input[class='form-control small']").val(),
                DrvLicNumber: $("span[id='dln']").val(),
                FirstName: $("span[id='fname']").val(),
                LastName: $("span[id='lname']").val(),
                Address: $("span[name='adrs']").val(),
                City: $("span[name='city']").val(),
                County: $("span[name='county']").val(),
                State: $("span[name='state']").val(),
                ZIPCode: $("span[name='zip']").val()
            };
            $.ajax({
                data: car,
                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>

Vehicles

Drivers violate traffic laws when driving cars. As seen for cars, vehicles records are created and managed by a state government. For our simple application, we will register the cars in our system.

Practical Learning: Creating Vehicles

In the Solution Explorer, right-click TrafficControllers -> Add -> New Scaffolded Item...
In the middle list of the Add Scaffold dialog box, under Common, click Web API and, in the middle list, click Web API 2 Controller With Actions, Using Entity Framework
Click Add
In the Model Class combo box, select Vehicle (TrafficTicketsSystem1.Models)
Make sure the Data Context Class combo box is displayinig TrafficTicketsSystem1Entities (TrafficTicketsSystem1.Models).
Click Add
In the Solution Explorer, right-click Controllers -> Add -> Controller...
In the middle list, click MVC 5 Controller With Read/Write Actions
Press Enter
Type Vehicles to get VehiclesController
Click Add
In the class, right-click Index() -> Add View...
Make sure the View Name text box is displaying Index.
Click Add

Change the document as follows:

@{
    ViewBag.Title = "Vehicles Registrations";
}

<h2 class="text-center bold common-font maroon bottom-border">Vehicles Registrations</h2>

<table class="table table-striped common-font">
    <tr>
        <th class="bold text-center">Vehicle Id</th>
        <th class="bold">Tag #</th>
        <th class="bold">Drv. Lic. #</th>
        <th class="bold">Make</th>
        <th class="bold">Model</th>
        <th class="bold">Year</th>
        <th class="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",             "Edit",   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>

In the Solution Explorer, under Views, right-click Vehicles -> Add -> View...
Type Details
Press Enter

Change the document as follows:

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

<h2 class="text-center bold common-font maroon bottom-border">Vehicle Details</h2>

<hr />

<form name="DriverOwner" method="post">
    <div class="box-holder common-font">
        <div class="form-group row">
            <label for="cameraId" class="col-md-4">Vehicle Id:</label>
            <div class="col-md-3"><input type="text" id="carId" class="form-control" /></div>
            <div class="col-md-3">
                <input type="button" id="btnGetVehicle" class="btn btn-warning" value="Get the Vehicle" />
            </div>
        </div>
        <div class="form-group row">
            <label class="col-md-4">Tag #:</label>
            <div class="col-md-8"><span class="tagNbr"></span></div>
        </div>
        <div class="form-group row">
            <label class="col-md-4">Drv. Lic. #:</label>
            <div class="col-md-8"><span class="dln"></span></div>
        </div>
        <div class="form-group row">
            <label class="col-md-4">Make:</label>
            <div class="col-md-8"><span class="make" /></div>
        </div>
        <div class="form-group row">
            <label class="col-md-4">Model:</label>
            <div class="col-md-8"><span class="mdl"></span></div>
        </div>
        <div class="form-group row">
            <label class="col-md-4">Year:</label>
            <div class="col-md-8"><span class="year"></span></div>
        </div>
        <div class="form-group row">
            <label class="col-md-4">Color:</label>
            <div class="col-md-8"><span class="color"></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 () {
        $(".btn-primary").on("click", function (event) {
            $.ajax({
                method: "GET",
                dataType: "json",
                url: "/api/Vehicles/" + $(".small").val(),
                success: function (data) {
                    $("span.tagNbr").text(data.TagNumber);
                    $("span.dln").text(data.DrvLicNumber);
                    $("span.make").text(data.Make);
                    $("span.mdl").text(data.Model);
                    $("span.year").text(data.VehicleYear);
                    $("span.color").text(data.Color);
                }
            });
        });
    });
</script>

In the Solution Explorer, right-click Vehicles -> Add -> View...
Type Create
Press Enter

Change the document as follows:

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

<h2 class="text-center bold common-font maroon bottom-border">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-4 top-padding maroon">Vehicle Tag #:</label>
            <div class="col-md-8"><input type="text" id="tagNbr" class="form-control" /></div>
        </div>
        <div class="form-group row">
            <label for="drvLicNbr" class="col-md-4 top-padding maroon">Drv. Lic. #:</label>
            <div class="col-md-8"><input type="text" id="drvLicNbr" class="form-control" /></div>
        </div>
        <div class="form-group row">
            <label for="owner" class="col-md-4 top-padding maroon">Owner/Driver:</label>
            <div class="col-md-8"><input type="text" id="owner" name="owner" class="form-control" disabled /></div>
        </div>
        <div class="form-group row">
            <label for="make" class="col-md-4 top-padding maroon">Make:</label>
            <div class="col-md-8"><input type="text" id="make" class="form-control" /></div>
        </div>
        <div class="form-group row">
            <label for="model" class="col-md-4 top-padding maroon">Model:</label>
            <div class="col-md-8"><input type="text" id="model" class="form-control" /></div>
        </div>
        <div class="form-group row">
            <label for="year" class="col-md-4 top-padding maroon">Year:</label>
            <div class="col-md-8"><input type="text" id="year" class="form-control" /></div>
        </div>
        <div class="form-group row">
            <label for="clr" class="col-md-4 top-padding maroon">Color:</label>
            <div class="col-md-8"><input type="text" id="clr" class="form-control" /></div>
        </div>
        <div class="form-group row">
            <label class="col-md-4">&nbsp;</label>
            <div class="col-md-8">
                <input type="button" id="btnRegisterVehicle"
                       class="btn btn-warning" value="Register this Vehicle" />
            </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()) {
                            $("input[id='owner']").val(person["FirstName"] + " " +
                                person["LastName"] + " (Drv. Lic. #: " +
                                person["DrvLicNumber"] + ")");
                        }
                    });
                }
            });
        }); // 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 VehiclesController.cs tab
In the class, right-click one of the Edit() methods -> Add View...
Make sure the View Name text box is displaying Edit.
Click Add

Change the document as follows:

@{
    ViewBag.Title = "Edit/Update Vehicle Information";
}

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

<hr />

<form name="TrafficCamera" method="post">
    <div class="box-holder common-font">
        <div class="form-group row">
            <label for="carId" class="col-md-4">Vehicle Id:</label>
            <div class="col-md-3"><input type="text" id="carId" class="form-control" /></div>
            <div class="col-md-3">
                <input type="button" id="btnLocateVehicle" class="btn btn-warning" value="Locate Vehicle/Car" />
            </div>
        </div>
        <div class="form-group row">
            <label for="drvLicNbr" class="col-md-4">Drv. Lic. #:</label>
            <div class="col-md-8"><input type="text" id="drvLicNbr" class="form-control" /></div>
        </div>
        <div class="form-group row">
            <label for="owner" class="col-md-4">Owner/Driver:</label>
            <div class="col-md-8"><input type="text" id="owner" name="owner" class="form-control" disabled /></div>
        </div>
        <div class="form-group row">
            <label for="tagNbr" class="col-md-4">Vehicle Tag #:</label>
            <div class="col-md-8"><input type="text" id="tagNbr" class="form-control" /></div>
        </div>
        <div class="form-group row">
            <label for="make" class="col-md-4">Make:</label>
            <div class="col-md-8"><input type="text" id="make" class="form-control" /></div>
        </div>
        <div class="form-group row">
            <label for="model" class="col-md-4">Model:</label>
            <div class="col-md-8"><input type="text" id="model" class="form-control" /></div>
        </div>
        <div class="form-group row">
            <label for="year" class="col-md-4">Year:</label>
            <div class="col-md-8"><input type="text" id="year" class="form-control" /></div>
        </div>
        <div class="form-group row">
            <label for="color" class="col-md-4">Color:</label>
            <div class="col-md-8"><input type="text" id="color" class="form-control" /></div>
        </div>
        <div class="form-group row">
            <label class="col-md-4">&nbsp;</label>
            <div class="col-md-8">
                <input type="button" id="btnUpdateRecord"
                       class="btn btn-warning" value="Update Camera Details" />
            </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",  "Edit",    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) {
            $.ajax({
                method: "GET",
                dataType: "json",
                url: "/api/Vehicles/" + $("#carId").val(),
                success: function (data) {
                    $("#tagNbr").val(data.TagNumber);
                    $("#drvLicNbr").val(data.DrvLicNumber);
                    $("#make").val(data.Make);
                    $("#model").val(data.Model);
                    $("#year").val(data.VehicleYear);
                    $("#color").val(data.Color);
                }
            });

            $.ajax({
                method: "GET",
                dataType: "json",
                url: "/api/Drivers",
                success: function (data) {
                    $.each(data, function (index, person) {
                        if (person["DrvLicNumber"] === $("#drvLicNbr").val()) {
                            $("input[id='owner']").val(person["FirstName"] + " " +
                                person["LastName"] + " (Drv. Lic. #: " +
                                person["DrvLicNumber"] + ")");
                        } // If
                    }); // Each
                } // Successful AJAX
            }); // $.ajax
        });

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

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

Click the VehiclesController.cs
In the class, right-click Delete() -> Add View...
Make sure the View Name text box is displaying Delete.
Click Add

Change the webpage as follows:

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

<h2 class="text-center bold common-font maroon bottom-border">Revoke Vehicle Registration</h2>

<form name="TrafficCamera" method="post">
    <div class="traffic-holder common-font">
        <div class="form-group row">
            <label for="carId" class="col-md-4">Vehicle Id:</label>
            <div class="col-md-3"><input type="text" name="carId" class="form-control" /></div>
            <div class="col-md-3">
                <input type="button" name="btnFindVehicleRegistration" class="btn btn-warning" value="Find Vehicle Registration" />
            </div>
        </div>
        <div class="form-group row">
            <label class="col-md-4">Vehicle Tag #:</label>
            <div class="col-md-8"><span name="tagNbr"></span></div>
        </div>
        <div class="form-group row">
            <label class="col-md-4">Owner Drv. Lic. #:</label>
            <div class="col-md-8"><span name="dln"></span></div>
        </div>
        <div class="form-group row">
            <label class="col-md-4">Make:</label>
            <div class="col-md-8"><span name="manufacturer"></span></div>
        </div>
        <div class="form-group row">
            <label class="col-md-4">Model:</label>
            <div class="col-md-8"><span name="model"></span></div>
        </div>
        <div class="form-group row">
            <label class="col-md-4">Year:</label>
            <div class="col-md-8"><span name="yr"></span></div>
        </div>
        <div class="form-group row">
            <label class="col-md-4">Color:</label>
            <div class="col-md-8"><span name="color"></span></div>
        </div>
    </div>
    <p class="text-center"><input type="button" name="btnRevokeRegistration" class="btn btn-warning" 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 Registration']").on("click", function (event) {
            $.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);
                    $("span[name='manufacturer']").text(data.Make);
                    $("span[name='model']").text(data.Model);
                    $("span[name='yr']").text(data.VehicleYear);

                    $("span[name='color']").text(data.Color);
                }
            });
        });

        $("input[value='Revoke Vehicle Registration']").on("click", function (event) {
            var car = {
                VehicleID:    $("input[name='carId']").val(),
                TagNumber:    $("span[name='tagNbr']").val(),
                DrvLicNumber: $("span[name='dln']").val(),
                Make:         $("span[name='manufacturer']").val(),
                Model:        $("span[name='model']").val(),
                VehicleYear:  $("span[name='yr']").val(),
                Color:        $("span[name='color']").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>

Traffic Violations

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

Practical Learning: Creating Traffic Violations

In the Solution Explorer, right-click TrafficControllers -> Add -> Controller...
In the middle list of the Add Scaffold dialog box, 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 TrafficTicketsSystem1Entities (TrafficTicketsSystem1.Models).
Click Add
In the Solution Explorer, right-click Controllers -> Add -> New Scaffolded Item...
In the left list of the Add Scaffold dialog box, click MVC and, in the middle list, click MVC 5 Controller With Read/Write Actions
Click Add
Type TrafficViolations to get TrafficViolationsController
click Add
In the class, right-click Index() -> Add View...
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 bold common-font maroon bottom-border">Traffic Violations</h2>

<table class="table table-striped common-font">
    <tr>
        <th class="bold text-center">Violation Id</th>
        <th class="bold text-center">Traffic Violation #</th>
        <th class="bold text-center">Camera #</th>
        <th class="bold text-center">Tag #</th>
        <th class="bold">Violation</th>
        <th class="bold text-center">Date</th>
        <th class="bold text-center">Time</th>
        <th class="bold text-center">Photo Available</th>
        <th class="bold text-center">Video Available</th>
        <th class="bold">Payment Due Date</th>
        <th class="bold">Payment Date</th>
        <th class="bold">Payment Amount</th>
        <th class="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 Traffic Citation",         "ReviewCitation", 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>

In the Solution Explorer, under Views, right-click TrafficViolations -> Add -> View...
Type to Details
Press Enter

Create a form as follows:

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

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

<hr />

<form name="DriverOwner" method="post">
    <div class="traffic-holder common-font">
        <div class="form-group row">
            <label for="cameraId" class="col-md-4">Violation Id:</label>
            <div class="col-md-3"><input type="text" id="infractionId" class="form-control" /></div>
            <div class="col-md-3">
                <input type="button" id="btnShowViolation" class="btn btn-warning" value="Show the Violation" />
            </div>
        </div>
        <div class="form-group row">
            <label class="col-md-4">Traffic Violation #:</label>
            <div class="col-md-8"><span name="traffic-violation-number"></span></div>
        </div>
        <div class="form-group row">
            <label class="col-md-4">Camera:</label>
            <div class="col-md-8"><span name="camera"></span></div>
        </div>
        <div class="form-group row">
            <label class="col-md-4">Vehicle Tag #:</label>
            <div class="col-md-8"><span name="vehicle"></span></div>
        </div>
        <div class="form-group row">
            <label class="col-md-4">Violation Type:</label>
            <div class="col-md-8"><span name="category" /></div>
        </div>
        <div class="form-group row">
            <label class="col-md-4">Violation Date:</label>
            <div class="col-md-8"><span name="date-of-infraction"></span></div>
        </div>
        <div class="form-group row">
            <label class="col-md-4">Violation Time:</label>
            <div class="col-md-8"><span name="time-of-infraction"></span></div>
        </div>
        <div class="form-group row">
            <label class="col-md-4">Photo is Available:</label>
            <div class="col-md-8"><span name="steady-photo-available"></span></div>
        </div>
        <div class="form-group row">
            <label class="col-md-4">Video is Available:</label>
            <div class="col-md-8"><span name="streaming-video-available"></span></div>
        </div>
        <div class="form-group row">
            <label class="col-md-4">Payment Due Date:</label>
            <div class="col-md-8"><span name="payment due date"></span></div>
        </div>
        <div class="form-group row">
            <label class="col-md-4">Payment Date:</label>
            <div class="col-md-8"><span name="last-day-payment"></span></div>
        </div>
        <div class="form-group row">
            <label class="col-md-4">Amount Owed:</label>
            <div class="col-md-8"><span name="amount-owed"></span></div>
        </div>
        <div class="form-group row">
            <label class="col-md-4">Payment Status:</label>
            <div class="col-md-8"><span name="payment-status"></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("Review Traffic Citation",         "ReviewCitation", null, htmlAttributes: new { @class = "tts-nav" })
</p>

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

<script type="text/javascript">
    $(document).ready(function () {
        $(".btn-warning").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$='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);
                }
            });
        });
    });
</script>

In the Solution Explorer, under Views, right-click TrafficViolations -> Add -> View...
Type Create
Press Enter

Change the document as follows:

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

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

<hr />

<form name="VehicleOwnerDriver" method="post">
    <div class="traffic-holder common-font">
        <div class="form-group row">
            <label for="trafViolNbr" class="col-md-4 maroon top-padding">Traffic Violation #:</label>
            <div class="col-md-8"><input type="text" id="trafViolNbr" class="form-control" /></div>
        </div>
        <div class="form-group row">
            <label for="cmrNbr" class="col-md-4 maroon top-padding">Camera #:</label>
            <div class="col-md-8"><input type="text" id="cmrNbr" class="form-control" /></div>
        </div>
        <div class="form-group row">
            <label class="col-md-4 maroon top-padding">Camera Details:</label>
            <div class="col-md-8"><input type="text" id="cmrDetails" class="form-control camera-details" disabled /></div>
        </div>
        <div class="form-group row">
            <label for="tagNbr" class="col-md-4 maroon top-padding">Vehicle Tag #:</label>
            <div class="col-md-8"><input type="text" id="tagNbr" class="form-control" /></div>
        </div>
        <div class="form-group row">
            <label class="col-md-4 maroon top-padding">Vehicle Details:</label>
            <div class="col-md-8"><input type="text" name="vehicle" class="form-control" disabled /></div>
        </div>
        <div class="form-group row">
            <label for="category" class="col-md-4 maroon top-padding">Violation Type:</label>
            <div class="col-md-8">
                <select id="category" class="form-control"></select>
            </div>
        </div>
        <div class="form-group row">
            <label for="county" class="col-md-4 maroon top-padding">Violation Date:</label>
            <div class="col-md-8"><input type="date" id="trafficDate" class="form-control" /></div>
        </div>
        <div class="form-group row">
            <label for="trafficTime" class="col-md-4 maroon top-padding">Violation Time:</label>
            <div class="col-md-8"><input type="time" id="trafficTime" class="form-control" /></div>
        </div>
        <div class="form-group row">
            <label for="photo" class="col-md-4 maroon top-padding">Photo Available:</label>
            <div class="col-md-8">
                <select id="photo" class="form-control">
                    <option value="No">No</option>
                    <option value="Yes">Yes</option>
                </select>
            </div>
        </div>
        <div class="form-group row">
            <label for="photo" class="col-md-4 maroon top-padding">Video Available:</label>
            <div class="col-md-8">
                <select id="video" class="form-control">
                    <option value="No">No</option>
                    <option value="Yes">Yes</option>
                </select>
            </div>
        </div>
        <div class="form-group row">
            <label for="pdd" class="col-md-4 maroon top-padding">Payment Due Date:</label>
            <div class="col-md-8"><input type="date" id="pdd" class="form-control" /></div>
        </div>
        <div class="form-group row">
            <label for="pmtDate" class="col-md-4 maroon top-padding">Payment Date:</label>
            <div class="col-md-8"><input type="date" id="pmtDate" class="form-control" /></div>
        </div>
        <div class="form-group row">
            <label for="pmtAmt" class="col-md-4 maroon top-padding">Payment Amount:</label>
            <div class="col-md-8"><input type="text" id="pmtAmt" class="form-control" /></div>
        </div>
        <div class="form-group row">
            <label for="pmtStatus" class="col-md-4 maroon top-padding">Video Available:</label>
            <div class="col-md-8">
                <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>
        <div class="form-group row">
            <label class="col-md-4">&nbsp;</label>
            <div class="col-md-8"><input type="button" id="btnCreateTicket" class="btn btn-warning" value="Create 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 Traffic Citation",       "ReviewCitation", null, htmlAttributes: new { @class = "tts-nav" })
</p>

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

<script type="text/javascript">
    $(document).ready(function () {
        $.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>");
                });
            }
        });

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

        $("#tagNbr").blur(function (event) {
            $.ajax({
                method: "GET",
                dataType: "json",
                url: "/api/Vehicles",
                success: function (data) {
                    $.each(data, function (index, car) {
                        if (car["TagNumber"] === $("#tagNbr").val()) {
                            $("input[name='vehicle']").val(car["Make"] + " " +
                                car["Model"] + " (" +
                                car["VehicleYear"] + ", " + car["Color"] + ")");
                        }
                    });
                }
            });
        }); // Vehicle Tag Number Lost Focus

        $("#btnCreateTicket").click(function () {
            var ticket = {
                TrafficViolationNumber: $("#trafViolNbr").val(),
                CameraNumber:           $("#cmrNbr").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>

In the Solution Explorer, under Views, right-click TrafficViolations -> Add -> View...
Type Edit
Click Add

Change the document as follows:

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

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

<hr />

<form name="TrafficCamera" method="post">
    <div class="traffic-holder common-font">
        <div class="form-group row">
            <label for="infractionId" class="col-md-4 maroon top-padding">Violation Id:</label>
            <div class="col-md-4"><input type="text" id="infractionId" class="form-control" /></div>
            <div class="col-md-4">
                <input type="button" id="btnLocateViolation" class="btn btn-warning" value="Locate Violation" />
            </div>
        </div>
        <div class="form-group row">
            <label for="trafViolNbr" class="col-md-4 maroon top-padding">Traffic Violation #:</label>
            <div class="col-md-8"><input type="text" id="trafViolNbr" class="form-control" /></div>
        </div>
        <div class="form-group row">
            <label for="cmrNbr" class="col-md-4 maroon">Camera #:</label>
            <div class="col-md-8"><input type="text" id="cmrNbr" class="form-control" /></div>
        </div>
        <div class="form-group row">
            <label class="col-md-4 maroon">Camera Details:</label>
            <div class="col-md-8"><input type="text" id="cmrDetails" class="form-control camera-details" disabled /></div>
        </div>
        <div class="form-group row">
            <label for="tagNbr" class="col-md-4 maroon">Vehicle Tag #:</label>
            <div class="col-md-8"><input type="text" id="tagNbr" class="form-control" /></div>
        </div>
        <div class="form-group row">
            <label class="col-md-4 maroon">Vehicle Details:</label>
            <div class="col-md-8"><input type="text" name="vehicle" class="form-control" disabled /></div>
        </div>
        <div class="form-group row">
            <label for="category" class="col-md-4 maroon">Violation Type:</label>
            <div class="col-md-8">
                <select id="category" class="form-control">
                    <option value="Unknown"></option>
                </select>
            </div>
        </div>
        <div class="form-group row">
            <label for="county" class="col-md-4 maroon">Violation Date:</label>
            <div class="col-md-8"><input id="trafficDate" class="form-control" /></div>
        </div>
        <div class="form-group row">
            <label for="trafficTime" class="col-md-4 maroon">Violation Time:</label>
            <div class="col-md-8"><input type="time" id="trafficTime" class="form-control" /></div>
        </div>
        <div class="form-group row">
            <label for="photo" class="col-md-4 maroon">Photo Available:</label>
            <div class="col-md-8">
                <select id="photo" class="form-control">
                    <option value="No">No</option>
                    <option value="Yes">Yes</option>
                </select>
            </div>
        </div>
        <div class="form-group row">
            <label for="photo" class="col-md-4 maroon">Video Available:</label>
            <div class="col-md-8">
                <select id="video" class="form-control">
                    <option value="No">No</option>
                    <option value="Yes">Yes</option>
                </select>
            </div>
        </div>
        <div class="form-group row">
            <label for="pdd" class="col-md-4 maroon">Payment Due Date:</label>
            <div class="col-md-8"><input id="pdd" class="form-control" /></div>
        </div>
        <div class="form-group row">
            <label for="pmtDate" class="col-md-4 maroon">Payment Date:</label>
            <div class="col-md-8"><input id="pmtDate" class="form-control" /></div>
        </div>
        <div class="form-group row">
            <label for="pmtAmt" class="col-md-4 maroon">Payment Amount:</label>
            <div class="col-md-8"><input type="text" id="pmtAmt" class="form-control" /></div>
        </div>
        <div class="form-group row">
            <label for="pmtStatus" class="col-md-4 maroon top-padding">Video Available:</label>
            <div class="col-md-8">
                <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>
        <div class="form-group row">
            <label class="col-md-4">&nbsp;</label>
            <div class="col-md-8">
                <input type="button" id="btnUpdateViolation"
                       class="btn btn-warning" value="Update Violation/Ticket" />
            </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 Traffic Citation",   "ReviewCitation", null, htmlAttributes: new { @class = "tts-nav" })
</p>

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

<script type="text/javascript">
    $(document).ready(function () {
        $.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>");
                });
            }
        });

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

        $("#tagNbr").blur(function (event) {
            $.ajax({
                method: "GET",
                dataType: "json",
                url: "/api/Vehicles",
                success: function (data) {
                    $.each(data, function (index, car) {
                        if (car["TagNumber"] === $("#tagNbr").val()) {
                            $("input[name='vehicle']").val(car["Make"] + " " +
                                car["Model"] + " (" +
                                car["VehicleYear"] + ", " + car["Color"] + ")");
                        }
                    });
                }
            });
        }); // Vehicle Tag Number Lost Focus

        $("#btnLocateViolation").click(function (event) {
            $.ajax({
                method: "GET",
                dataType: "json",
                url: "/api/TrafficViolations/" + $("#infractionId").val(),
                success: function (data) {
                    $("#trafViolNbr").val(data.TrafficViolationNumber);
                    $("#cmrNbr").val(data.CameraNumber);
                    $("#tagNbr").val(data.TagNumber);
                    if (data.ViolationName === "Speed") {
                        $("#category").val("Speed");
                    }
                    else {
                        $("#category").val(data.ViolationName);
                    }
                    $("#trafficDate").val(data.ViolationDate);
                    $("#trafficTime").val(data.ViolationTime);
                    $("#photo").val(data.PhotoAvailable);
                    $("#video").val(data.VideoAvailable);
                    $("#pdd").val(data.PaymentDueDate);
                    $("#pmtDate").val(data.PaymentDate);
                    $("#pmtAmt").val(data.PaymentAmount);
                    $("#pmtStatus").val(data.PaymentStatus);
                }
            });

            $.ajax({
                method: "GET",
                dataType: "json",
                url: "/api/Cameras",
                success: function (data) {
                    $.each(data, function (index, device) {
                        if (device["CameraNumber"] === $("#cmrNbr").val()) {
                            $(".camera-details").val(device["Make"] + " " +
                                device["Model"] + " (Location: " +
                                device["Location"] + ")");
                        }
                    });
                }
            });

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

        $("#btnUpdateViolation").click(function (event) {
            var ticket = {
                TrafficViolationNumber: $("#trafViolNbr").val(),
                TrafficViolationId:     $("#infractionId").val(),
                CameraNumber:           $("#cmrNbr").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({
                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>

In the Solution Explorer, under Views, right-click TrafficViolations -> Add -> View...
Type Delete
Click Add

Create a form as follows:

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

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

<hr />

<form name="DriverOwner" method="post">
    <div class="traffic-holder common-font">
        <div class="form-group row">
            <label for="cameraId" class="col-md-4">Violation Id:</label>
            <div class="col-md-3"><input type="text" id="infractionId" class="form-control" /></div>
            <div class="col-md-3">
                <input type="button" id="btnShowViolation" class="btn btn-warning finding" value="Show the Violation" />
            </div>
        </div>
        <div class="form-group row">
            <label class="col-md-4">Traffic Violation #:</label>
            <div class="col-md-8"><span name="traffic-violation-number"></span></div>
        </div>
        <div class="form-group row">
            <label class="col-md-4">Camera:</label>
            <div class="col-md-8"><span name="camera"></span></div>
        </div>
        <div class="form-group row">
            <label class="col-md-4">Vehicle Tag #:</label>
            <div class="col-md-8"><span name="vehicle"></span></div>
        </div>
        <div class="form-group row">
            <label class="col-md-4">Violation Type:</label>
            <div class="col-md-8"><span name="infration" /></div>
        </div>
        <div class="form-group row">
            <label class="col-md-4">Violation Date:</label>
            <div class="col-md-8"><span name="date-of-infraction"></span></div>
        </div>
        <div class="form-group row">
            <label class="col-md-4">Violation Time:</label>
            <div class="col-md-8"><span name="time-of-infraction"></span></div>
        </div>
        <div class="form-group row">
            <label class="col-md-4">Photo is Available:</label>
            <div class="col-md-8"><span name="steady-photo-available"></span></div>
        </div>
        <div class="form-group row">
            <label class="col-md-4">Video is Available:</label>
            <div class="col-md-8"><span name="streaming-video-available"></span></div>
        </div>
        <div class="form-group row">
            <label class="col-md-4">Payment Due Date:</label>
            <div class="col-md-8"><span name="payment due date"></span></div>
        </div>
        <div class="form-group row">
            <label class="col-md-4">Payment Date:</label>
            <div class="col-md-8"><span name="last-day-payment"></span></div>
        </div>
        <div class="form-group row">
            <label class="col-md-4">Amount Owed:</label>
            <div class="col-md-8"><span name="amount-owed"></span></div>
        </div>
        <div class="form-group row">
            <label class="col-md-4">Payment Status:</label>
            <div class="col-md-8"><span name="payment-status"></span></div>
        </div>

        <hr />

        <h3 class="common-font maroon 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-warning 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("Review Traffic Citation",       "Citation", 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$='infration']").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(),
                TrafficViolationNumber: $("span[name$='traffic-violation-number']").text(),
                CameraNumber:           $("span[name$='Camera']").text(),
                TagNumber:              $("span[name$='vehicle']").text(),
                ViolationName:          $("span[name$='infration']").text(),
                ViolationDate:          $("span[name|='date']").text(),
                ViolationTime:          $("span[name|='time']").text(),
                PhotoAvailable:         $("span[name*='photo']").text(),
                VideoAvailable:         $("span[name*='video']").text(),
                PaymentDueDate:         $("span[name~='due']").text(),
                PaymentDate:            $("span[name='last-day-payment']").text(),
                PaymentAmount:          $("span[name='amount-owed']").text(),
                PaymentStatus:          $("span[name='payment-status']").text()
            };
            $.ajax({
                method: "DELETE",
                url:    "/api/TrafficViolations/" + $("#infractionId").val(),
                data:   citation,
                success: function (data) {
                    alert("The traffic violation has been canceled.")

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

In the Solution Explorer, under Views, right-click TrafficViolations -> Add -> View...
Type Citation
Click OK

Change the document as follows:

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

<h2 class="text-center bold common-font maroon bottom-border">Review Citation</h2>

<hr />

<form name="TrafficViolations" method="post">
    <div class="box-holder common-font">
        <div class="form-group row">
            <label for="cameraId" class="col-md-4 maroon top-padding">Violation Id:</label>
            <div class="col-md-3"><input type="text" id="infractionId" class="form-control" /></div>
            <div class="col-md-3">
                <input type="button" id="btnPreviewCitation" class="btn btn-warning" value="Preview the Citation" />
            </div>
        </div>
    </div>
    <input type="hidden" name="camera-number" />
    <input type="hidden" name="tag-number" />
    <input type="hidden" name="drivers-license-number" />

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

        <div class="row common-font">
            <div class="col-md-8">
                <h4 class="common-font bold">Citation #: <span name="traffic-violation-number"></span></h4>

                <h4 class="common-font bold">Violation Type: <span name="violation-name"></span> Violation</h4>
                <hr />
                <h4 class="common-font bold"><span name="driver-name"></span></h4>
                <h5 class="common-font bold"><span name="driver-address"></span></h5>
                <h5 class="common-font bold">Vehicle: <span name="vehicle"></span></h5>
                <hr />
                <h5 class="common-font bold">To <span name="driver-name"></span></h5>

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

                <p>If you recognize the traffic violation, please pay <span name="payment-amount"></span> by <span name="payment-due-date"></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-4">
                <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 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-warning").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);
                    $("input[name$='camera-number']").val(data.CameraNumber);
                    $("input[name$='tag-number']").val(data.TagNumber);
                    $("span[name|='violation-date']").text(data.ViolationDate);
                    $("span[name|='violation-time']").text(data.ViolationTime);
                    $("span[name|='violation-description']").text(data.ViolationTime);
                    $("span[name='amount-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/Vehicles",
                success: function (data) {
                    $.each(data, function (index, car) {
                        if (car["TagNumber"] === $("input[name$='tag-number']").val()) {
                            $("input[name$='drivers-license-number']").val(car["DrvLicNumber"]);
                            $("span[name$='vehicle']").text(car["Make"] + " " + car["Model"] + ", " +
                                                            car["Color"] + ", " +
                                                            car["VehicleYear"] + " (Tag # " +
                                                            car["TagNumber"] + ")");
                        }
                    });
                }
            });

            $.ajax({
                method: "GET",
                dataType: "json",
                url: "/api/Drivers",
                success: function (data) {
                    $.each(data, function (index, person) {
                        if (person["DrvLicNumber"] === $("input[name$='drivers-license-number']").val()) {
                            $("span[name$='driver-name']").text(person["FirstName"] + " " + person["LastName"] + " (Drv. Lic. # " + person["DrvLicNumber"] + ")");
                            $("span[name$='driver-address']").text(person["Address"] + " " + person["City"] + ", " + person["State"] + " " + person["ZIPCode"]);
                        }
                    });
                }
            });

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

Finalizing the Application

After creating the objects necessary for the application, we can test it. We took care of the layout wepage already. We will just have to change the index view of the Home controller.

Practical Learning: Finalizing the Application

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

Change the document as follows:

@{
    ViewBag.Title = "Welcoome to TTS";
}

<div class="row">
    <div class="col-md-20">
        <div class="management">
            <br />
            <div class="box-title yellow">MANAGEMENT</div>
            <ul>
                <li>@Html.ActionLink("Public Relations", "Index", "Home", htmlAttributes: new { @class = "manage-lead" })</li>
                <li>@Html.ActionLink("Districts/Precincts", "Index", "Home", htmlAttributes: new { @class = "manage-lead" })</li>
                <li>@Html.ActionLink("Crime Statistics", "Index", "Home", htmlAttributes: new { @class = "manage-lead" })</li>
                <li>@Html.ActionLink("Neighborhood Watch", "Index", "Home", htmlAttributes: new { @class = "manage-lead" })</li>
                <li>@Html.ActionLink("Social Calendar", "Index", "Home", htmlAttributes: new { @class = "manage-lead" })</li>
                <li>@Html.ActionLink("Careers", "Index", "Home", htmlAttributes: new { @class = "manage-lead" })</li>
                <li>@Html.ActionLink("Volunteers", "Index", "Home", htmlAttributes: new { @class = "manage-lead" })</li>
                <li>@Html.ActionLink("Internal Affairs", "Index", "Home", htmlAttributes: new { @class = "manage-lead" })</li>
                <li>@Html.ActionLink("Stress Management", "Index", "Home", htmlAttributes: new { @class = "manage-lead" })</li>
                <li>@Html.ActionLink("Patrol Services", "Index", "Home", htmlAttributes: new { @class = "manage-lead" })</li>
                <li>@Html.ActionLink("Field Services", "Index", "Home", htmlAttributes: new { @class = "manage-lead" })</li>
                <li>@Html.ActionLink("Investigations", "Index", "Home", htmlAttributes: new { @class = "manage-lead" })</li>
                <li>@Html.ActionLink("Communities", "Index", "Home", htmlAttributes: new { @class = "manage-lead" })</li>
                <li>@Html.ActionLink("Forms & Fees", "Index", "Home", htmlAttributes: new { @class = "manage-lead" })</li>
                <li>@Html.ActionLink("Press Releases", "Index", "Home", htmlAttributes: new { @class = "manage-lead" })</li>
            </ul>
            <hr />
        </div>

    </div>
    <div class="col-md-60">
        <div class="text-center">
            <img src="~/Images/tts3.png" width="668" height="180" alt="Traffic Tickets System" class="bordered" />
        </div>
        <div>
            <p class="lead">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>


            <div class="row">
                <div class="col-md-30 while-box">
                    <h2>Government</h2>
                    <p>Citizens and visitors can get more information about the available services and duties.</p>
                </div>
                <div class="col-md-30 while-box">
                    <h2>Community</h2>
                    <p>Here you can find more information about public parks (recreatiional parks, etc).</p>
                </div>
                <div class="col-md-30 while-box">
                    <h2>Relations</h2>
                    <p>Here is information about our activities, how we operate, and our future projects.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-20">
        <div class="management">
            <br />
            <div class="box-title yellow">USEFUL INFO</div>
            <ul>
                <li>@Html.ActionLink("Questions/Help", "Index", "Home", htmlAttributes: new { @class = "manage-lead" })</li>
                <li>@Html.ActionLink("News and Events", "Index", "Home", htmlAttributes: new { @class = "manage-lead" })</li>
                <li>@Html.ActionLink("Safety Tips", "Index", "Home", htmlAttributes: new { @class = "manage-lead" })</li>
                <li>@Html.ActionLink("Knowledge Base", "Index", "Home", htmlAttributes: new { @class = "manage-lead" })</li>
                <li>@Html.ActionLink("Interships", "Index", "Home", htmlAttributes: new { @class = "manage-lead" })</li>
            </ul>
            <br />
        </div>
        <div>
            <br />
            <img src="~/Images/tts4.png" width="182" height="180" alt="Traffic Tickets System" />
            <br />
        </div>
    </div>
</div>

<br />

To execute, on the main menu, click Debug -> Start Without Debugging
Click the CAMERAS link
In the webpage, click New Traffic Camera

Create the following records:

Camera #	Make	Model	Location
DGH-38460	Ashton Digital	MPH-6000	Eastern Ave and Ashburry Drv
ELQ-79284	Seaside International	BL5	Monroe Str and Westview Rd
MSR-59575	Ashton Digital	MPH-6202	Concordia Blvd and Sunset Way
DHT-29417	Woodson and Sons	NG200	Temple Ave and Barclay Rd
AHR-41518	Igawa Worldwide	442i	Eucharist Ave
HTR-93847	Ashton Digital	366d	Monrovia Str at Moon Springs
485W070	Igawa International	448H	Sleepy Hollow Avenue and South Anderson Street

Click Traffic Camera Details
In the Camera Id text box, type 3
Click Find Camera
Click Edit/Update Camera Information
In the Camera Id text box, type 3
Click the Calculate button

Change the following values:

Make:     Igawa International 
Location: East Broad Street and Lock Raven Street

Click Update Details
Click OK on the message box
Click Remove Traffic Camera
In the Camera Id text box, type 7
Click Find Camera
Click Remove Traffic Camera
Click the DRIVERS link
Click the New Driver/Owner link

In the text boxes, enter the following values:

Drv. Lic. #	First Name	Last Name	Address	City	County	State	ZIP Code
296 840 681	Simon	Havers	1884 Stewart Ln	Kittanning	Armstrong	PA	15638
273-79-4157	Terrence	McConnell	8304 Polland Str	Meadowview	Washington	VA	24361
A402-630-468	Patrick	Atherton	10744 Quincy Blvd	Cumberland:	Allegany	MD	21502
C-684-394-527	Sarah	Cuchran	10804 Euton Rd:	Shawnee Land		VA	24450
E-928-374-025	Jeannette	Eubanks	794 Arrowhead Ave	Vienna	Dorchester	MD	21869
593 804 597	George	Higgins	884 Willingmont Drv	Krumsville	Berks	PA	19530
72938468	Victoria	Huband	3958 Lubber Court	Middletown	New Castle	DE	19709
851608526	Patrick	Whalley	10227 Woodrow Rd	Shelbyville	Bedford	TN	38561
W639-285-940	David	Woodbank	9703 Abington Ave	Hurlock	Dorchester	MD	21643
S-283-942-646	Emilie	Sainsbury	4048 Utah Rd	Denville	Morris	NJ	07961
860586175	Kelly	Murray	8622 Rutger Farms Str	Rutger Farms	Macon	TN	37122

Click the VEHICLES link
Click New Vehicle Registration

In the text boxes, enter the following values:

Tag #	Drv. Lic. #	Make	Model	Year	Color
8DE9275	296 840 681	Ford	Focus SF	2000	Gray
KLT4805	593 804 597	Toyota	Corolla LE	2016	Maroon
KAS9314	W639-285-940	Cadillac	Escalade	2008	Cream
HAK3936	S-283-942-646	Chrysler	Crossfire	2006	Red
PER2849	296 840 681	Buick	LeSabre	2012	Silver
MWH4685	851608526	Honda	Accord	2008	Blue
971384	E-928-374-025	BMW	325i	2015	Navy
5293WPL	C-684-394-527	Ford	Transit Connect	2018	Navy
MKR9374	273-79-4157	Lincoln	MKT	2018	Black
FKEWKR	72938468	Toyota	Camry	2010	Silver

Click the VIOLATIONS TYPES link:
Click New Violation Type:

Create some records using the following values:

Violation Name	Description
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 drives 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 our state indicates every non-emergency vehicle to completely stop at every Stop sign, regardless of the presence or absence of incoming or adjacent vehicles.
Red Light Steady	The vehicle drove through a steady red light. The law in our state requires that when a vehicle approaches a steady red light, it must completely stop and wait for the light to change to green.
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 complete, the drive must observe around for pedestrians, animals, and other cars, and then cautiously.
Red Light Right Turn	The vehicle turns to the right without stopping. The laws in our 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, and then make the right turn.

Click TRAFFIC VIOLATIONS
Click New Traffic Violation

Create some records using the following values:

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:35	Yes	Yes	02/28/2020	02-27-2020	75	Paid On Time
29727048	DHT-29417	971384	Speed	02/06/2020	19:04:47	No	Yes	04-05-2020	03-31-2020	85	Paid On Time
42717297	DGH-38460	PER2849	Red Light Steady	01/31/2020	05:15:18	Yes	No	03/10/2020		125	Pending
47827081	AHR-41518	MWH4685	Speed	03-31-2020	22:07:31	Yes	No	02-28-2020		60	Pending
47183148	MSR-59575	8DE9275	Stop Sign	01/18/2020	14:22:48	No	Yes	03/10/2020	03/27/2020	90	Paid Late
26850869	ELQ-79284	KLT4805	Speed	04-12-2020	08:16:22	No	Yes	06-08-2020		100	Cancelled
37920479	HTR-93847	PER2849	Red Light Flashing	01/28/2020	22:14:53	No	No	03/02/2020	03-01-2020	45	Rejected
82424140	DGH-38460	KAS9314	Red Light Right Turn	01/31/2020	12:30:11	Yes	No	02-28-2020	04-02-2020	90	Paid Late
44808258	DHT-29417	FKEWKR	Speed	03/05/2020	16:07:15	No	Yes	04/22/2020	04/15/2020	85	Paid On Time
74806976	DHT-29417	971384	Speed	02/06/2020	11:58:06	No	Yes	04/05/2020	03/31/2020	85	Paid On Time
59718502	ELQ-79284	8DE9275	Speed	04-15-2020	15:25:53	Yes	No	06/02/2020		40	Pending

Click Review Traffic Violation
In the Violation Id text box, type 7
Click Preview the Citation
Close the browser and return to your programming environment
Close your programming environment


Home	Copyright © 2017-2022, FunctionX	Wednesday 04 May 2022	Home