使用C＃中的迭代变量在JavaScript函数中进行循环

Question

在我的其中一个页面上，我有一个for循环来循环浏览“项目”列表（这是我网站的主要模型）并显示其中的一些数据。 以下代码嵌套在一个表中，并删除了中间的单元以实现冗余。

foreach (var item in Model.Projects)
{
    <tr>
        <td>@Html.DisplayFor(modelItem => item.SubmissionNumber)</td>
        <td>@Html.DisplayFor(modelItem => item.Status)</td>
        <!-- and so on -->
        <td>@Html.ActionLink("Detail", "DisplayDetails", new { id = item.ProjectID })</td>
    </tr>
}

理想情况下，最后一个单元格中的“详细信息”链接将弹出一个包含该项目所有数据的框（我正在考虑通过Bootstrap使用Modal）。 “ DisplayDetails”控制器操作返回一个呈现此信息的局部视图，但是由于我没有使用JavaScript或任何东西在当前页面上呈现该局部视图，因此将其呈现为自己的未格式化页面。 这是控制器操作：

[HttpGet]
public ActionResult DisplayDetails(int? id)
{
    if (id == null)
    {
        return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
    }
    Project project = db.Projects.Find(id);
    if (project == null)
    {
        return HttpNotFound();
    }
    return PartialView("~/Views/Projects/_Detail.cshtml", project);
}

理想情况下，我将像下面所做的那样使用AJAX将ID传递给控制器​​（这是我网站另一页上的代码，再次对其进行了编辑以消除冗余）：

$("#show").on("click", function () {
    $.ajax({
        url: '/Projects/SearchTable',
        type: "GET",
        data: {
            Line1: $('#' + '@Html.IdFor(m => m.Project.ProjectAddress.Line1)').val(),
            // and so on
            County: $('#' + '@Html.IdFor(m => m.Project.ProjectAddress.County)').val(),
        }
    }).done(function(partialViewResult) {
        $(".wrapper").html(partialViewResult);
        $(".wrapper").css('display', 'block');
    });
});

通过这样做，我可以将部分视图嵌入到当前页面上，而不是将其作为新页面打开。 我只是不确定如何将表中特定行的项目ID作为数据传递给控制器​​。 这有可能吗？ 如果不是，还有另一种方法可以达到相同的结果吗？

Answer 1

您可以将ActionLink替换为：

<td><a href="#" class="details" data-id="@item.ProjectID">Details</a></td>

然后，

$(".details").on("click", function (e) {
    e.preventDefault();  
    var projectId = $(this).data('id');
    // Make the AJAX call here...
});