Javascript – Create Traffic Signal Application in .NET Core MVC

You can save this into database using below code snippet,

To capture traffic rotation details in a database and handle the insertion of records with the start and end times, you can follow these steps:

1. Create a SQL Server database and a table to store the rotation details. Here's a sample SQL script to create the table:

CREATE TABLE TrafficSignalRotations
(
    ID INT IDENTITY(1,1) PRIMARY KEY,
    RotationType VARCHAR(50),
    OpenRoad CHAR(1),
    NextOpenRoad CHAR(1),
    TimeDuration INT,
    StartTime DATETIME,
    EndTime DATETIME
);

2. Modify the C# code in your .NET Core MVC controller to insert and update records in the database. You'll need to use Entity Framework Core for database operations. If you haven't already, install Entity Framework Core and configure it in your project.

Controller (SignalController.cs):

using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using System;
using System.Linq;
using TrafficSignalApp.Models;

namespace TrafficSignalApp.Controllers
{
    public class SignalController : Controller
    {
        private readonly AppDbContext _context;

        public SignalController(AppDbContext context)
        {
            _context = context;
        }

        public IActionResult Index()
        {
            var model = new SignalModel
            {
                Duration = 15, // Default duration
                RotationType = "Clockwise", // Default rotation type
                OpenRoad = "A", // Default open road
                NextOpenRoad = "B", // Default next open road
                RemainTime = 5 // Default remaining time
            };

            return View(model);
        }

        [HttpPost]
        public IActionResult StartSignal(SignalModel model)
        {
            if (ModelState.IsValid)
            {
                var rotation = new TrafficSignalRotation
                {
                    RotationType = model.RotationType,
                    OpenRoad = model.OpenRoad,
                    NextOpenRoad = model.NextOpenRoad,
                    TimeDuration = model.Duration,
                    StartTime = DateTime.Now
                };

                _context.TrafficSignalRotations.Add(rotation);
                _context.SaveChanges();

                return RedirectToAction("Index");
            }

            return View("Index", model);
        }

        [HttpPost]
        public IActionResult EndSignal()
        {
            var lastRotation = _context.TrafficSignalRotations.LastOrDefault();
            if (lastRotation != null && lastRotation.EndTime == null)
            {
                lastRotation.EndTime = DateTime.Now;
                _context.SaveChanges();
            }

            return RedirectToAction("Index");
        }
    }
}

3. Create an AppDbContext class to configure the Entity Framework context for your application.

DbContext (AppDbContext.cs):

using Microsoft.EntityFrameworkCore;

namespace TrafficSignalApp.Models
{
    public class AppDbContext : DbContext
    {
        public AppDbContext(DbContextOptions<AppDbContext> options) : base(options)
        {
        }

        public DbSet<TrafficSignalRotation> TrafficSignalRotations { get; set; }
    }
}

4. Modify your Startup.cs to configure the database connection and Entity Framework services. Make sure you've added the required NuGet packages for Entity Framework and your database provider.

Startup.cs:

using Microsoft.EntityFrameworkCore;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using TrafficSignalApp.Models;

public class Startup
{
    // ...

    public void ConfigureServices(IServiceCollection services)
    {
        services.AddDbContext<AppDbContext>(options =>
            options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));

        // ...
    }

    // ...
}

5. In your appsettings.json, specify the connection string for your database.

appsettings.json:

{
  "ConnectionStrings": {
    "DefaultConnection": "Server=YourServer;Database=YourDatabase;Trusted_Connection=True;MultipleActiveResultSets=true"
  },
  // ...
}

With these modifications, the traffic signal rotation details will be stored in the database, and records will be updated with the end time when a new rotation starts.

Pass Data from view to controller to database:

To pass data from your view to your controller using AJAX and jQuery, you can create a JavaScript function that collects the data from the HTML elements and sends it to the server. Here's how you can do it:

1. Add a button or link in your view that will trigger the AJAX request. For example:

<button id="updateDataButton" class="btn btn-primary">Update Data</button>

2. Create a JavaScript function in your view that collects the data from the HTML elements and sends it to the server. Use jQuery for the AJAX request. In your view, add a script section to include the JavaScript code:

<script>
    $(document).ready(function () {
        $("#updateDataButton").click(function () {
            // Collect data from HTML elements
            var duration = $("#infoDuration").text();
            var rotationType = $("#infoType").text();
            var openRoad = $("#infoOpenRoad").text();
            var nextOpenRoad = $("#infoNextRoad").text();
            var remainTime = $("#infoRemainTime").text();

            // Create an object to hold the data
            var data = {
                Duration: duration,
                RotationType: rotationType,
                OpenRoad: openRoad,
                NextOpenRoad: nextOpenRoad,
                RemainTime: remainTime
            };

            // Send the data to the server using AJAX
            $.ajax({
                type: "POST",
                url: "/YourController/UpdateData", // Replace with your controller and action
                data: data,
                success: function (response) {
                    // Handle the response from the server, if needed
                },
                error: function (error) {
                    // Handle any errors, if needed
                }
            });
        });
    });
</script>

3. In your controller, create an action to handle the data update. For example:

[HttpPost]
public IActionResult UpdateData(SignalModel data)
{
    // Update the data in your application, e.g., save it to the database
    // You can access data.Duration, data.RotationType, etc., to get the data passed from the view.

    // Return a response, if needed
    return Json(new { success = true });
}

In the example above, when the "Update Data" button is clicked, the JavaScript function collects data from the HTML elements and sends it to the UpdateData action in your controller using AJAX. The action processes the data, and you can return a response back to the client if needed. Make sure to replace "/YourController/UpdateData" with the actual URL of your controller action.