WebGrid 页脚获取当前页面的样式答案

【问题标题】：WebGrid footer get styling for the current pageWebGrid 页脚获取当前页面的样式
【发布时间】：2014-07-23 06:36:19
【问题描述】：

我试图让 WebGrid 视图使用 razor 工作，到目前为止，我已经成功地设计了除了页脚的分页图标之外的所有内容。

我已经搜索了很多地方以查看如何修改页脚的当前选定页面（文本），但无济于事。

似乎页脚会为当前未使用 a 标签选择的任何页面生成标签，但不会为当前页面生成任何内容。

我正在尝试让每个分页按钮周围都有一个边框，这就是它目前的样子：

（我不能在这里发布图片，所以链接到 imgur）

http://imgur.com/a/EPU3M（下图）

我已经修改了当前所选页面之外的所有元素 - 我还希望有一个边框并更改其颜色（使其看起来与其他页面不同）。

查看开发工具，我看到 html 看起来像这样：

（上一个链接的顶部图片）

似乎有一篇文章表明这是使用正则表达式完成的，但有人评论说应该使用 webgrid 本身来完成。

上述文章在以下链接：

http://weblogs.asp.net/imranbaloch/highlighting-the-current-page-of-webgrid

有什么方法可以获取当前页面 - 无论是使用 jQuery 还是 WebGrid 本身而不是正则表达式？

【问题讨论】：

标签： jquery css asp.net-mvc styling webgrid

【解决方案1】：

好的，所以我找到了解决我的问题的方法，我使用 javascript 实现了这一点。

不确定这是否是最佳解决方案，但考虑到使用 asp.net 博客中描述的方法并不能像我当前的方法（在 webgrid 构造函数中定义 CSS）那样轻松地设置页脚样式，这是最好的方法 - 我希望在这个时代没有人关闭 javascripts 会阻止它运行。

所以基本上我所做的是

var gridFooterHTML = $("td")[0].innerHTML;
var gridFooterText = $("td")[0].innerText;

var gridArrayText = gridFooterText.split(" ");

for (var i = 0; i < gridArrayText.length; i++) {

    var checkPosition = gridFooterHTML.indexOf(gridArrayText[i] + " ");

    if (checkPosition != -1) {
        var x = gridFooterHTML.replace(gridArrayText[i], "<a id=\"currentPage\">" + gridArrayText[i] + "</a>");
        $("td")[0].innerHTML = x;
    }

}

我的项目没有任何其他表，所以我只是使用 $("td") 标签访问它。

我首先获取内部文本，并在有空格时将它们拆分。

对于内部文本中的每个元素，我检查它的位置，并在内部HTML 中添加一个空格字符。

如果它返回一个不是-1的值，我已经找到了我需要的位置，所以我将HTML文本（目前只是一个数字）替换为一个id。

现在这个数字有一个 ID，我可以使用 CSS 定位它并应用与其他页面链接相同的格式。

希望这对可能使用过 webgrids 的其他人有所帮助。

【讨论】：

【解决方案2】：

我认为您也可以为此目的查看此http://forums.asp.net/t/1777459.aspx?How+to+highlight+the+current+page+number+in+MVC+WebGrid+just+like+the+number+in+this+forum+ 链接

<style>
.selected
{
    background: none repeat scroll 0 0 #267CB2;
    color: #FFFFFF;
    margin: 5px;
}
</style>
@functions{
public class Employee
{
    public Employee()
    {
        ContactNumbers = new List<string>();
    }
    public string Name { get; set; }
    public Address Address { get; set; }
    public List<string> ContactNumbers { get; set; }
    public Address NotNullableAddress
    {
        get
        {
            return Address ?? new Address();
        }
    }
    public string Contacts
    {
        get
        {
            return string.Join("; ", ContactNumbers);
        }
    }
}
public class Address
{
    public string City { get; set; }
}
}
@{
var list = new List<Employee>();
for (int i = 0; i < 20; i++)
{
    list.Add(new Employee
            {
                Name = "A" + i,
                Address = new Address { City = "AA" + i },
                ContactNumbers = new List<string> { "021-216452" + i, "9231425651" + i }
            });
}
var grid = new WebGrid(source: list);
var pager = grid.Pager().ToString();
var newPager = System.Text.RegularExpressions.Regex.Replace(pager, "(\\d+) ", "<span class='selected'>$1</span>");
var gridHtml = grid.GetHtml(columns: grid.Columns(
    grid.Column("NotNullableAddress.City", header: "City"),
    grid.Column("Name"),
    grid.Column("Contacts"))).ToString();
gridHtml = System.Text.RegularExpressions.Regex.Replace(gridHtml, "<tfoot>  ([^<]*|<[^/]*|</[^t]*)*</tfoot>", "");

 }
 @(new HtmlString(gridHtml))
 @(new HtmlString(newPager))

【讨论】：