页面编号的MVC页面显示问题

在我看来，我已经实现了分页，一切看起来都不错。但是，页码的格式不是我所期望的。它显示的页面索引这样：页面编号的MVC页面显示问题

点击该链接的作品，但它应该在直排

这里已经显示的东西是我的看法代码

<table> 
    <tr> 
     <th> 
      Account Type 
     </th> 
     <th> 
      Account #1 
     </th> 
     <th> 
      Account #2 
     </th> 
     <th> 
      Amount 
     </th> 
     <th> 
      Comment 
     </th> 
     <th> 
      Date 
     </th> 

    </tr> 

    @foreach (var item in Model) 
    { 
    <tr> 
     <td> 
      @Html.DisplayFor(modelItem => item.TransactionType) 
     </td> 
     <td> 
      @Html.DisplayFor(modelItem => item.AccountNumber) 
     </td> 
     <td> 
      @Html.DisplayFor(modelItem => item.DestAccount) 
     </td> 
     <td> 
      @Html.DisplayFor(modelItem => item.Amount) 
     </td> 
     <td> 
      @Html.DisplayFor(modelItem => item.Comment) 
     </td> 
     <td> 
      @Html.DisplayFor(modelItem => item.ModifiedDate) 
     </td> 

    </tr> 
} 
</table> 

@Html.PagedListPager(Model, page => Url.Action("Index",new {page}))

这里是生成页面的html

enter code here 

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width" /> 
    <title>Statements</title> 
    <link href="/Content/site.css" rel="stylesheet"/> 

    <script src="/Scripts/modernizr-2.5.3.js"></script> 

</head> 
<body> 



      <div id="midNav"> 
       <a href="/ATM">ATM</a> 
       <span> | </span> 
       <a href="/Statement">Statement</a> 
       <span> | </span> 
       <a href="/Customer">My Profile</a> 
      </div> 
      <div id="nav"> 
       <strong>dalmar202</strong> 
       <span> | </span> 
       <a href="/User/LogOut">Log Out</a> 
      </div>   




    <div id="content" > 



<h2>Your Statements</h2> 

<select id="Accounts" name="Accounts"><option value="">-- Select Account --</option> 
<option value="1">1</option> 
<option value="2">2</option> 
</select> 

<table> 
    <tr> 
     <th> 
      Account Type 
     </th> 
     <th> 
      Account #1 
     </th> 
     <th> 
      Account #2 
     </th> 
     <th> 
      Amount 
     </th> 
     <th> 
      Comment 
     </th> 
     <th> 
      Date 
     </th> 

    </tr> 

    <tr> 
     <td> 
      D 
     </td> 
     <td> 
      1 
     </td> 
     <td> 
      1 
     </td> 
     <td> 
      150.00 
     </td> 
     <td> 
      saad 
     </td> 
     <td> 
      26/09/2013 8:49:19 PM 
     </td> 

    </tr> 
    <tr> 
     <td> 
      D 
     </td> 
     <td> 
      2 
     </td> 
     <td> 
      2 
     </td> 
     <td> 
      50.00 
     </td> 
     <td> 
      saad 
     </td> 
     <td> 
      26/09/2013 9:00:29 PM 
     </td> 

    </tr> 
    <tr> 
     <td> 
      D 
     </td> 
     <td> 
      2 
     </td> 
     <td> 
      2 
     </td> 
     <td> 
      150.00 
     </td> 
     <td> 
      ss 
     </td> 
     <td> 
      26/09/2013 9:41:09 PM 
     </td> 

    </tr> 
    <tr> 
     <td> 
      D 
     </td> 
     <td> 
      1 
     </td> 
     <td> 
      1 
     </td> 
     <td> 
      0.00 
     </td> 
     <td> 

     </td> 
     <td> 
      26/09/2013 10:10:58 PM 
     </td> 

    </tr> 
    <tr> 
     <td> 
      D 
     </td> 
     <td> 
      1 
     </td> 
     <td> 
      1 
     </td> 
     <td> 
      0.00 
     </td> 
     <td> 

     </td> 
     <td> 
      26/09/2013 10:19:07 PM 
     </td> 

    </tr> 
</table> 

<div class="pagination"><ul><li class="active"><a>1</a></li><li><a href="/Statement?page=2">2</a></li><li><a href="/Statement?page=3">3</a></li><li><a href="/Statement?page=4">4</a></li><li><a href="/Statement?page=5">5</a></li><li><a href="/Statement?page=6">6</a></li><li><a href="/Statement?page=7">7</a></li><li><a href="/Statement?page=8">8</a></li><li><a href="/Statement?page=9">9</a></li><li><a href="/Statement?page=10">10</a></li><li class="disabled PagedList-ellipses"><a>&#8230;</a></li><li class="PagedList-skipToNext"><a href="/Statement?page=2">»</a></li><li class="PagedList-skipToLast"><a href="/Statement?page=45">»»</a></li></ul></div> 


     <script src="/Scripts/jquery-1.7.1.js"></script> 



    </div> 

    <div id="footer"></div> 
</body> 
</html>

来源

2013-09-29 kayze

您能分享正在生成的HTML标记吗？ – Tentux

完成后，我编辑了包含html – kayze

的帖子。我应该添加这个int pageSize = 5; int pageNumber =（page ?? 1）; return View（statementModel.ToPagedList（pageNumber，pageSize））; – kayze

请执行以下操作

 

    .pagination ul { 
     margin-left: 10px; 
     list-style:none; 

    } 
    .pagination li { 
     display: inline; 

    }

来源

2013-12-14 02:59:17

页面编号的MVC页面显示问题

回答

相关问题