ASP.NET MVC：在循环中绑定到模型

Question

我是 ASP.NET MVC 的新手，我想弄清楚我是否能够在循环中将数据绑定到我的模型属性。

我可以在 onClick 事件中绑定它吗？

目前 chosenTime 是 1/01/0001 12:00:00 AM。

我的视图代码如下：

@model ResSProject.Models.Sittings.SittingTimesVM

<div class="d-flex justify-content-center">

    <div>@Model.RestaurantName</div>
    <div class="px-5">@Model.Date.ToString("dd-MMMM-yyyy")</div>
    <div>@Model.NumberOfGuests</div>
</div>
<form method="post" asp-action="Reservation">
    @{TimeSpan T1 = new TimeSpan(0, 15, 0);
     
        for (var increase = Model.SittingsStart.Subtract(T1); increase < Model.SittingsEnd;)
        {
            increase = increase.AddMinutes(15);

            <input class="btn btn-primary w-50 mx-auto mt-3 " type="button"  asp-for="ChosenTime" value="@increase.ToString("HH:mm tt")" />
        }
    }

    <input type="submit" value="Submit" />

    <input type="hidden" asp-for=NumberOfGuests />
    <input type="hidden" asp-for=Date />
    <input type="hidden" asp-for=RestaurantName />
    <input type="hidden" asp-for=RestaurantId />
    <input type="hidden" asp-for=SittingsStart />
    <input type="hidden" asp-for=SittingsEnd />
</form>

我的视图模型 class 是：

using ResSProject.Data;
using System.ComponentModel.DataAnnotations;

namespace ResSProject.Models.Sittings
{
    public class SittingTimesVM
    {
        public DateTime Date { get; set; }
        public int RestaurantId { get; set; }
        public string RestaurantName { get; set; }
        public int NumberOfGuests { get; set; } 
        public DateTime ChosenTime { get; set; }
        public DateTime SittingsStart { get; set; }
        public DateTime SittingsEnd { get; set; }
    }
}

Answer 1

按钮类型元素无法传递到后端。我想你需要设置一个隐藏的输入并使用js来设置选择的时间。

此外，输入的值是只有时间没有日期(value="@increase.ToString("HH:mm tt")")。当您 post 值时，它会将时间与 当前日期 绑定到属性 ChosenTime。如果 SittingsStart 和 SittingsEnd 与现在不是同一日期，则选择的时间将不正确。

整个工作演示：

@model SittingTimesVM

<div class="d-flex justify-content-center">

    <div>@Model.RestaurantName</div>
    <div class="px-5">@Model.Date.ToString("dd-MMMM-yyyy")</div>
    <div>@Model.NumberOfGuests</div>
</div>
<form method="post" asp-action="Reservation">
    @{TimeSpan T1 = new TimeSpan(0, 15, 0);
     
        for (var increase = Model.SittingsStart.Subtract(T1); increase < Model.SittingsEnd;)
        {
            increase = increase.AddMinutes(15);

            <input class="btn btn-primary w-50 mx-auto mt-3 " type="button" asp-for="ChosenTime"
                 onclick="GetValue(this)"  value="@increase.ToString("dd-MMMM-yyy HH:mm tt")" />
                                       
        }
    }
    <input asp-for="ChosenTime" type="hidden"/>
    <input type="submit" value="Submit" />

    <input type="hidden" asp-for=NumberOfGuests />
    <input type="hidden" asp-for=Date />
    <input type="hidden" asp-for=RestaurantName />
    <input type="hidden" asp-for=RestaurantId />
    <input type="hidden" asp-for=SittingsStart />
    <input type="hidden" asp-for=SittingsEnd />
</form>
@section Scripts
{
    <script>
        function GetValue(e)
        {    
            $('input:hidden[name=ChosenTime]').val($(e).val())
        }
    </script>
}

后端：

[HttpPost]
public void Reservation(SittingTimesVM model)
{
   //do your stuff...
}

另一种方式我比较推荐的是将<input>个元素组合成一个<select>个元素，不需要添加任何onclick事件来设置值.当您为 <select> 元素设置 asp-for="ChosenTime" 时，它可以成功绑定到模型属性。

@{
    TimeSpan T1 = new TimeSpan(0, 15, 0);
    <select  type="button" asp-for="ChosenTime">
        @for (var increase = Model.SittingsStart.Subtract(T1); increase < Model.SittingsEnd;)
        {
            increase = increase.AddMinutes(15);
            <option value="@increase.ToString("dd-MMMM-yyy HH:mm tt")">@increase.ToString("HH:mm tt")</option>                                       
        }
    </select>        
}

ASP.NET MVC：在循环中绑定到模型

ASP.NET MVC : binding to model within a loop

c#

asp.net-mvc

model-binding

asp.net-core