0

我有一张桌子，里面有一堆东西。可以单击每一行（在该行的任何列上）并根据单击的行导航到另一个页面。我在此页面上附加了一个 javascript 文件，我在其中管理事件（单击的行，...）。

在我的 ASP.NET MVC 解决方案中，我想选择一种很好的方式来管理这种情况。

下面是我认为的一个：

我的观点：

<table>
    <tbody>        
        @foreach (var item in Model)
        {
            <tr data-url="@Url.Action("General", "Transport", new { transportID = item.TransportID })">
                <td>aaaa</td>
                <td>bbbb</td>
                <td>cccc</td>
            </tr>
        }
    </tbody>
</table>

我的.js文件：

$("table.search-transport tbody tr td:not(:first-child)").live("click", function () {
    var url = $(this).parents('tr').data('url');
    window.location.href = url;
});

因为我们无法在 javascript 文件中注入服务器代码，所以我将 url 直接注入到视图中的每一行中。当点击一行时，我会得到这个“特定”的 url 并从我的 javascript 文件中导航到它。

我想知道这个解决方案在 MVC 项目中是否足够稳定。

4

1 回答 1

0

根据评论，Nikola 说这不会影响 ASP.NET MVC 框架的使用是正确的。据我所知，在您的情况下，将 URL 注入数据字段是唯一的选择（但我愿意接受其他建议）。

对于 js 部分，我会使用事件委托来避免将事件附加到每个单元格：

$("table.search-transport tbody tr").on("click", "td:not(:first-child)", function () {
  var url = $(this).parents('tr').data('url');
  // also: $(this).parent().data('url'); will work...
  window.location.href = url;
});

这会将事件附加到每一行，但仅当您单击不是第一个孩子的 td 时才会触发。或者，您可以将整个事件附加到表格一次，因此还可以选择动态添加行并仍然附加事件；像这样：

$("table.search-transport").on("click", "tr td:not(:first-child)", function () {
  [...]
});
于 2013-02-19T14:14:24.883 回答