buscapersonas imágenes MVCContrib

Question

Soy capaz de utilizar la cuadrícula MVCContrib Pager como en el ejemplo siguiente

Html.Pager(Model.CustomerList)
        .First("First")
        .Last("Last")
        .Next("Next")
        .Previous("Previous")

¿Hay alguna manera de modificar los enlaces se puede hacer clic para mostrar imágenes en vez de texto plano?

Editar

Me han aplicado solución de Darin y funciona muy bien, excepto por la imagen no se mostró por el navegador. Este es el marcado generado por el ayudante de localizador

<div class="pagination">
    <span class="paginationLeft">1-2 di 4</span>
    <span class="paginationRight">
        <span class="first"></span> | 
        <span class="previous"></span> | 
        <a href="/x/Hearing/HomeSummary?page=2">
            <span class="next"></span>
        </a> | 
        <a href="/x/Hearing/HomeSummary?page=2">
            <span class="last"></span>
        </a>
    </span>
</div>

y estas son las reglas CSS definidas

.pagination span.paginationRight span.first { width: 12px; height: 12px; background-image: url('../images/disabled-pager-first.png') }
.pagination span.paginationRight span.next { width: 12px; height: 12px; background-image: url('../images/disabled-pager-next.png') }
.pagination span.paginationRight span.last { width: 12px; height: 12px; background-image: url('../images/disabled-pager-last.png') }
.pagination span.paginationRight span.previous { width: 12px; height: 12px; background-image: url('../images/disabled-pager-previous.png') }

.pagination span.paginationRight a span.first { width: 12px; height: 12px; background-image: url('../images/pager-first.png') }
.pagination span.paginationRight a span.next { width: 12px; height: 12px; background-image: url('../images/pager-next.png') }
.pagination span.paginationRight a span.last { width: 12px; height: 12px; background-image: url('../images/pager-last.png') }
.pagination span.paginationRight a span.previous { width: 12px; height: 12px; background-image: url('../images/pager-previous.png') }

Como se puede ver en las siguientes imágenes las reglas CSS correctos coinciden con el marcado generado. Todavía no puedo ver las imágenes en el navegador. Alguna idea?

Para imágenes con discapacidad

Para activar las imágenes

Answer 1

Por supuesto:

<%= Html.Pager(Model.CustomerList)
        .First("<img src=\"http://example.com/first.png\" alt=\"first\" />")
        .Last("<img src=\"http://example.com/last.png\" alt=\"last\" />")
        .Next("<img src=\"http://example.com/next.png\" alt=\"next\" />")
        .Previous("<img src=\"http://example.com/previous.png\" alt=\"previous\" />")
%>

o si usted prefiere el uso de CSS:

<%= Html.Pager(Model.CustomerList)
        .First("<span class=\"first\" />")
        .Last("<span class=\"last\" />")
        .Next("<span class=\"next\" />")
        .Previous("<span class=\"previous\" />")
%>

y luego en un archivo CSS separada definir las imágenes de fondo.

---

ACTUALIZACIÓN:

Para obtener imágenes de fondo a aplicar sus elementos span necesita tener algo de contenido. Así que trate de añadir un espacio:

<div class="pagination">
    <span class="paginationLeft">1-2 di 4</span>
    <span class="paginationRight">
        <span class="first">&nbsp;</span> | 
        <span class="previous">&nbsp;</span> | 
        <a href="/x/Hearing/HomeSummary?page=2">
            <span class="next">&nbsp;</span>
        </a> | 
        <a href="/x/Hearing/HomeSummary?page=2">
            <span class="last">&nbsp;</span>
        </a>
    </span>
</div>

Answer 2

Trate de rodar su propia. He implementado una costumbre de cuadrícula y buscapersonas que se aprovecha de temas jQuery UI - puede ayudarle a rodar su propia o usted podría utilizar la aplicación. Blog es aquí con enlaces a una demo y fuente.