使用值覆蓋表格數據

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

你的觀點應該是GE nerating一個<form>元素（不一個集合中的每個BookingViewModel），然後當你點擊按鈕，通過刪除@foreach (var item in Model.BookingModel) {所以只有一種形式與相關BookingViewModel

開始的值更新表單控件的值被建造。

接下來將所有EditorFor()替換爲TexBoxFor()並刪除所有Value = @item.XXX屬性。

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

爲了添加HTML中使用EditorFor()方法的屬性，你必須使用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"); 
});