下面是一个完整的.NET Core MVC应用程序示例,它模拟了一个交通信号灯,并对旋转持续时间和类型进行了动态设置。
模型(SignalModel.cs):
namespace TrafficSignalApp.Models
{
public class SignalModel
{
public int Duration { get; set; }
public string RotationType { get; set; }
public string OpenRoad { get; set; }
public string NextOpenRoad { get; set; }
public int RemainTime { get; set; }
}
}
字符串
视图(Index.cshtml):
@model TrafficSignalApp.Models.SignalModel
@{
ViewData["Title"] = "Traffic Signal";
}
<div class="container">
<div class="config">
<label asp-for="Duration">Time Duration (5-120 sec):</label>
<input asp-for="Duration" min="5" max="120" value="15">
<label asp-for="RotationType">Signal Rotation Type:</label>
<select asp-for="RotationType">
<option value="Clockwise">Clockwise</option>
<option value="Anticlockwise">Anticlockwise</option>
<option value="UpDown">Up to Down or Down to Up</option>
<option value="LeftRight">Left to Right or Right to Left</option>
</select>
<button id="start">Start</button>
</div>
<div class="traffic-signal">
<div class="road" id="A" style="background-color: @Model.OpenRoad == "A" ? "green" : "red"></div>
<div class="road" id="B" style="background-color: @Model.OpenRoad == "B" ? "green" : "red"></div>
<div class="road" id="C" style="background-color: @Model.OpenRoad == "C" ? "green" : "red"></div>
<div class="road" id="D" style="background-color: @Model.OpenRoad == "D" ? "green" : "red"></div>
</div>
<div class="info">
<p>Road Rotation Duration: <span id="infoDuration">@Model.Duration</span> Sec.</p>
<p>Road Rotation Type: <span id="infoType">@Model.RotationType</span></p>
<p>Open Road: <span id="infoOpenRoad">@Model.OpenRoad</span></p>
<p>Next Open Road: <span id="infoNextRoad">@Model.NextOpenRoad</span></p>
<p>Remain Time: <span id="infoRemainTime">@Model.RemainTime</span> Sec.</p>
</div>
</div>
@section Scripts {
<script src="~/js/script.js"></script>
}
型
控制器(SignalController.cs):
using Microsoft.AspNetCore.Mvc;
using TrafficSignalApp.Models;
namespace TrafficSignalApp.Controllers
{
public class SignalController : Controller
{
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);
}
}
}
型
JavaScript(wwwroot/js/script.js):
$(document).ready(function () {
var rotationDuration = parseInt($("#infoDuration").text());
var rotationType = $("#infoType").text();
var openRoad = $("#infoOpenRoad").text();
var remainTime = parseInt($("#infoRemainTime").text());
var timeInterval;
var timeDuration = 1000; // Default time duration in milliseconds
function updateInfo() {
$("#infoDuration").text(rotationDuration);
$("#infoType").text(rotationType);
$("#infoOpenRoad").text(openRoad);
// Calculate the next open road
var roadOrder = ["A", "B", "C", "D"];
var currentIndex = roadOrder.indexOf(openRoad);
var nextIndex =
rotationType === "Clockwise"
? (currentIndex + 1) % roadOrder.length
: rotationType === "Anticlockwise"
? (currentIndex - 1 + roadOrder.length) % roadOrder.length
: rotationType === "UpDown"
? currentIndex % 2 === 0
? (currentIndex + 2) % roadOrder.length
: (currentIndex + 1) % 2 === 0
? (currentIndex - 1 + roadOrder.length) % roadOrder.length
: currentIndex
: rotationType === "LeftRight"
? currentIndex % 2 === 0
? (currentIndex + 1) % 2 === 0
? (currentIndex - 2 + roadOrder.length) % roadOrder.length
: (currentIndex + 1) % roadOrder.length
: (currentIndex + 2) %
roadOrder.length
: currentIndex;
$("#infoNextRoad").text(roadOrder[nextIndex]);
$("#infoRemainTime").text(remainTime);
}
function switchLights() {
$(".road").removeClass("green");
$("#" + openRoad).addClass("green");
}
function rotateRoad() {
var roadOrder = ["A", "B", "C", "D"];
var currentIndex = roadOrder.indexOf(openRoad);
switchLights();
currentIndex =
rotationType === "Clockwise"
? (currentIndex + 1) % roadOrder.length
: rotationType === "Anticlockwise"
? (currentIndex - 1 + roadOrder.length) % roadOrder.length
: rotationType === "UpDown"
? currentIndex % 2 === 0
? (currentIndex + 2) % roadOrder.length
: (currentIndex + 1) % 2 === 0
? (currentIndex - 1 + roadOrder.length) % roadOrder.length
: currentIndex
: rotationType === "LeftRight"
? currentIndex % 2 === 0
? (currentIndex + 1) % 2 === 0
? (currentIndex - 2 + roadOrder.length) % roadOrder.length
: (currentIndex + 1) % roadOrder.length
: (currentIndex + 2) % roadOrder.length
: currentIndex;
openRoad = roadOrder[currentIndex];
remainTime = rotationDuration;
updateInfo();
}
function startSignal() {
$("#start").prop("disabled", true);
timeInterval = setInterval(function () {
if (remainTime > 0) {
remainTime--;
updateInfo();
} else {
rotateRoad();
}
}, timeDuration);
}
$("#start").click(function () {
rotationDuration = parseInt($("#infoDuration").text());
rotationType = $("#infoType").text();
updateInfo();
switchLights();
startSignal();
});
});
型
此代码在.NET Core MVC应用程序中设置动态交通信号,并设置循环持续时间和类型。JavaScript代码根据选定的类型处理动态循环。视图允许用户配置这些设置。
2条答案
按热度按时间1aaf6o9v1#
开始按钮下方:
字符串
JavaScript代码中的
startSignal
函数根据您配置的timeDuration
启动信号旋转。如果您想添加“停止”功能,可以如下修改代码:型
在此修改后的代码中:
1.我们添加了一个
signalRunning
变量来跟踪信号当前是正在运行还是停止。startSignal
函数现在仅在信号尚未运行时调用。它将signalRunning
设置为true
并启动信号旋转。stopSignal
功能清除间隔,并将signalRunning
设置为false
。当点击“停止”按钮时,这将有效地停止信号旋转。1.“Stop”按钮单击事件现在调用
stopSignal
函数来在单击按钮时停止信号。此修改允许您根据需要启动和停止信号旋转,防止多个同时启动,并确保单击“停止”按钮时停止信号。
4urapxun2#
您可以使用下面的代码片段将其保存到数据库中,
要在数据库中捕获流量轮换详细信息并处理插入包含开始和结束时间的记录,您可以执行以下步骤:
1.创建一个SQL Server数据库和一个表来存储循环详细信息。下面是创建表的示例SQL脚本:
字符串
1.修改.NET Core MVC控制器中的C#代码以插入和更新数据库中的记录。您需要使用Entity Framework Core进行数据库操作。如果尚未安装Entity Framework Core,请在项目中对其进行配置。
控制器(SignalController.cs):
型
1.创建一个
AppDbContext
类来配置应用程序的实体框架上下文。DbContext(AppDbContext.cs):
型
1.修改您的
Startup.cs
以配置数据库连接和Entity Framework服务。请确保已为Entity Framework和数据库提供程序添加所需的NuGet包。Startup.cs:
型
1.在
appsettings.json
中,指定数据库的连接字符串。appsettings.json:
型
通过这些修改,交通信号灯轮换的详细信息将存储在数据库中,并且当新的轮换开始时,记录将随着结束时间而更新。
将数据从视图传递到控制器再传递到数据库:
要使用AJAX和jQuery将数据从视图传递到控制器,您可以创建一个JavaScript函数,该函数从HTML元素收集数据并将其发送到服务器。以下是如何做到这一点:
1.在视图中添加一个按钮或链接,以触发AJAX请求。例如:
型
1.在视图中创建一个JavaScript函数,它从HTML元素中收集数据并将其发送到服务器。使用jQuery进行AJAX请求。在视图中,添加一个脚本部分以包含JavaScript代码:
型
1.在您的控制器中,创建一个操作来处理数据更新。例如:
型
在上面的示例中,当单击“更新数据”按钮时,JavaScript函数从HTML元素收集数据,并使用AJAX将其发送到控制器中的
UpdateData
操作。该操作处理数据,如果需要,您可以将响应返回给客户端。请确保将“/YourController/UpdateData”替换为控制器操作的实际URL。