Question

我写了一个显示缩略图表格列表的视图。它现在正在运作。接下来我正在编写另一个视图，它显示一个包含详细信息的新视图单击的项目缩略图。现在，我不知道如何添加使得路由到GetDetailInfo Controller方法的可点击的thumbmail的信息返回详细信息视图。

这是我的缩略图表列表代码：

    <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 src=@product.Product.Thumbnail style="width: 100px; height: 100px" />
                            <div><br /></div>                               
                        </td>
                    }
                </tr>
            }
        </tbody>
    </table>

这是我正在编写的Controller方法，当单击缩略图并返回详细视图时会调用该方法。

    [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上的点击路由到此控制器方法以返回新的详细信息视图。任何帮助表示赞赏。感谢

Answer 1

将图像作为链接有两种常用方法。

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正确评论，但第二种方法更实用。

单击缩略图并路由到Controller方法

1 个答案: