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 LearningPractical Learning: Introducing the Application

  1. Start Microsoft Visual Studio
  2. In the Visual Studio 2019 dialog box, click Create a New Project
  3. Click Next
  4. In the list of projects templates, click ASP.NET Web Application (.NET Framework)
  5. Press Enter
  6. Change the project Name to TrafficTicketsSystem1
  7. Select the highest value in the Framework combo box.
    Uncheck the Configure For HTTPS check box.
    Click Create
  8. In the dialog box, click the Web API icon
  9. Press Enter
  10. In the Solution Explorer, right-click TrafficTicketsSystem1 -> Add -> New Folder
  11. Type TrafficControllers
  12. In the Solution Explorer, right-click TrafficTicketsSystem1 -> Add -> New Folder
  13. Type Images
  14. Copy and paste the following pictures to the Images folder:

    Traffic Tickets System
    Traffic Tickets System Traffic Tickets System
    Chair
  15. In the Solution Explorer, right-click Content -> Add -> Style Sheet
  16. Type TrafficTicketsSystem
  17. Press Enter
  18. 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;
    }
  19. In the Solution Explorer, expand App_Start and double-click BundleConfig.cs
  20. 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"));
            }
        }
    }
  21. In the Solution Explorer, under Views, expand Shared and click _Layout.cshtml
  22. 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 LearningPractical Learning: Creating a Database

  1. 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
  2. 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
  3. To execute, on the SQL Editor toolbar, click the Execute button Execute
  4. Close the Query window
  5. When asked whether you want to save, click No
  6. In the Solution Explorer, right-click Models -> Add -> New Item...
  7. In the left frame of the dialog box, click Data and, in the middle frame, click ADO.NET Entity Data Model
  8. Change the name to TicketsManagementModel
  9. Click Add
  10. In the first page of the Entity Data Model Wizard, click Code First From Database

    Entity Data Model Wizard

    Click Next
  11. 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

    Entity Data Model Wizard

    Click Next
  12. In the third page of the Entity Data Model Wizard, click the Tables and Views check boxes
  13. Click Finish. Click OK on the Security Warning message boxes
  14. 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 LearningPractical Learning: Managing Violations Types

  1. In the Solution Explorer, right-click TrafficControllers -> Add -> Controller...
  2. In the middle list of the Add Scaffold dialog box, click Web API 2 Controller With Actions, Using Entity Framework

    Add Scaffold

  3. Click Add
  4. In the Model Class combo box, select ViolationType (TrafficTicketsSystem1.Models)
  5. In the Data Context Class combo box, select TrafficTicketsSystem1Entities (TrafficTicketsSystem1.Models)
  6. Make sure the Controller Name text box is displaying ViolationTypesController.
    Click Add
  7. In the Solution Explorer, right-click Controllers -> Add -> Controller...
  8. In the middle frame of the Add Scaffold dialog box, click MVC 5 Controller With Read/Write Actions

    Add Scaffold

  9. Press Enter
  10. Type ViolationsTypes to get ViolationsTypesController
  11. Click Add
  12. In the ViolationTypesController class, right-click Index() and click Add View...
  13. In the Add View dialog box, make sure the View Name text box is displaying Index

    Add View

    Click Add
  14. 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>
  15. Click the ViolationTypesController.cs tab
  16. In the class, right-click Details() and click Add View...
  17. Make sure the View Name text box is displaying Details

    Add View

    Click Add
  18. 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>
  19. Click the ViolationTypesController.cs tab
  20. In the class, right-click one of the Create() methods and click Add View...
  21. Make sure the View Name text box is displayiing Create

    Add View

    Click Add
  22. 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>
  23. In the Solution Explorer, under Views, right-click ViolationTypes -> Add -> View...
  24. Type Edit in the View Name text box

    Add View

  25. Click Add
  26. 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>
  27. In the Solution Explorer, under Views, right-click ViolationTypes -> Add -> View...
  28. Type Delete

    Add View

  29. Click Add
  30. 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 LearningPractical Learning: Creating Cameras

  1. In the Solution Explorer, right-click TrafficControllers -> Add -> New Scaffoled Item...
  2. 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
  3. Click Add
  4. In the Model Class combo box, select Camera (TrafficTicketsSystem1.Models)
  5. Make sure the Data Context Class combo box is displaying TrafficTicketsSystem1Entities (TrafficTicketsSystem1.Models).
    Click Add
  6. In the Solution Explorer, right-click Controllers -> Add -> Controller...
  7. In the middle list of the Add Scaffold dialog box, click MVC 5 Controller With Read/Write Actions
  8. Click Add
  9. Type Cameras to get CamerasController
  10. Click Add
  11. In the class, right-click Index() and click Add View...
  12. In the Add View dialog box, make sure the View Name text box is displaying Index.
    Click Add
  13. 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>
  14. Click CamerasController.cs tab
  15. In the class, right-click Details() -> Add View...
  16. Make sure the View Name text box is displaying Details.
    Click Add
  17. 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>
  18. Click the CamerasController.cs tab
  19. In the class, right-click inside one of the Create() methods -> Add View...
  20. Make sure the View Name text box is displaying Create.
    Click Add
  21. 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>
  22. In the Solution Explorer, under Views, right-click Cameras -> Add -> View...
  23. Type Edit
  24. Click Add
  25. 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>
  26. In the Solution Explorer, under Views, right-click Cameras -> Add -> View...
  27. Type Delete
  28. Click Add
  29. 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 LearningPractical Learning: Creating Drivers

  1. In the Solution Explorer, right-click TrafficControllers -> Add -> New Scaffolded Item...
  2. 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
  3. In the Model Class combo box, select Driver (TrafficTicketsSystem1.Models)
  4. Make sure the Data Context Class combo box is displaying TrafficTicketsSystem1Entities (TrafficTicketsSystem1.Models).
    Click Add
  5. In the Solution Explorer, right-click Controllers -> Add -> Controller...
  6. In the middle list of the Add Scaffold dialog box, click MVC 5 Controller With Read/Write Actions
  7. Click Add
  8. Type Drivers to get DriversController
  9. Click Add
  10. In the class, right-click Index() -> Add View...
  11. Make sure the View Name text box is displaying Index.
    Click Add
  12. 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>
  13. Click the DriversController.cs tab
  14. In the class, right-click Details() -> Add View...
  15. Make sure the View Name text box is displaying Details.
    Click Add
  16. 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>
  17. In the Solution Explorer, under Views, right-click Drivers -> Add -> View...
  18. Type Create
  19. Click Add
  20. 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>
  21. In the Solution Explorer, under Views, right-click Drivers -> Add -> View...
  22. Type Edit
  23. Click Add
  24. 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>
  25. In the Solution Explorer, under Views, right-click Drivers -> Add -> View...
  26. Type Delete
  27. Click Add
  28. 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 LearningPractical Learning: Creating Vehicles

  1. In the Solution Explorer, right-click TrafficControllers -> Add -> New Scaffolded Item...
  2. 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
  3. Click Add
  4. In the Model Class combo box, select Vehicle (TrafficTicketsSystem1.Models)
  5. Make sure the Data Context Class combo box is displayinig TrafficTicketsSystem1Entities (TrafficTicketsSystem1.Models).
    Click Add
  6. In the Solution Explorer, right-click Controllers -> Add -> Controller...
  7. In the middle list, click MVC 5 Controller With Read/Write Actions
  8. Press Enter
  9. Type Vehicles to get VehiclesController
  10. Click Add
  11. In the class, right-click Index() -> Add View...
  12. Make sure the View Name text box is displaying Index.
    Click Add
  13. 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>
  14. In the Solution Explorer, under Views, right-click Vehicles -> Add -> View...
  15. Type Details
  16. Press Enter
  17. 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>
  18. In the Solution Explorer, right-click Vehicles -> Add -> View...
  19. Type Create
  20. Press Enter
  21. 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>
  22. Click the VehiclesController.cs tab
  23. In the class, right-click one of the Edit() methods -> Add View...
  24. Make sure the View Name text box is displaying Edit.
    Click Add
  25. 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>
  26. Click the VehiclesController.cs
  27. In the class, right-click Delete() -> Add View...
  28. Make sure the View Name text box is displaying Delete.
    Click Add
  29. 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 LearningPractical Learning: Creating Traffic Violations

  1. In the Solution Explorer, right-click TrafficControllers -> Add -> Controller...
  2. In the middle list of the Add Scaffold dialog box, click Web API 2 Controller With Actions, Using Entity Framework
  3. Click Add
  4. In the Model Class combo box, select TrafficViolation (TrafficTicketsSystem1.Models)
  5. Make sure the Data Context Class is displaying TrafficTicketsSystem1Entities (TrafficTicketsSystem1.Models).
    Click Add
  6. In the Solution Explorer, right-click Controllers -> Add -> New Scaffolded Item...
  7. 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
  8. Click Add
  9. Type TrafficViolations to get TrafficViolationsController
  10. click Add
  11. In the class, right-click Index() -> Add View...
  12. Make sure the View Name text box is displaying Index.
    Click Add
  13. 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>
  14. In the Solution Explorer, under Views, right-click TrafficViolations -> Add -> View...
  15. Type to Details
  16. Press Enter
  17. 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>
  18. In the Solution Explorer, under Views, right-click TrafficViolations -> Add -> View...
  19. Type Create
  20. Press Enter
  21. 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>
  22. In the Solution Explorer, under Views, right-click TrafficViolations -> Add -> View...
  23. Type Edit
  24. Click Add
  25. 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>
  26. In the Solution Explorer, under Views, right-click TrafficViolations -> Add -> View...
  27. Type Delete
  28. Click Add
  29. 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>
  30. In the Solution Explorer, under Views, right-click TrafficViolations -> Add -> View...
  31. Type Citation
  32. Click OK
  33. 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 LearningPractical Learning: Finalizing the Application

  1. In the Solution Explorer, under Views, expand Home and double-click Index.cshtml
  2. 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 />
  3. To execute, on the main menu, click Debug -> Start Without Debugging

    Traffic Tickets System - Home Page

  4. Click the CAMERAS link

    Traffic Tickets System - Cameras

  5. In the webpage, click New Traffic Camera

    Traffic Tickets System - Traffic Camera Setup

    Traffic Tickets System - Traffic Camera Setup

  6. 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

    Traffic Tickets System

  7. Click Traffic Camera Details

    Traffic Tickets System

  8. In the Camera Id text box, type 3
  9. Click Find Camera

  10. Click Edit/Update Camera Information
  11. In the Camera Id text box, type 3
  12. Click the Calculate button

    Traffic Tickets System - Edit/Update Camera Information

  13. Change the following values:
    Make:     Igawa International 
    Location: East Broad Street and Lock Raven Street
  14. Click Update Details

    Traffic Tickets System

  15. Click OK on the message box

    Traffic Tickets System

  16. Click Remove Traffic Camera
  17. In the Camera Id text box, type 7
  18. Click Find Camera
  19. Click Remove Traffic Camera

    Traffic Tickets System

    ComboBox

  20. Click the DRIVERS link

    Traffic Tickets System

  21. Click the New Driver/Owner link

    Traffic Tickets System

  22. 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

    Traffic Tickets System

  23. Click the VEHICLES link

    Traffic Tickets System

  24. Click New Vehicle Registration

    Traffic Tickets System

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

    Traffic Tickets System

    Traffic Tickets System

    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

    Traffic Tickets System

  26. Click the VIOLATIONS TYPES link:

    Disposing of an Object

  27. Click New Violation Type:

    Traffic Tickets System

  28. Create some records using the following values:

    Traffic Tickets System

    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.

    Traffic Tickets System

  29. Click TRAFFIC VIOLATIONS

    Traffic Tickets System

  30. Click New Traffic Violation

    Traffic Tickets System

  31. Create some records using the following values:

    Traffic Tickets System

    Traffic Tickets System

    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
  32. Click Review Traffic Violation
  33. In the Violation Id text box, type 7
  34. Click Preview the Citation

    Traffic Tickets System - Citation Review

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

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