Asp.net mvc MVCContrib寻呼机图像

我能够使用MVCContrib网格寻呼机，如下示例所示

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

有没有办法修改链接以显示可点击的图像而不是纯文本

编辑

我已经应用了达林解决方案，它的工作非常好，除了图像没有显示的浏览器。这是寻呼机助手生成的标记

<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规则与生成的标记相匹配。我仍然无法在浏览器上看到图像。有什么想法吗

对于禁用的图像

对于启用的图像 当然可以：

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

然后在一个单独的CSS文件中定义背景图像

---

更新：

要应用背景图像，span元素需要有一些内容。因此，请尝试添加一个空格：

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

1-2 di 4
| 
| 
| 

尝试自己滚动。我已经实现了一个利用jQueryUI主题的自定义网格和寻呼机——它可以帮助您自己滚动，也可以使用该实现。博客中有演示和源代码的链接。

谢谢。你的建议很有效。但是，如果我在第一页或最后一页，就会出现问题。我想寻呼机可以使用暗显图像的链接是非活动的。有办法处理吗？@Lorenzo，可点击的页面将在锚定标签内。因此，您可以为锚点内的那些跨距编写不同的CSS规则：

。分页span{/**ENABLE IMAGE HERE**/}

。默认情况下，您可以调暗图像并启用符合此CSS规则的图像：

。分页span{/**DISABLE IMAGE HERE**/}

。非常感谢。我要试试：）@Darin:我最终得到了以下css规则：对于禁用的图像

。分页span.paginationRight span.first{宽度：12px；高度：12px；背景图像：url（'../images/disabled pager first.png'）

，对于启用的图像

。分页span.paginationRight span.first{宽度：12px；高度：12px；背景图像：url（'../images/pager first.png'）}

。使用Chrome DT，我可以看到应用于标记的正确类，但我看不到图像。有什么提示吗？@Lorenzo，你能试着用FireBug检查一下吗？它显示了应用于每个DOM元素的CSS规则，你可以看到是否应用了正确的图像以及路径是否正确。祝贺你！它看起来令人印象深刻：）

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