Question

我有一个预订页面，其中包含一张包含预订列表的表格。每行都有一个按钮，可以编辑预订。单击此按钮时，将使用包含许多字段的JavaScript显示模式弹出窗体。我将预订的<div id="cssmenu"> <ul> <li><a href="index.php"">Home</a></li> <li><a href="#">Boot Camp</a> <ul> <li><a href="th6.php">Townhall 6</a></li> <li><a href="th7.php">Townhall 7</a></li> <li><a href="th8.php">Townhall 8</a></li> <li><a href="th9.php">Townhall 9</a></li> <li><a href="th10.php">Townhall 10</a></li> <li><a href="th11.php">Townhall 11</a></li> </ul> </li> <li><a href="#">Information</a> <ul> <li><a href="about.php">About Us</a></li> <li><a href="contact.php">Contact Us</a></li> </ul> </li> <li><a href="#">Rules</a> <ul> <li><a href="rules.php">Normal</a></li> <li><a href="war.php">War</a></li> </ul> </li> <li><a href="#">Stats</a></li> </ul> </div>传递到标题中，工作正常。 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; }
}

的JavaScript

//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>
    }
}

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");
});

使用值覆盖表单数据

1 个答案: