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 ファイルからその URL に移動します。

このソリューションが 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 をクリックした場合にのみ発生します。または、イベント全体をテーブルに 1 回アタッチして、行を動的に追加し、イベントをアタッチしたままにすることもできます。このような：

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