Question

我试图让WebGrid视图使用razor工作，到目前为止，除了页脚的分页图标之外，我已经设法将大部分内容设置为样式。

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

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

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

（我无法发布图片，因此链接到imgur）

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

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

看看dev工具，我看到html看起来像这样：

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

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

上述文章位于以下链接：

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

有没有办法获取当前页面 - 无论是使用jQuery还是WebGrid本身而不是正则表达式？

Answer 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”）标签访问它。

我首先得到innertext并在有空格时拆分它们。

对于来自innertext的每个元素，我检查它的位置是什么，并从innerHTML添加一个空格字符。

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

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

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

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

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

2 个答案: