Question

I’m using MVC3 and I need a HTMLHelper with image, so I found a nice code, the problem is that the image is not shown instead of I see html code ex:

<a href='whatever'><img src="images/printer.png" /></a>

Maybe this is because the helper is inside a webgrid helper, I really don’t know, any suggestion?

Helper

<Extension()> _
    Public Function ActionLinkWithImage(ByVal helper As HtmlHelper, ByVal actionName As String, ByVal controllerName As String, ByVal imageUrl As String, ByVal alternateText As String, ByVal routeValues As Object, ByVal linkHtmlAttributes As Object, ByVal imageHtmlAttributes As Object) As String
        Dim urlHelper = New UrlHelper(helper.ViewContext.RequestContext)
        Dim url = urlHelper.Action(actionName, controllerName, routeValues)

        ' Create link
        Dim linkTagBuilder = New TagBuilder("a")
        linkTagBuilder.MergeAttribute("href", url)
        linkTagBuilder.MergeAttributes(New RouteValueDictionary(linkHtmlAttributes))

        ' Create image
        Dim imageTagBuilder = New TagBuilder("img")
        imageTagBuilder.MergeAttribute("src", urlHelper.Content(imageUrl))
        imageTagBuilder.MergeAttribute("alt", urlHelper.Encode(alternateText))
        imageTagBuilder.MergeAttributes(New RouteValueDictionary(imageHtmlAttributes))

        ' Add image to link
        linkTagBuilder.InnerHtml = imageTagBuilder.ToString(TagRenderMode.SelfClosing)

        Return linkTagBuilder.ToString()
    End Function

WebGrid load

@<div id="divGrid">
        @grid.GetHtml(
            tableStyle:="webgrid",
            headerStyle:="webgrid-header",
            footerStyle:="webgrid-footer",
            alternatingRowStyle:="webgrid-alternating-row",
            selectedRowStyle:="webgrid-selected-row",
            rowStyle:="webgrid-row-style",
            mode:=WebGridPagerModes.All,
            firstText:="<< Inicio",
            previousText:="< Anterior",
            nextText:="Siguiente >",
            lastText:="Fin >>",
            columns:=grid.Columns(
            grid.Column(format:=Function(Model) Html.ActionLink(" ", "Details", "CertificadoVehiculo", New With {.area = "Certificados", .parIDCertificado = Model.ID_CERTIFICADO, .parIDPoliza = Model.ID_POLIZA}, New With {.class = "imgConsultar", .title = "Consultar"}), style:="webgrid-width-images"),
            grid.Column(format:=Function(Model) Html.ActionLink(" ", "Edit", "CertificadoVehiculo", New With {.area = "Certificados", .parIDCertificado = Model.ID_CERTIFICADO, .parIDPoliza = Model.ID_POLIZA}, New With {.class = "imgEditar", .title = "Modificar"}), style:="webgrid-width-images"),
            grid.Column(format:=Function(Model) Html.ActionLinkWithImage("Action", "Controller", Url.Content("~/Images/printer.png"), "TextoAlternativo", Nothing, Nothing, Nothing), style:="webgrid-width-images"),
            grid.Column("ID_CERTIFICADO", "No. Certificado"),
            grid.Column("POLIZAS.NUMERO_POLIZA", "No. Poliza"),
            grid.Column("PRIMER_APELLIDO_ASEGURADO", "Asegurado", format:=Function(Model) Model.ASEGURADOS.PRIMER_APELLIDO_ASEGURADO & " " & Model.ASEGURADOS.SEGUNDO_APELLIDO_ASEGURADO & " " & Model.ASEGURADOS.NOMBRES_ASEGURADO),
            grid.Column("PRIMA_CERTIFICADO", "Prima Total"),
        grid.Column("ESTADOS.DESC_ESTADO", "Estado")
            )
        )
    </div>

Answer 1

Make the ActionLinkWithImage helper return MvcHtmlString instead of string. Like this:

<Extension()> _
Public Function ActionLinkWithImage(ByVal helper As HtmlHelper, ByVal actionName As String, ByVal controllerName As String, ByVal imageUrl As String, ByVal alternateText As String, ByVal routeValues As Object, ByVal linkHtmlAttributes As Object, ByVal imageHtmlAttributes As Object) As MvcHtmlString
    Dim urlHelper = New UrlHelper(helper.ViewContext.RequestContext)
    Dim url = urlHelper.Action(actionName, controllerName, routeValues)

    ' Create link
    Dim linkTagBuilder = New TagBuilder("a")
    linkTagBuilder.MergeAttribute("href", url)
    linkTagBuilder.MergeAttributes(New RouteValueDictionary(linkHtmlAttributes))

    ' Create image
    Dim imageTagBuilder = New TagBuilder("img")
    imageTagBuilder.MergeAttribute("src", urlHelper.Content(imageUrl))
    imageTagBuilder.MergeAttribute("alt", urlHelper.Encode(alternateText))
    imageTagBuilder.MergeAttributes(New RouteValueDictionary(imageHtmlAttributes))

    ' Add image to link
    linkTagBuilder.InnerHtml = imageTagBuilder.ToString(TagRenderMode.SelfClosing)

    Return MvcHtmlString.Create(linkTagBuilder.ToString())
End Function