none
Imagem em WebGrid RRS feed

  • Pergunta

  • Oi Pessoal,

    Estou fazendo uns testes com o MVC3 + Razor para migrar algumas aplicações minhas e estou tendo um probleminha.

    Nos meus WebGrid tenha no final de cada linha, duas colunas com links para ações de Update e Delete, não quero utilizar texto, mas não consigo de forma nenhuma adicionar uma imagem para cada ação, fiz o código abaixo, será que alguém poderia me dar uma luz ?

          @{
                    var grid = new WebGrid(source: Model,
                                            rowsPerPage: 5);                
                }
                @grid.GetHtml(

                    columns:
                            grid.Columns(

                                        grid.Column("FAM_ID",
                                        header: "FAM_ID",
                                        canSort: false
                                        ),

                                        grid.Column("FAM_DESCRICAO",
                                        header: "FAM_DESCRICAO",
                                        canSort: false
                                        ),

                                        @*Apenas imagem*@
                                        grid.Column("",
                                        header: "",
                                        format: @<text>@Html.Raw("<img src=\"~/../Content/img/icoEdit.png\" />")</text>
                                        ),

                                        @*Apenas imagem*@
                                        grid.Column("",
                                        header: "",
                                        format: @<text>@Html.Raw("<img src=\"~/../Content/img/icoDelete.png\" />")</text>
                                        ),                                   
                                        
                                        @*Texto com o Action*@
                                        grid.Column("",
                                        header: "Ações",
                                        format: (item) => new HtmlString(Html.ActionLink("Editar", "Edit", new { id = item.FAM_ID }).ToString())
                                        ),

                                        @*Tentativa que não funciona*@
                                        grid.Column("",
                                        header: "Ações",
                                        format: (item) => new HtmlString(Html.ActionImage("Delete", new { id = item.FAM_ID }, "../Content/img/icoDelete.png", "Delete").ToString())
                                                                         )
                                        
                    )
               )


    Eu criei também um HTML Helper ActionImage para fazer uma imagem como link para uma ação, mas não estou conseguindo adicioná-lo dentro da WebGrid, porem o Helper ActionImage criado, funciona normalmente em outra parte da pagina.

    Alguem poderia me ajudar ?

    Abrações.

    ECNunes

    quarta-feira, 28 de novembro de 2012 17:42

Todas as Respostas

  • Exemplo que eu costumo usar

     @gridItem.GetHtml(TableStyle:="webgrid",
           headerStyle:="webgrid-header",
           footerStyle:="webgrid-footer",
           alternatingRowStyle:="webgrid-alternating-row",
           rowStyle:="webgrid-row-style",
           columns:=gridItem.Columns(
           gridItem.Column("DataVecto", header:="Dia do Vencimento", style:="webgrid-data"),
           gridItem.Column("DescricaoParcela", header:="Parcela"),
           gridItem.Column("ValorParecla", header:="Valor", style:="webgrid-data"),
           gridItem.Column("", header:="", Style:="webgrid-alterar", Format:=Function(item) Html.Raw(String.Format("<a href={0}> <img src={1}/> </a>", Url.Action("Delete", "ClienteVendaParcela", New With {.id = item.IDClienteVendaParcela}), Url.Content("~/imagens/deleteLeg.png"))))))
            

    Eu segui esse exemplo, esta em C#, talvez lhe ajude mais que meu exemplo

    http://stackoverflow.com/questions/7866051/conditionally-display-an-image-in-webgrid-mvc-3


    quarta-feira, 28 de novembro de 2012 19:36
  • Este caminho da imagem está realmente certo? '~/../Content/img/icoDelete.pn'

    Porque você vai para a raiz do projeto '~' e depois volta uma pasta '../'?

    O certo não seria '~/content/img/icoDelete.png' ?


    http://www.linkedin.com/pub/murilo-kunze/44/191/455

    quarta-feira, 28 de novembro de 2012 23:48
  • Seguindo o conselho do Murilo...

    é recomendável usar sempre Url.Content("~/Content/img/icoDelete.png")


    Não esqueça de marcar o post como útil caso tenha te ajudado.

    quinta-feira, 29 de novembro de 2012 15:27
  • Fala Murilo,

    Concordo contigo, mas quando utilizo apenas '~/Content/..." a imagem não aparece, quando utilizo "~/../Content..." a imagem aparece normalmente.

    Obrigado.

    ECNunes

    quinta-feira, 29 de novembro de 2012 15:35
  • Fala Marco,

    Eu concordo contigo, mas não sei pq quando uso desta forma a imagem não aparece. Futuramente vou pesquisar o que pode estar causando isso.

    Abs.

    ECNunes

    quinta-feira, 29 de novembro de 2012 15:36
  • Valeu Paulo, vou testar esta opção que vc enviou e depois posto aqui o resultado.

    Valeu.

    ECNunes

    quinta-feira, 29 de novembro de 2012 15:37
  • Do "~/Content/..." não aparecer a imagem tb ja aconteceu comigo, mas eu fiz assim "../../Content/..." e funcionou.
    quinta-feira, 29 de novembro de 2012 15:41
  • Fala Pessoal,

    Paulo, tentei usar o que você indicou, mas não funcionou. Está dando erro dizendo q está faltando fechar algum parentese. Por enquanto não vou gastar mais tempo com isso. Vou continuar o desenvolvimento e depois volto neste ponto.


    Valeu pela ajuda.

    sexta-feira, 7 de dezembro de 2012 15:22
  •  Uso assim e funciona 100$

    @grid.GetHtml(
                tableStyle: "grid",
                headerStyle: "head",
                alternatingRowStyle: "alt",
                mode:WebGridPagerModes.NextPrevious,
                previousText: "Anterior",
                nextText: "Próximo", 
            
                columns: grid.Columns(
                    grid.Column("Nome", header: "Nome", format: @<i>@item.Nome</i>),
                    grid.Column("Alterar", format: @<i>@Html.ActionImage("Edit", new { id=item.id }, "~/Content/Images/edit.png", "Editar")  </i>, canSort: false, style: "column-menu"),
                    grid.Column("Excluir", format: @<i>@Html.ActionImage("Delete", new { id=item.id }, "~/Content/Images/del.png", "Editar")  </i>, canSort: false, style: "column-menu")
                ) 
            )



    Antonio Correia

    sexta-feira, 7 de dezembro de 2012 22:00
  • Pessoal,

    Funfou show d bola. Antonio, muito obrigado, Valeu Paulo, Marco e Murilo pela ajuda tb.

    Funfando 100%

    Abs.

    ECNunes

    sexta-feira, 14 de dezembro de 2012 19:35