用值覆盖表单数据

Question

我有一个预订页面，其中包含一个包含预订列表的表格。每行都有一个按钮，允许编辑预订。单击此按钮时，会出现一个使用 JavaScript 的模式弹出表单，其中包含多个字段。我将预订的ID 传递到工作正常的标题中。 BookingModel 有一个 BookingViewModels 列表，其中存储了数据。

我正在尝试将字段的值设置为预订模型中的值，即@Value = @item.Date，但框中的数据不会被覆盖，但是如果我在其下方单独打印日期，则会正确打印。

如何打印框中的数据？

模型

public class BookingViewModels
{
    public List<BookingViewModel> BookingModel { get; set; }

    /// <summary>
    /// Date
    /// </summary>
    [DataType(DataType.Date)]
    [Display(Name = "Date")]
    [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd-MM-yyyy}")]
    [Required(ErrorMessage = "This field is required")]
    public string Date { get; set; }

    /// <summary>
    /// Start Time
    /// </summary>
    [DataType(DataType.Time)]
    [Display(Name = "Start Time")]
    [Required(ErrorMessage = "This field is required")]
    public string StartTime { get; set; }

    /// <summary>
    /// End Time
    /// </summary>
    [DataType(DataType.Time)]
    [Display(Name = "End Time")]
    [Required(ErrorMessage = "This field is required")]
    public string EndTime { get; set; }
}

public class BookingViewModel
{
    public int BookingId { get; set; }
    public string Date { get; set; }
    public string StartTime { get; set; }
    public string EndTime { get; set; }
    public string inf1 { get; set; }
    public string inf2 { get; set; }
}

查看

//the table with the edit buttons
@foreach (var item in Model.BookingModel)
{
    @{var grid = new WebGrid(Model.BookingModel, canSort: false); }
<input type="button" id="btnaddbooking" class="btn btn-small btn-primary" value="Add Booking" data-toggle="modal" data-target="#modalbox" />
<hr />
<div class="panel panel-default pre-scrollable">
    <table class="table table-striped table-bordered table-responsive table-condensed table-hover">
        <thead>
            <tr>
                <th>Date</th>
                <th>Start Time</th>
                <th>Duration</th>
                <th>End Time</th>
                <th>inf1</th>
                <th>inf2</th>
            </tr>
        </thead>
        @foreach (var item in Model.BookingModel)
        {
            <tr>
                <td>
                    @item.Date
                </td>
                <td>
                    @item.StartTime
                </td>
                <td>
                    @item.Duration
                </td>
                <td>
                    @item.EndTime
                </td>
                <td>
                    @item.inf1
                </td>
                <td>
                    @item.inf2
                </td>
                @using (Html.BeginForm("Delete", "Booking", FormMethod.Post))
                {
                    @Html.AntiForgeryToken()

                    <td>
                        <button class="someButtonClass" data-toggle="modal" data-target="#modalbox-@item.BookingId" />
                    </td>
                    <td>
                        <button class="someButtonClass2" type="submit" value="Delete" />
                    </td>
                }
            </tr>
        }
    </table>
</div>
}

//the modal form
@foreach (var item in Model.BookingModel)
{
    using (Html.BeginForm("Submit", "Booking", FormMethod.Post))
    {
        <div id="modalbox-@item.BookingId" class="modal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div id="modal-header" class="modal-header">
                        <h1>Edit Booking #@item.BookingId</h1>
                    </div>
                    <div class="modal-body">
                        <table id="booking-model-table" class="table table-condensed table-striped table-bordered">
                            <tr>
                                <td>Date:</td>
                                <td>
                                    @{
                                        @Html.EditorFor(m => m.Date, new { type = "time", @Value = @item.Date })
                                        @Html.ValidationMessageFor(m => m.Date, "", new { @class = "text-danger" })
                                    }
                                    @item.Date
                                </td>
                            </tr>
                            <tr>
                                <td>Start Time:</td>
                                <td>
                                    @{
                                        @Html.EditorFor(m => m.StartTime, new { type = "time", Value = @item.StartTime })
                                        @Html.ValidationMessageFor(m => m.StartTime, "", new { @class = "text-danger" })
                                    }
                                </td>
                            </tr>
                            <tr>
                                <td>End Time:</td>
                                <td>
                                    @{
                                        @Html.EditorFor(m => m.EndTime, new { type = "time", Value = @item.EndTime })
                                        @Html.ValidationMessageFor(m => m.EndTime, "", new { @class = "text-danger" })
                                    }
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="modal-footer">

                        @Html.AntiForgeryToken()
                        <button class="btn btn-default" data-dismiss="modal">Close</button>
                        <button class="btn btn-primary" type="submit" value="Submit">Ok</button>
                    </div>
                </div>
            </div>
        </div>
    }
}

JavaScript

$(function () {
var modelbox = function () {
    $("#modalbox").modal("show");
};
$("#btnaddbooking").on('click', modelbox);
});

Answer 1

您的视图应该生成一个<form> 元素（不是为集合中的每个BookingViewModel 生成一个），然后当您单击按钮时，使用关联的BookingViewModel 的值更新表单控件的值

首先删除@foreach (var item in Model.BookingModel) {，这样只会创建一个表单。

接下来将所有EditorFor() 替换为TexBoxFor() 并删除所有Value = @item.XXX 属性。

@Html.TextBoxFor(x => x.StartTime, new { type = "time" })

要使用EditorFor() 方法添加html 属性，您必须使用MVC-5.1 或更高版本，语法为

@Html.EditorFor(x => x.StartTime, new { htmlAttributes = new { type = "time" } })

您当前的实现没有添加任何属性，并且在任何情况下都不应设置value 属性，除非您希望模型绑定失败。

然后在你的表格中，添加一个用于编辑当前行的按钮

<td><button type="button" class="edit" data-id="@item.BookingId">Edit</button></td>

并处理按钮的.click() 事件以更新模态的表单控件

$('.edit'.click(function() {
    $('#BookingId').val($(this).data('id'); // you will need to add a @Html.HiddenFor(m => m.BookingId) to the form
    var cells = $(this).closest('tr').children('td');
    $('#Date').val(cells.eq(0).text());
    $('#StartTime').val(cells.eq(1).text());
    // .... ditto for other values you want to display in the form
    $("#modalbox").modal("show");
});