如何編輯MVC上只有幾個字段並禁用我的表單上的其他字段？

Question

我正在製作庫存跟蹤工具，在這個工具中我們可以爲測試人員預訂設備。但是我遇到了一個問題，當我嘗試編輯其中一個預訂時，所有字段都打開進行編輯，而我不想那樣做。只有應該可編輯的字段將是ActualCheckIn和ActualCheckOut，但我迷失在我想如何做到這一點。如果你們能幫助我，那將會非常有幫助。我已經發布了我的bookingController.cs的代碼。

 public async Task<ActionResult> Index() 
     { 
      var bookings = 
       await 
       _db.Bookings.Include(b => b.Tester) 
        .Include(b => b.Inventory) 
        .Include(b => b.Inventory.Device) 
        .AsNoTracking() 
        .ToListAsync(); 

     return View(bookings); 
    } 

    public async Task<ActionResult> AddBooking() 
    { 
     var viewModel = new BookingViewModel 
     { 
      BookingDate = DateTime.Now, 
      Testers = await _db.Testers.AsNoTracking().ToListAsync(), 
      Inventories = GetAvailableInventories() 
     }; 

     return View("Booking", viewModel); 
    } 

    [HttpPost] 
    [ValidateAntiForgeryToken] 
    public async Task<ActionResult> AddBooking(BookingViewModel model) 
    { 
     if (model.Action.Equals("cancel")) 
      return RedirectToAction("Index"); 

     if (!ModelState.IsValid) 
     { 
      model.Testers = await _db.Testers.ToListAsync(); 
      model.Inventories = GetAvailableInventories(); 
      return View("Booking", model); 
     } 

     var booking = new Booking 
     { 
      BookingId = model.BookingId, 
      BookingDate = model.BookingDate, 
      TesterId = model.TesterId, 
      LabNumber = model.LabNumber.Value, 
      PlanCheckIn = model.PlanCheckIn.Value, 
      PlanCheckOut = model.PlanCheckOut, 
      ActualCheckIn = model.ActualCheckIn, 
      ActualCheckOut = model.ActualCheckOut, 
      Notes = model.Notes, 
      TotalHours = model.TotalHours 
     }; 

     using (var transaction = _db.Database.BeginTransaction()) 
     { 
      try 
      { 
       // update device usage if new booking 
       if (booking.BookingId == 0) 
       { 
        var invetory = await _db.Inventories.FindAsync(model.LabNumber.Value); 
        var device = await _db.Devices.FindAsync(invetory.DeviceId); 
        device.TotalUsage++; 
       } 

       _db.Bookings.AddOrUpdate(booking); 
       await _db.SaveChangesAsync(); 

       transaction.Commit(); 
      } 
      catch (Exception) 
      { 
       transaction.Rollback(); 
       throw; 
      } 
     } 

     return RedirectToAction("Index"); 
    } 

    public async Task<ActionResult> EditBooking(int bookingId) 
    { 
     var booking = await _db.Bookings.FindAsync(bookingId); 

     var model = new BookingViewModel 
     { 
      BookingId = booking.BookingId, 
      BookingDate = booking.BookingDate, 
      TesterId = booking.TesterId, 
      LabNumber = booking.LabNumber, 
      PlanCheckOut = booking.PlanCheckOut, 
      PlanCheckIn = booking.PlanCheckIn, 
      ActualCheckIn = booking.ActualCheckIn, 
      ActualCheckOut = booking.ActualCheckOut, 
      Notes = booking.Notes, 
      TotalHours = booking.TotalHours, 
      Testers = await _db.Testers.ToListAsync(), 
      Inventories = GetAvailableInventories(booking.LabNumber) 
     }; 


     return View("Edit", model); 
    } 

我也有一個問題，如果我在表單各個領域被填滿，是沒有辦法，我可以禁用用於編輯預訂鏈接什麼辦法？提前致謝！！

這裏是我的view.cshtml：

<div class="col-sm-6"> 
    <div class="form-group"> 
     @Html.LabelFor(m => m.ActualCheckIn, "Actual CheckOut", new { @class = "col-sm-3 control-label" }) 
     <div class="col-sm-9"> 
       <div class="input-group date"> 
        <div class="input-group-addon"> 
         <i class="fa fa-calendar"></i> 
        </div> 
        @Html.TextBoxFor(m => m.ActualCheckIn, "{0:MM/dd/yyyy}", new { @class = "form-control pull-right datepicker", id = "actualCheckInInput" }) 
       </div> 

     </div> 
    </div> 
    <div class="form-group"> 
     @Html.LabelFor(m => m.ActualCheckOut, "Actual CheckIn", new { @class = "col-sm-3 control-label" }) 
     <div class="col-sm-9"> 
      <div class="input-group date"> 
       <div class="input-group-addon"> 
        <i class="fa fa-calendar"></i> 
       </div> 
       @Html.TextBoxFor(m => m.ActualCheckOut, "{0:MM/dd/yyyy}", new { @class = "form-control pull-right datepicker", id = "actualCheckOutInput" }) 
      </div> 
     </div> 
    </div> 

Answer 1

可能是最清晰的方式是引進的編輯用例，只有公開可編輯的屬性不同的視圖模型。這增加了靈活性和可維護性。

public class EditBookingViewModel { 

    // post as hidden field so we can fetch the record to update 
    public long BookingId {get; set;} 

    // render inputs for these fields so they can be edited 
    public DateTime ActualCheckIn {get; set;} 
    public DateTime ActualCheckOut {get; set;} 
} 

作爲替代方案，重新使用BookingViewModel。關鍵是隻呈現該可編輯的屬性的<input>：

Edit.cshtml

@model BookingViewModel 

@{ Html.BeginForm("EditBooking", "Booking", FormMethod.Post) } 

@* Shown, editable, posted back *@ 
@Html.EditorFor(m => m.ActualCheckIn) 
@Html.EditorFor(m => m.ActualCheckOut) 

@* Shown, not editable, not posted back *@ 
@Html.DisplayFor(m => m.BookingDate) 

@* Not shown, not editable, posted back *@ 
@Html.HiddenFor(m => m.BookingId) 

@{ Html.EndForm(); } 

在POST EditBooking動作，檢索預訂要使用ID從DB更新，並且只映射可編輯字段

[HttpPost] 
public async Task<ActionResult> EditBooking(BookingViewModel postData) { 
    var existingBooking = await _db.Bookings.FindAsync(postData.BookingId); 
    existingBooking.ActualCheckIn = postData.ActualCheckIn; 
    // ... 
}