Question

我正在寻找的东西非常简单，但它正在躲避我，我无法在任何地方找到一个好的例子。

我有一个MVC Razor实体循环：

@foreach (var item in Model)
{
    <tr>
        <td>
            <a href="#" id="stockIndexLink">
                @Html.DisplayFor(modelItem => item.Name)
            </a>
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Description)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
            @Html.ActionLink("Details", "Details", new { id = item.Id }) |
            @Html.ActionLink("Delete", "Delete", new { id = item.Id })
        </td>
    </tr>
    <tr id="componentRow">
        <td id="componentCell">
        </td>
    </tr>
}

在jQuery中，我想将详细的PartialView加载到'componentCell'中，有点像这样：

@section Scripts {
    <script>
        $(function () {
            $("#componentRow").hide();

            $("#stockIndexLink").on("click", function () {
                $("#componentRow").slideToggle(300, function () {
                    $("#componentCell").load('@Url.Action("GetStockIndices", "AdminStockIndex", new { id = 1 })');
                });
            });
        });
    </script>
}

...正如您所看到的，我已将ID值硬编码到Url.Action中，只是为了看到某事。如何从每一行获取该ID，进入“点击”事件，而不是一个丑陋的黑客？另外，我知道我在隐藏和切换东西方面还有一些工作要做但我可以处理。 id正在绊倒我。

谢谢！

Answer 1

你可以将url放在anchor href标签中：

<a href="@Url.Action("GetStockIndices", "AdminStockIndex", new { id = item.Id })" class="stockIndexLink">
    @Html.DisplayFor(modelItem => item.Name)
</a>

并在jQuery中：

$('.stockIndexLink').on('click', function(event) {
    var $this = $(this),
        url = $this.attr('href');

    var $componentRow = $this.closest('tr').next('.componentRow');
    var $componentCell = $componentRow.children('td').first();

    $componentRow.slideToggle(300, function() {
         $componentCell.load(url);
    });

    event.preventDefault();
});

编辑：还要注意，正如在其他一些答案中解释的那样，在多个元素上具有相同的id是针对html规范的，因此我更改了jQuery对象以搜索类。还更新，因此它不会选择所有组件行和单元格。（来自@Stephen Muecke的答案）

Answer 2

首先，由于重复的id属性（id="stockIndexLink"和id="componentCell"，您的html无效，这意味着您无论如何都只能对第一行执行任何操作。您需要使用类最简单的方法是将Id属性存储为data-属性，并在.click()事件

中检索它

@foreach (var item in Model)
{
  <tr>
    <td>
      <a href="#" class="stockIndexLink" data-id="@item.Id">@Html.DisplayFor(modelItem => item.Name)</a>
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.Description)
    </td>
    ....
</tr>
<tr class="componentRow">
    <td></td>
</tr>

}

然后你的脚本应该是

$(".stockIndexLink").on("click", function () {
  var id = $(this).data('id');
  var componentRow = $(this).closest('tr').next('.componentRow');
  var componentCell = componentRow.children('td').first();
  componentRow .slideToggle(300, function () {
    componentCell .load('@Url.Action("GetStockIndices", "AdminStockIndex")',  { id = id });
  });
});

ASP.NET MVC 5 jQuery AJAX主/详细信息表

2 个答案: