[dotNET Core]传递 model 以查看 -> 将复选框与其数据以 POST 方法形式绑定 -> 将整个 model 发送到 controller

Question

我需要一些帮助。 我正在尝试将ShowSeatsViewModel传递给Seats.cshtml将其与传递的视图模型字段绑定，并将其与新值一起发送回 controller。

视图模型：

using System.Collections.Generic;

namespace theatre_dotNET.Models
{
    public class SpectacleShowsViewModel : Spectacle
    {
        public List<Show> IncomingShows { get; set; }
        public Show pickedShow { get; set; }
        public int[] availableSeats { get; set; }
        public int[] bookedSeats { get; set; }
        public SpectacleShowsViewModel(Spectacle s, List<Show> incomingShows)
        {
            this.SpectacleId = s.SpectacleId;
            this.Title = s.Title;
            this.Description = s.Description;
            this.Price = s.Price;
            this.VideoLink = s.VideoLink;
            this.Rating = s.Rating;
            IncomingShows = incomingShows;
        }
    }
}

controller的两种方法：

[Authorize]
public IActionResult Seats(Show chosenShow)
{
    int[] availableSeats = _context.Seats.Select(s => s.SeatId).ToArray();
    int[] bookedSeats = _context.BookedSeats.Where(i => i.ShowId == chosenShow.ShowId).Select(s => s.SeatId).ToArray();

    return View(new ShowSeatsViewModel(chosenShow, availableSeats, bookedSeats));
}

[Authorize]
[HttpPost]
public IActionResult Seats(ShowSeatsViewModel chosenShowSeatsViewModel)
{
    return Content("Picked seats : "+chosenShowSeatsViewModel.PickedSeats);
}

看法：

@model ShowSeatsViewModel

<h1>Chosen Spectacle : Model.SpectacleId</h1>
<form asp-controller="Booking" asp-action="Seats" method="post">
<div class="row">
@foreach(var seat in Model.AvailableSeats)
{
    @if(Model.UnavailableSeats.Contains(@seat))
    {
        <div class="col">
            @Html.CheckBoxFor(m=>m.PickedSeats[@seat-1])
            @Html.LabelFor(m=>m.PickedSeats[@seat-1],@seat.ToString())
        </div>
    }
    else
    {
        <div class="col">
            @Html.CheckBoxFor(mdl => mdl.PickedSeats[@seat-1])
            @Html.LabelFor(mdl => mdl.PickedSeats[@seat-1],@seat.ToString())
        </div>
    }
}
</div>
<button type="submit">Submit</button>
</form>

还有一个错误 - 选择复选框并单击提交按钮后：

InvalidOperationException: Could not create an instance of type 'theatre_dotNET.Models.ShowSeatsViewModel'. Model bound complex types must not be abstract or value types and must have a parameterless constructor. Alternatively, give the 'chosenShowSeatsViewModel' parameter a non-null default value.

如何通过 post 方法发送现有的（从控制器传递的）ViewModel？ 可能吗？

Answer 1

编辑：我正在更新我的答案。

在您的情况下，如果没有自定义 model 绑定，则不能 model 绑定到该 Object 。

1. 这是一个没有无参数构造函数的复杂 object。
2. 您需要具有表单中的所有属性才能传递整个 model。 正如你所说，这不是你想要的。

在您的情况下，自定义 model 活页夹是一个复杂的实现，您必须在整个应用程序中一遍又一遍地完成。 我不会推荐这种方法。

在客户端，我会使用像JQUERY这样的库来执行复杂对象的发布。

这是一个例子。

1. 使用以下 function 创建一个JS脚本以使用复杂对象运行这些POST请求。

这是JQuery的示例

function ajaxRequest(httpVerb, url, model, onSuccess, onFail, onComplete) {
    if (httpVerb === null || httpVerb.length === 0) httpVerb = "POST";
    $.ajax({
        url: url,
        type: httpVerb,
        cache: false,
        traditional: true,
        data: JSON.stringify(model),
        dataType: "json",
        contentType: 'application/json; charset=utf-8'
    }).done(function (data) {
       //onSuccess()...
    }).fail(function (err) {
       //onFail()...
    }).always(function (data) {
       //onComplete()...
    });
}

这是您的称呼

     var model = @Html.Raw(Json.Encode(Model)); //this gets your view model and converts it to a JS object. 
     //Or you can take the time and create it manually
     var model = {...}

        //take the form values and replace the model properties as needed
        // make sure to give your HTML elements in the forms ID attributes so you can select them.
        model.PickedSeats = $('#myCheckboxById').is(':checked');
        ...
        // do the same with the other form values

        ajaxRequest("POST", "/Booking/Seats", model , null, null, null);
        //the null values being passed in are the callback functions you would perform in the method signature. I just left them null to simplify things.