MVCContrib Pager Bilder

Question

Ich kann den MVCContrib Grid Pager wie im folgenden Beispiel verwenden,

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

Gibt es eine Möglichkeit, die Links zu ändern anklickbare Bilder anstelle von Klartext zeigen?

Bearbeiten

Ich habe Darin Lösung angewandt und es funktioniert sehr schön, außer für das Bild vom Browser nicht gezeigt werden. Dies ist das Markup durch den Pager Helfer erzeugt

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

und das sind die CSS-Regeln definiert

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

Wie Sie aus den folgenden Bildern der richtigen CSS-Regeln entsprechen den Markup generierte sehen können. Ich kann immer noch nicht sehen Bilder auf dem Browser. Jede Idee?

Für behinderte Bilder

Für aktiviert Bilder

Answer 1

Natürlich:

<%= 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\" />")
%>

oder wenn Sie es vorziehen, zu verwenden CSS:

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

und dann in einer separaten CSS-Datei der Hintergrundbilder definieren.

---

UPDATE:

Hintergrund von Bildern auf den spannelemente einige Inhalte haben müssen angewendet werden. So versuchen, einen Raum hinzufügen:

<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

Versuchen Sie, Ihre eigenen Rollen. Ich habe eine benutzerdefinierte Grid und Pager implementiert, die die Vorteile von jQuery UI Themen nimmt - es kann Ihnen helfen, Ihre eigene Rolle oder man könnte die Umsetzung verwenden. Blog hier mit Links zu einer Demo und Quelle.