MVC 5 - 上表行單擊打開彈出與通過視圖模型

Question

我有一個表

在MVC觀點是這樣的：

@model FoodCalculator.Models.MealViewModel 

@{ 
    ViewBag.Title = "Show Meals"; 
} 

<h2>Meals</h2> 

    <table class="table table-striped table-hover mealDetailsTable"> 
     <thead> 
     <tr> 
     <th> 
      No 
     </th> 
     <th> 
      Meal name 
     </th> 
     <th> 
      Meal type name 
     </th> 
    </tr> 
    </thead> 
    <tbody> 
     @foreach (var item in Model.Meals) 
     { 
      <tr id="tableRowClick" data-toggle="modal" data-id="@item.Value" data-target="#mealModal"> 
       <td> 
        @Html.DisplayFor(modelItem => item.Value.MealID) 
       </td> 
       <td> 
        @Html.DisplayFor(modelItem => item.Value.MealName) 
       </td> 
       <td> 
        @Html.DisplayFor(modelItem => item.Value.MealType.MealTypeName) 
       </td> 
       <td> 
        <button class="btn btn-primary" data-toggle="modal" data-target="#mealModal">Details</button> 
     } 
    </tbody> 
</table> 

而且在一排點擊彈出窗口顯示了：

@model FoodCalculator.Models.MealViewModel 

<div class="modal fade" id="mealDetails" style="display: none; border: 5px solid black; padding: 10px;" role="dialog" aria-labelledby="CmapModalLabel" aria-hidden="true"> 
<div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
      <h4 class="modal-title">Meal details</h4> 
     </div> 
     <div class="modal-body"> 
      <input type="text" id="mealID" name="mealDetail" style="display: none;" /> 

      @if (Model != null) 
      { 
       <h3> Meal id : @Model.SelectedMealID</h3> 

        @Html.Action("ShowMealDetails", "Home", new { mealID = Model.SelectedMealID }) 
      } 

關閉 保存更改

這一切都是由啓用javascript：

$('.mealDetailsTable').find('tr[data-id]').on('click', function() { 
$('#mealDetails').modal('show'); 

var getIdFromRow = $(event.target).closest('tr').data('id'); 

$("#mealID").val(getIdFromRow); 
}); 

而且我想要做的就是通過與目前點擊行數據視圖模型到彈出，這樣我就可以進行進一步的行動。

請幫忙!!!!

Answer 1

你的代碼有問題。您正在嘗試生成併爲每個錶行創建一個彈出HTML。但是「數據目標」屬性的id保持不變，即「#mealModal」。這意味着，您的彈出將被默認綁定表中的第一行。你需要動態地生成，如果分配到數據目標的屬性。

1. View.cshtml

   @model FoodCalculator.Models.MealViewModel 
   
   @{ 
       ViewBag.Title = "Show Meals"; 
       var modelPopupId = "#mealModal" + item.Value.MealID; // Considering MealID is unique 
       var modelPopupReferenceId = "#"+ modelPopupId; 
       } 
   
       // Inside <tbody> element 
   @foreach (var item in Model.Meals) 
   { 
       <tr id="tableRowClick" data-toggle="modal" data-id="@item.Value" data-target="@modelPopupReferenceId"> 
       // All other html elements 
       } 
   

2. 彈出