Form verilerini geçersiz kılma

Question

Rezervasyon listemize sahip bir tablo içeren bir rezervasyon sayfam var. Her satırda, rezervasyonun düzenlenmesine izin veren bir düğme bulunur. Bu düğmeye tıklandığında, çeşitli alanları olan JavaScript'i kullanarak kalıcı bir pop-out formu görüntülenir. Rezervasyonun ID numaralarını iyi çalışan başlığa geçiriyorum. BookingModel, verilerin saklandığı BookingViewModels listesine sahiptir.

Alanların değerini, Rezervasyon modelindeki (@Value = @item.Date) değerler olarak ayarlamaya çalışıyorum, ancak kutudaki veriler üzerine yazılmıyor, ancak Tarih'i kendi başına yazdırıyorsam, doğru şekilde yazdırılıyor.

Verileri kutuda nasıl yazdırabilirim?

Modelleri

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

Görünüm

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

görünümünüz ge olmalıdır bir <form> elemanı (koleksiyonunda her BookingViewModel için değil bir) nerating ve düğmeyi tıkladığınızda ardından, @foreach (var item in Model.BookingModel) { böylece yalnızca bir biçimini silerek ilişkili BookingViewModel

Başlangıç ​​değerleri ile form denetimleri değerleri güncelleştirmek yaratıldı.

Sonraki EditorFor()'u TexBoxFor() ile değiştirin ve tüm Value = @item.XXX özniteliklerini kaldırın. EditorFor() yöntemi kullanarak öznitelikleri html eklemek için

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

, sen MVC-5.1 veya üzeri kullanıyor olması gerekir ve sözdizimi

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

Geçerli uygulama herhangi özellikleri ekledikten ve her durumda değil mi Model bağlamanın başarısız olmasını istemediğiniz sürece, value özniteliğini asla ayarlamamalısınız.

Tablonuzdaki Sonra

, geçerli satır

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

düzenlemeye ilişkin bir düğme ekleyin ve modal adlı form denetimleri

$('.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"); 
});