[ASP.NET MVC] @Html.ActionLink() 和 <a>

-

要產生 <a> 超連結標籤，用的是 @Html.ActionLink() 方法，若要產生同一個 Controller 內的 Action 超連結，例如同樣 Home Controller 中的兩個 Action： Index 和 Contact，要在 Index 中產生一個連往 Contact 的超連結，就在 Index 的 View 中使用：

  @Html.ActionLink("連絡我們"
                    , "Contact")

  // 會產生：

  <a href="/Home/Contact/">連絡我們</a>

第一個引數是超連結顥示的文字，第二個引數是同 Controller 裡的其他 Action。也可超連結至其他 Controller 的 Action，例如另一個 Product Controller 的 List Action，就寫在第二和第三個引數：

  @Html.ActionLink("產品列表"
                    , "List"
                    , "Product")

  // 會產生：

  <a href="/Product/List/">產品列表</a>

另外也可以產生 HTML Attribute，例如要給這個 <a> 標籤一個 id = "linkA" 讓 JavaScript 使用，或是增加開新分頁的 target 屬性，要使用匿名類別 new { }，放在第四個引數：

  @Html.ActionLink("產品列表"
                    , "List"
                    , "Product"
                    , new { id = "linkA" , target = "_blank" } )

  // 會產生：

  <a href="/Product/List/" id="linkA" target="_blank">產品列表</a>

可代入 route value，例如連結的 query string，會自動用 ? 和 & 連起來，總共五個引數時的第四個為 route value：

  @Html.ActionLink("查詢所有書籍"
                    , "Query"
                    , "Product"
                    , new { kind = "book", priceMax = 300 }
                    , new { @class = "query-link"} )    // 產生 class 屬性

  // 會產生：

  <a class="query-link" href="/Product/Query?kind=book&priceMax=300">查詢所有書籍</a>

以上特別的一點是，要利用匿名類別給第五個引數產生一個 class = "query-link" 方便 CSS 設定樣式，要小心 class 是保留字所以前面要加上 @ 。

如果沒有要代入 HTML Attribute，還是要給五個引數，記得給第五個引數 null 即可，如下：

  @Html.ActionLink("品項125號產品"
                    , "Item"
                    , "Product"
                    , new { id = "125"}
                    , null )

  // 會產生：

  <a href="/Product/Item/125">品項125號產品</a>

以上代入 route value 是 id = "125" 是 ASP.NET MVC 中特殊的寫法，預設 RouteConfig 會讓 URL 更簡潔就抓到 id。

留言

張貼留言