根据ASP.NET Core 3剃须刀页面中的选择列表项动态更改输入值

Question

我正在使用Razor Pages开发ASP.NET Core 3.1 Web应用程序。我有以下课程（简化）：

public class Activity
{
    public int ActivityId { get; set; }
    public string ActivityName { get; set; }
    public decimal PointsPerUnit { get; set; }
}

public class ActivityLog
{
    public int ActivityLogId { get; set; }
    public int ActivityId { get; set; }
    public int Units { get; set; }
    public decimal TotalPoints { get; set; }

    public Activity Activity { get; set; }
}

[两个SQL表之间，在字段ActivityId上有一个外键。

这是我的Razor页面（简体）：

<form method="post">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>

    <div class="form-group">
        <label asp-for="ActivityLog.ActivityId" class="control-label"></label>
        <select id="activityId" asp-for="ActivityLog.ActivityId" class="form-control" asp-items="ViewBag.ActivityId">
            <option value=""></option>
        </select>
    </div>

    <div class="form-group">
        <label asp-for="ActivityLog.Units" class="control-label"></label>
        <input asp-for="ActivityLog.Units" class="form-control" id="units" />
        <span asp-validation-for="ActivityLog.Units" class="text-danger"></span>
    </div>

    <div class="form-group">
        <label asp-for="ActivityLog.TotalPoints" class="control-label"></label>
        <input asp-for="ActivityLog.TotalPoints" class="form-control" readonly="@true" value="" id="totalPoints" />
        <span asp-validation-for="ActivityLog.TotalPoints" class="text-danger"></span>
    </div>

    <div class="form-group">
        <input type="submit" value="Create" class="btn btn-primary" />
    </div>
</form>

@foreach (var item in Model.Activities)
{
    <input id="[email protected]" type="hidden" value="@item.PointsPerUnit" />
}

我也有一个Razor页面，用于创建新的“ ActivityLog”。在该页面上，我有一个选择列表（下拉列表），其中填充有一个列表，其中值是ActivityId，文本是ActivityName。

我需要做的是当用户从选择列表中选择一个活动并在“单位”字段中输入值（TotalPoints = PointsPerUnit * Units）时动态地​​计算TotalPoints字段。

问题是我找不到在Razor页面中访问所选Activity的PointsPerUnit并动态设置TotalPoints字段值的方法。

我设法使用JavaScript做到了，但是我想有一种更好，更清洁的方法。这是对我有用的代码：

（外部JS文件）：

$(document).ready(function () {
    $(document).on("change", "#activityId", calculateTotalPoints);
    $(document).on("change", "#units", calculateTotalPoints);

    function calculateTotalPoints() {
        var units = $("#units").val();
        var pointsPerUnit = $("#activity-" + $("#activityId").val()).val();

        if (units != "" && pointsPerUnit != "") {
            var totalPoints = units * pointsPerUnit;
            console.log("totalPoints: " + totalPoints);
            $("#totalPoints").val(totalPoints);
        }
        else {
            $("#totalPoints").val("");
        }
    }
});

我在“活动”表中仍然只有2行，但是如果它增加了，那将意味着在页面上创建许多隐藏的输入。有没有客户端代码的方法吗？

谢谢。

Answer 1

我在“活动”表中仍然只有2行，但是如果它增加了，那将意味着在页面上创建许多隐藏的输入。有没有客户端代码的方法吗？

1。注释以下代码：

@foreach (var item in Model.Activities)
{
  <input id="[email protected]" type="hidden" value="@item.PointsPerUnit" />
}

2。更改calculateTotalPoints功能：

function calculateTotalPoints() {
    var units = $("#units").val();
    var activityId = $("#activityId").val();
    var pointsPerUnit;
    var list [email protected](Model.Activities);
    for (var i = 0; i < list.length;i++){
        if (activityId == list[i].activityId) {
            pointsPerUnit = list[i].pointsPerUnit;
            break;
        }
    }
    if (units != "" && pointsPerUnit != "") {
        var totalPoints = units * pointsPerUnit;
        console.log("totalPoints: " + totalPoints);
        $("#totalPoints").val(totalPoints);
    }
    else {
        $("#totalPoints").val("");
    }
  }