基於在表中點擊的行導航到另一個頁面的基本場景

我有一堆物品的表。可以單擊每行（在此行的任何列上）並根據所點擊的行導航到另一個頁面。我有一個JavaScript文件附加到我管理事件的頁面（點擊行，...）。基於在表中點擊的行導航到另一個頁面的基本場景

在我的ASP.NET MVC解決方案中，我想選擇一種goo方式來管理這種情況。

下面是一個我認爲：

我的觀點：

<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並從我的javascript文件導航到它。

我想知道這個解決方案是否足夠穩定的MVC項目。

來源

2013-02-19 Bronzato

該解決方案沒有任何與MVC模式的碰撞點。 ASP.NET MVC框架也非常自由，並沒有像ASP.NET那樣放置任何障礙。它根本不在乎你如何到達頁面，只要它可以路由請求並可以渲染Razor模板。 – 2013-02-19 13:33:46

感謝您的回覆。我想知道是否有比這更好的解決方案。正如你所看到的，我在每行中注入了url（預格式化）......有點多餘，是不是？ – Bronzato 2013-02-19 13:42:31

礦山更多的是基於UX的考慮，爲什麼不在表格中放置一個真正的普通鏈接（基本上是'a'標籤）？這將有助於清楚地顯示動作，不需要javascript或jquery工作，可以在所有瀏覽器上工作，並且可能會對可訪問性更友好... – Tallmaris 2013-02-19 13:46:46

跟着評論，尼古拉正確地說這不會影響ASP.NET MVC框架的使用。將URL注入到您的案例中的數據字段是我可以看到的唯一選項（但我願意接受其他建議）。

對於JS部分，我會用event delegation避免附加活動，每一個細胞：

$("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-19 14:14:24 Tallmaris

謝謝你的建議。 – Bronzato 2013-02-19 15:26:12

基於在表中點擊的行導航到另一個頁面的基本場景

回答

相關問題