如何缩短带有 HTML 输入的 Razor 页面

Question

我正在开发一款可以预约的应用程序。我的目标是提前 2 周制作视图，每天有 12 个输入。我怎样才能在不声明大量变量的情况下做到这一点？

@{
        IEnumerable<Reservation> ListOfDates = ViewData["ListOfDates"] as IEnumerable<Reservation>;


        TimeSpan ts1 = new TimeSpan(10, 00, 0);
        TimeSpan ts2 = new TimeSpan(10, 30, 0);
        TimeSpan ts3 = new TimeSpan(11, 00, 0);
        TimeSpan ts4 = new TimeSpan(11, 30, 0);
        TimeSpan ts5 = new TimeSpan(12, 00, 0);

        DateTime date1 = DateTime.Now.Date + ts1;

        DateTime date2 = DateTime.Now.Date + ts2;

        DateTime date3 = DateTime.Now.Date + ts3;

        DateTime date4 = DateTime.Now.Date + ts4;

        DateTime date5 = DateTime.Now.Date + ts5;

    }

<form asp-action="CreateRes">
                <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                <div class="form-check">
                    <span asp-validation-for="ServiceDate" class="text-danger"></span>
                </div>
                <div class="form-group">
                    <a>@date1.ToString("dddd, dd MMMM yyyy")</a><br />


                    <label asp-for="ServiceDate">@date1.TimeOfDay</label>
                    <input asp-for="ServiceDate" type="radio" id="dat1" value="@date1"><br>
                    <label asp-for="ServiceDate">@date2.TimeOfDay</label>
                    <input asp-for="ServiceDate" type="radio" id="dat2" value="@date2"><br>
                    <label asp-for="ServiceDate">@date3.TimeOfDay</label>
                    <input asp-for="ServiceDate" type="radio" id="dat3" value="@date3"><br>
                    <label asp-for="ServiceDate">@date4.TimeOfDay</label>
                    <input asp-for="ServiceDate" type="radio" id="dat4" value="@date4"><br>
                    <label asp-for="ServiceDate">@date5.TimeOfDay</label>
                    <input asp-for="ServiceDate" type="radio" id="dat5" value="@date5"><br>


                    <span asp-validation-for="ServiceDate" class="text-danger"></span>
                </div>
                <div class="form-group">
                    <input type="hidden" asp-for="ReservationDate" class="form-control" value="@DateTime.Now" />

                    <span asp-validation-for="ReservationDate" class="text-danger"></span>
                </div>
                <div class="form-group">
                    <select asp-for="ServiceId" class="form-select">
                        <option selected disabled>Pick</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                    </select>
                    <span asp-validation-for="ServiceId" class="text-danger"></span>
                </div>


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

我需要给每个日期一个 ID，因为这里有一个循环会禁用特定的单选按钮

@foreach (Reservation item in ListOfDates)
        {
            <a>@item.ServiceDate.Hour</a>
            if (@item.ServiceDate.Hour == 10)
            {
                <a>
                    <script>
                        document.getElementById("dat1").disabled = true;
                    </script>
                </a>
            }

            if (@item.ServiceDate.Hour == 10 && item.ServiceDate.Minute == 30)
            {
                <a>
                    <script>
                        document.getElementById("dat2").disabled = true;
                    </script>
                </a>
            }
            if (@item.ServiceDate.Hour == 11)
            {
                <a>
                    <script>
                        document.getElementById("dat3").disabled = true;
                    </script>
                </a>
            }
            if (@item.ServiceDate.Hour == 11 && item.ServiceDate.Minute == 30)
            {
                <a>
                    <script>
                        document.getElementById("dat4").disabled = true;
                    </script>
                </a>
            }
            if (@item.ServiceDate.Hour == 12)
            {
                <a>
                    <script>
                        document.getElementById("dat5").disabled = true;
                    </script>
                </a>
            }
            if (@item.ServiceDate.Hour == 12 && item.ServiceDate.Minute == 30)
            {
                <a>
                    <script>
                        document.getElementById("dat6").disabled = true;
                    </script>
                </a>
            }
        }
    </div>
</div>

是否有任何选项可以禁用控制器中的这些单选按钮？任何使此代码更清晰的提示将不胜感激。

Answer 1

在循环中生成 html 相当容易。但是我没有给每个单选按钮一个数字，而是直接从时间生成 id。但是我会禁用 HTML 中的每个单选按钮而不是生成 javascript.

var now = DateTime.Now.Date;
var booked = ListOfDates
    .Select(r => r.ServiceDate)
    .ToHashSet();

for(var i=0;i<5;i++){
    var dateValue = now + TimeSpan.FromHours(10 + i*0.5f);
    <label asp-for="ServiceDate">@dateValue.TimeOfDay</label>
    <input asp-for="ServiceDate" type="radio" id="dat@dateValue.ToString("hhMM")" value="@dateValue" disabled="@(booked.Contains(dateValue) ? "true" : null)"><br>
}

如何缩短带有 HTML 输入的 Razor 页面

How to make Razor Page with HTML inputs shorter

c#

asp.net

asp.net-mvc

asp.net-core

razor-pages