immagini cercapersone MvcContrib

Question

Sono in grado di utilizzare la griglia MvcContrib Pager come nel seguente esempio

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

C'è un modo per modificare i link di mostrare le immagini cliccabili al posto del testo normale?

Modifica

Ho applicato la soluzione Darin e funziona molto bello tranne che per l'immagine non viene mostrato dal browser. Questo è il markup generato dal helper pager

<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>

e queste sono le regole CSS definiti

.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') }

Come si può vedere dalle seguenti immagini le regole CSS corrette corrispondono markup generato. Ancora non riesco a vedere le immagini sul browser. Qualche idea?

Per le immagini disabili

Per le immagini abilitato

Answer 1

Certo:

<%= 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, se si preferisce usare i CSS:

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

e poi in un file CSS separato definire le immagini di sfondo.

---

UPDATE:

Per le immagini di sfondo da applicare i vostri elementi span bisogno di avere qualche contenuto. Quindi, prova ad aggiungere uno spazio:

<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

Prova a rotazione il proprio. Ho implementato un personalizzato Grid e Pager che sfrutta temi jQuery UI - può aiutare a rotolare proprio oppure la si potrebbe usare l'implementazione. Blog è qui con link a una demo e fonte.