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

我正在尝试将当前点击的行数据的viewmodel传递给弹出窗口，这样我就可以执行进一步的操作了。

请帮助!!!!

Answer 1

您的代码存在问题。您正在尝试为每个表行生成并创建弹出HTML。但是'data-target'属性的id仍然是相同的，即“#mealModal”。这意味着，您的弹出窗口默认绑定到表格的第一行。您需要动态生成if并将其分配给data-target属性。

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

<强>弹出

div class="modal fade" id="@modelPopupId" style="display: none; border: 5px solid black; padding: 10px;" role="dialog" aria-labelledby="CmapModalLabel" aria-hidden="true">

MVC 5 - 在表格行上打开弹出窗口，点击并传递viewmodel

1 个答案: