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

我有一个对象列表，当我单击其中任何一个对象时，我希望打开一个包含单击对象数据的模式。我认为这是一个简单的任务，但我就是不能让它工作。我想将单击的对象或其索引传递给打开模型的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);
            }');
    }

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

汽车：

行动：

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

公共类CController:控制器
{
公共IActionResult索引（）
{
列表l=新车列表{new Car{Id=1，Name=“car1”，Price=10000}，新车{Id=2，Name=“car2”，Price=20000}，新车{Id=3，Name=“car3”，Price=30000}；
返回视图（l）；
}
公共IActionResult GetPartial（汽车）
{
返回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>

@model IEnumerable
身份证件
名称
价格
行动
@{var i=0；}
@foreach（模型中的var项目）
{
@项目Id
@项目名称
@项目.价格
删除
i++；
}
汽车细节
&时代；
...
接近

js:


函数对象单击（索引）{
var-car={}；
car.Id=parseInt（$（“#”+索引）.find（“td”）[0].innerText）；
car.Name=$（“#”+索引）.find（“td”）[1].innerText；
car.Price=parseInt（$（“#”+索引）.find（“td”）[2].innerText）；
$.ajax({
类型：“POST”，
url:“GetPartial”，
数据：汽车，
成功：功能（数据）{
$（“#modalContent”）.html（数据）；
}
});
}

deleteCarPartialView.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>

@模型车
@DisplayNameFor（model=>model.Id）
@DisplayFor（model=>model.Id）
@DisplayNameFor（model=>model.Name）
@DisplayFor（model=>model.Name）
@DisplayNameFor（model=>model.Price）
@DisplayFor（model=>model.Price）

结果:

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

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