Überschreiben von Formulardaten mit Werten

Question

Ich habe eine Buchungsseite mit einer Tabelle mit einer Liste von Buchungen. Jede Zeile hat eine Schaltfläche, mit der die Buchung bearbeitet werden kann. Wenn Sie auf diese Schaltfläche klicken, wird ein modales Popup-Formular angezeigt, das JavaScript mit einer Reihe von Feldern verwendet. Ich übergebe die ID der Buchung in die Kopfzeile, die gut funktioniert. Die BookingModel hat eine Liste von BookingViewModels, wo die Daten gespeichert sind.

Ich versuche, den Wert der Felder als die Werte in der Buchung Modell, d. H. @Value = @item.Date, aber die Daten in der Box nicht überschrieben wird, aber wenn ich das Datum unter sich selbst ausdrucken wird es richtig gedruckt.

Wie kann ich die Daten in der Box drucken?

Modelle

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

Ansicht

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

Ihre Ansicht ge sein sollte nerating ein <form> Element (nicht eine für jeden BookingViewModel in der Sammlung), und dann, wenn Sie auf die Schaltfläche klicken, mit den Werten des zugehörigen BookingViewModel

Starts, um die Werte des Formular-Steuerelemente aktualisieren, indem Sie die @foreach (var item in Model.BookingModel) { so nur eine Form zu löschen geschaffen.

Als nächstes ersetzen Sie alle EditorFor() durch TexBoxFor() und entfernen Sie alle Value = @item.XXX Attribute.

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

Um html hinzufügen Attribute mit der EditorFor() Methode müssen Sie MVC-5.1 oder höher verwenden und die Syntax ist

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

Ihre aktuelle Implementierung ist keine Attribute hinzugefügt und in jedem Fall Sie sollten das Attribut value niemals festlegen, es sei denn, Sie möchten, dass die Modellbindung fehlschlägt.

in der Tabelle Dann fügen Sie eine Taste, um die aktuelle Zeile zur Bearbeitung

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

und behandeln die .click()-Ereignis der Schaltfläche

der modalen Formular Kontrollen

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