點擊縮略圖和路由到控制器方法

-1

我寫了一個視圖，顯示縮略圖列表。它正在工作。接下來，我正在編寫另一個視圖，其中顯示了一個新視圖，其中包含點擊了項縮略圖的詳細信息。現在，我不知道如何添加信息，該信息使得可以通過縮略圖點擊到返回詳細信息視圖的GetDetailInfo控制器方法。點擊縮略圖和路由到控制器方法

這裏是我的縮略圖表列表代碼：

<table class="table-responsive" width="100%"> 
     <tbody> 

      @foreach (var productGroup in Model.Select((e, i) => new { Product = e, Grouping = (i/4) }).GroupBy(e => e.Grouping)) 
      { 
       <tr> 
        @foreach (var product in productGroup) 
        { 
         <td> 
          <div><br /></div> 
          <img [email protected] style="width: 100px; height: 100px" /> 
          <div><br /></div>        
         </td> 
        } 
       </tr> 
      } 
     </tbody> 
    </table>

這裏是我的控制方法，我寫這封信時，縮略圖點擊，並返回一個詳細視圖被調用。

[MvcSiteMapNode(Title = "Item Detail", ParentKey = "Item-Home", Key = "Item-Detail", PreservedRouteParameters = "itemId")] 
    [Route("~/item/{itemId}/detail")] 
    public async Task<ActionResult> GetDetailInfo(int itemId) 
    { 
     var result = await ItemService.GetDetailInfo(contentId)); 

     return View(result.Dto); 
    }

我不知道如何將thumnbnail上的點擊路由到此控制器方法以返回新的詳細信息視圖。任何幫助表示讚賞。謝謝

來源

2015-12-29 user1250264

縮略圖是一個鏈接，對不對？ '/* Thumbnail Code Here */' – Bardicer

有兩種常見的方法可以將圖像作爲鏈接。

1 - 使用鏈接標籤。

<a href="@Url.Action("GetDetailInfo", "Controller", new { itemId = product.Product.Id })"> 
    <img src="@product.Product.Thumbnail" style="width: 100px; height: 100px" /> 
</a>

2 - 使用自定義的HTML幫助

來源：

public MvcHtmlString ActionImage(this HtmlHelper htmlHelper, 
           string controller, 
           string action, 
           object routeValues, 
           string imagePath, 
           string alternateText = "", 
           object htmlAttributes = null) 
{ 

    var anchorBuilder = new TagBuilder("a"); 
    var url = new UrlHelper(HtmlHelper.ViewContext.RequestContext); 

    anchorBuilder.MergeAttribute("href",url.Action(action,controller,routeValues)); 

    var imgBuilder = new TagBuilder("img"); 
    imgBuilder.MergeAttribute("src", url.Content(imagePath)); 
    imgBuilder.MergeAttribute("alt", alternateText); 

    var attributes = (IDictionary<string, object>) HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes); 
    imgBuilder.MergeAttributes(attributes); 
    string imgHtml = imgBuilder.ToString(TagRenderMode.SelfClosing); 

    anchorBuilder.InnerHtml = imgHtml; 
    return MvcHtmlString.Create(anchorBuilder.ToString()); 
}

使用：

@Html.ActionImage("Controller", "GetDetailInfo", new { itemId = @product.Product.Id }, "@product.Product.Thumbnail", "alternateText")

Asp.Net MVC Html Helper to create link with an image

第一種方法很方便 - 在你的問題中正確評論Bardicer，但第二種方法更實用。

來源

2015-12-29 19:04:59

點擊縮略圖和路由到控制器方法

回答

相關問題