在 MVC 中打开带有传递数据的模式答案

【问题标题】：Open a modal with passed data in MVC在 MVC 中打开带有传递数据的模式
【发布时间】：2021-08-17 22:41:47
【问题描述】：

我有一个对象列表，当我单击其中任何一个对象时，我希望打开一个带有被单击对象数据的模式。我认为这是一项简单的任务，但我就是无法让它发挥作用。我想将单击的对象或其索引传递给打开模式的 js 函数

<button data-toggle="modal" OnClick="objectClick(i)" data-target="#modalDiv">Delete</button>


<div id="modalDiv" class="modal></div>

function objectClick(car) {
        $("#modalDiv").load('@{
                Html.RenderPartial("deleteCarPartialView", car);
            }');
    }

但它使用@Html.RenderPartial 我不能使用 js 参数。我尝试像这样<button onClick="@{selectedIndex = i;} objectClick()"></button> 在 onClick 中设置它，但由于某种原因，C# 代码在页面加载时运行，而不是在我单击对象时运行，因此 selectedIndex 的值将是列表中的最后一个索引。我该怎么做？

【问题讨论】：

标签： javascript html asp.net-core model-view-controller razor

【解决方案1】：

您可以使用ajax将数据传递给action，并从action中获取部分视图html代码，这是一个演示：

汽车：

public class Car
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public int Price { get; set; }

    }

行动：

public class CController : Controller
    {
        public IActionResult Index()
        {
            List<Car> l = new List<Car> { new Car { Id = 1, Name = "car1", Price = 10000 }, new Car { Id = 2, Name = "car2", Price = 20000 }, new Car { Id = 3, Name = "car3", Price = 30000 } };
            return View(l);
        }
        public IActionResult GetPartial(Car car)
        {
            return PartialView("deleteCarPartialView", car);
        }
    }

Index.cshtml：

@model IEnumerable<Car>
<table>
    <thead>
        <tr>
            <td>Id</td>
            <td>Name</td>
            <td>Price</td>
            <td>Action</td>
        </tr>
    </thead>
    <tbody>
        @{ var i = 0;} 
        @foreach (var item in Model)
        {
            <tr id="@i">
                <td>@item.Id</td>
                <td>@item.Name</td>
                <td>@item.Price</td>
                <td><button data-toggle="modal" OnClick="objectClick(@i)" data-target="#modalDiv">Delete</button></td>

            </tr>
            i++;
        }
        
    </tbody>
</table> 
<div class="modal fade" id="modalDiv" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Car Detail</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="modalContent">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

js:

<script>
        function objectClick(index) {
            var car = {};
            car.Id = parseInt($("#" + index).find("td")[0].innerText);
            car.Name = $("#" + index).find("td")[1].innerText;
            car.Price = parseInt($("#" + index).find("td")[2].innerText);

            $.ajax({
                type: "POST",
                url: "GetPartial",
                data: car,
                success: function (data) {
                    $("#modalContent").html(data);
                }
            });

    }
    </script>

删除CarPartialView.cshtml：

@model Car
<dl class="row">
    <dt class="col-sm-2">
        @Html.DisplayNameFor(model => model.Id)
    </dt>
    <dd class="col-sm-10">
        @Html.DisplayFor(model => model.Id)
    </dd>
    <dt class="col-sm-2">
        @Html.DisplayNameFor(model => model.Name)
    </dt>
    <dd class="col-sm-10">
        @Html.DisplayFor(model => model.Name)
    </dd>
    <dt class="col-sm-2">
        @Html.DisplayNameFor(model => model.Price)
    </dt>
    <dd class="col-sm-10">
        @Html.DisplayFor(model => model.Price)
    </dd>
</dl>

结果：

【讨论】：