MVCContribページャ画像

Question

私は次のサンプル

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

のようにMVCContribグリッドポケットベルを使用することができる午前クリッカブルな画像の代わりに、プレーンテキストを表示するためにリンクを変更する方法はありますか？

EDIT

私はダーリン・ソリューションを適用してきたし、それがブラウザによって示されていない画像を除いて、非常に素晴らしい作品。これは、ページャヘルパー

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

によって生成されたマークアップであり、これらはあなたが正しいCSSルールが生成されるマークアップに合わせ、以下の画像から見ることができるように

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

定義されたCSSルールです。それでも私はブラウザで画像を見ることができません。何か案が？もちろん

無効イメージの場合

有効画像の場合

Answer 1

：

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

か、CSSを使用することを好む場合：

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

し、その後でa別のCSSファイルは背景画像を定義します。

---

UPDATE：背景画像の場合

が適用されるためにあなたのスパン要素は、一部のコンテンツを持っている必要があります。スペースを追加してみてください：

<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

自分で試してみてください。私は、jQueryのUIテーマを利用するカスタムグリッドとページャを実装しました。これは、独自のロールを作成するのに役立つか、実装を使用するのに役立ちます。ブログはhereで、デモとソースへのリンクがあります。