少数のフィールドを編集し、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); 
    } 

私はまた私のフォーム内のすべてのフィールドが満たされている場合は、その別の質問があり、私はその予約を編集するためのリンクを無効にすることができます方法はありますか？前もって感謝します！！

<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

おそらくクリーンな方法でのみ編集できるプロパティを公開、編集ユースケースごとに異なるビューモデルを導入することになります。

は、ここに私のview.cshtmlです。これにより、柔軟性と保守性が向上します。

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