show page number in gridview

Basically grid view is showing the page number by giving the property to the  allow paging and defined the page size like:

  Code snippet  

<asp:GridView ID="grdCGGoodsDesc" BackColor="White"   runat="server" BorderWidth="1px" AutoGenerateEditButton="false"  PagerSettings-Mode="Numeric" ShowHeader="false" " ShowFooter="true" Width="100%" AutoGenerateColumns="false" AllowPaging="true" PageSize="6" OnPageIndexChanging="grdCGDesc_PageIndexChanging">

  Allow Paging is allowing the pagging of your grid view; PazeSize is defind the number of items display in par page. but when you see on your code it not look very good its looking very awakward and very detractive, like below;

But if you will provide the style its visibility is more and it will attract the user also in user website; There is no need of very big coding only and simple code CSS.

  HTML Code

@Add below code in grid view style setting

 <PagerSettings Mode="Numeric" PageButtonCount="10" Position="TopAndBottom" />

<PagerStyle CssClass="pagination" HorizontalAlign="Right" VerticalAlign="Middle" />


  Pagination CSS - 

@Put it into Inline style sheet or CSS file;

/* paging on grid ----- */
/*---------Grid view pagging style--------- */

.pagination
{  
font-size: 14px;              
 }

 .pagination a  
   {
border: solid 1px black;    
color: Black;    
font-size: 14px;  
/*text-decoration: underline;*/    
padding: 0.3em 0.5em;    
background-color: #c0c0c0;
}

.pagination span
 {  
display: block;    
float: left;
padding: 0.3em 0.5em;
  /*margin-right: 5px;      
color: Yellow;
*/    
margin-bottom: 2px;  
background-color: #ffcc66;  
border: solid 1px black;  
text-decoration: none;  
font-weight:bold;
} .pagination .current
 { background-color: #ffcc66;    
color: #fff;    
border: solid 1px #AAE;
}
.pagination .current.prev,
.pagination .current.next
 { color: #999;   border-color: #999;   background-color: #ffcc66; }

 Now your screen will be display like;