MVC 5 - テーブルの行にオープンポップアップ私はこのようなMVCのビューでテーブル抱えているのviewmodel

Question

を渡してクリックします。

@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 }) 
      } 

閉じる 保存は

を変更します10

これは、すべてのJavaScriptで有効になっています：

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

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

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

そして、何私がやろうとしていることは、ポップアップに現在クリックされた行データとのviewmodelを渡しているので、私はさらにアクションを実行することができます。

助けてください!!!!

Answer 1

コードに問題があります。それぞれのテーブル行に対してポップアップHTMLを生成して作成しようとしています。しかし、「データターゲット」属性のIDは同じままです。つまり、「#mealModal」です。つまり、あなたのポップアップは、デフォルトでテーブルの最初の行にバインドされます。 ifをdata-target属性に動的に生成して割り当てる必要があります。

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. ポップアップ