This project is read-only.

Problem with Pager previous buton

Aug 25, 2011 at 5:10 PM

Hello,

I just tried to use the Pager control, it is very nice but I do not know why,  
the generates javascript for the previous button put always 1   in the selected page,
for example whether you are on page 2,3,4,.... , The value chosen for this button will always be as the first button (which is normal for this button), all other
button works perfectly. Does anyone know why and how solve this problem ? Here is my code related to the use of the Pager.
Thanks in advance.

 

In the Master Page :

    <script src="<%: Url.Content("~/Scripts/jquery-1.5.1.min.js") %>" type="text/javascript"></script>
    <script src="<%: Url.Content("~/Scripts/jquery-1.6.1.min.js") %>" type="text/javascript"></script>
    <script src="<%: Url.Content("~/Scripts/jquery.validate.min.js") %>" type="text/javascript"></script>
    <script src="<%: Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js") %>" type="text/javascript"></script>
    <script src="<%: Url.Content("~/Scripts/jquery-ui-1.8.11.min.js") %>" type="text/javascript"></script>
    <script src="<%: Url.Content("~/Scripts/jquery.form.min.js") %>" type="text/javascript"></script>
    <script src="<%: Url.Content("~/Scripts/MicrosoftAjax.js") %>" type="text/javascript"></script>
    <script src="<%: Url.Content("~/Scripts/MicrosoftMvcAjax.js") %>" type="text/javascript"></script>
    <script src="<%: Url.Content("~/Scripts/MicrosoftMvcValidation.js") %>" type="text/javascript"></script>
    <script src="<%: Url.Content("~/Scripts/MVCControlToolkit.Controls-1.3.0.min.js") %>" type="text/javascript"></script>
    <script src="<%: Url.Content("~/Scripts/MVCControlToolkit.Controls.Core-1.3.0.min.js") %>" type="text/javascript"></script>

 

The index Page :

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<Paging>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Home
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ScriptContent" runat="server">
    <script src="<%: Url.Content("~/Scripts/PopupForm.js") %>" type="text/javascript"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2>
        Home
    </h2>
    <p>
        <%: Html.ActionLink("Add new coupon", "Create", null, new { @class="Addcoupon" })%>
    </p>   
    <% using (Html.BeginForm("Index", "Coupon")){ %>
    <table>
        <tr>
            <th>
                Name
            </th>
            <th>
                Image
            </th>
            <th>
                Value
            </th>
            <th>
                Description
            </th>
            <th>
                Start Date
            </th>
            <th>
                End Date
            </th>
            <th>
                Zone
            </th>
            <th>
            </th>
        </tr>
        <% foreach (var item in Model.ListeCoupons)
           { %>
        <tr>
            <td>
                <%: Html.DisplayFor(modelItem => item.Name) %>
            </td>
            <td>
                <div class="image-field-td">
                    <%= Html.Image(item.Image, item.Name)%>
                </div>
            </td>
            <td>
                <div class="value-display">
                    <%: Html.DisplayFor(modelItem => item.Value) %>
                    &nbsp;
                    <%: Html.Label("MoneySymbol", Html.GetMoneySymbol())%>
                </div>
            </td>
            <td>
                <%: Html.DisplayFor(modelItem => item.Description) %>
            </td>
            <td>
                <%: Html.DisplayFor(modelItem => item.StartDate) %>
            </td>
            <td>
                <%: Html.DisplayFor(modelItem => item.EndDate) %>
            </td>
            <td>
                <%: Html.DisplayFor(modelItem => item.Zone.Name) %>
            </td>
            <td>
                <%: Html.ActionLink("Edit", "Edit", new { id=item.CouponID }) %>
                |
                <%: Html.ActionLink("Details", "Details", new { id=item.CouponID }) %>
                | <a href="" onclick="$('#<%= item.CouponID %>').dialog('open'); return false;">Delete</a>
                <% Html.RenderPartial("Delete", item); %>
            </td>
        </tr>
        <% } %>
    </table>
    <div class="pager">       
        <% var pager = Html.PagerFor(m => m.CurrentPage, m => m.PreviousPage, m => m.TotalPages); %>
        <%:pager.PageButton("<<", PageButtonType.First, PageButtonStyle.Link) %>
        <%:pager.PageButton("<", PageButtonType.Previous, PageButtonStyle.Link) %>
        <%:pager.PageChoice(5) %>
        <%:pager.PageButton(">", PageButtonType.Next, PageButtonStyle.Link) %>
        <%:pager.PageButton(">>", PageButtonType.Last, PageButtonStyle.Link) %>      
    </div><%:Html.HiddenFor(m => m.TotalPages)%>
    <%} %>
</asp:Content>

 

The Paging class :

public class Paging
    {

        public int TotalPages { get; set; }
        public int TotalRows { get; set; }
        public int CurrentPage { get; set; }
        public int PreviousPage { get; set; }
        public List<Coupon> ListeCoupons { get; set; }

        public Paging()
        {
        }
       
        public static List<Coupon> GetPage(Coupons CouponRepository, out int totalPages, int page = 1)
        {
            int rowCount = CouponRepository.GetCoupons().Count();
            if (rowCount == 0)
            {
                totalPages = 0;
                return new List<Coupon>();
            }
            totalPages = rowCount / Data.ROWS_BY_PAGE;
            if (rowCount % Data.ROWS_BY_PAGE > 0) totalPages++;
            int toSkip = (page - 1) * Data.ROWS_BY_PAGE;
            return CouponRepository.GetCoupons(toSkip, Data.ROWS_BY_PAGE);
        }

    }

 

In the Controller :

 

#region Index       
               
        public ActionResult Index()
        {
            int totalPages;           
            Paging pageData = new Paging()
            {
                ListeCoupons = Paging.GetPage(CouponRepository, out totalPages),
                TotalPages = totalPages,
                CurrentPage = 1,
                PreviousPage = 1
            };
            return View(pageData);
            //return View(CouponRepository.GetCoupons());
        }

        [HttpPost]
        public ActionResult Index(Paging model)
        {
            if (!ModelState.IsValid)
            {
                model.CurrentPage = model.PreviousPage; //cancel possible page change and force correcting errors
                return View(model);
            }
            else
            {
                ModelState.Clear();
                //Paging.UpdatePage(model.ToDoList);
                int totalPages;
                Paging result = new Paging()
                {
                    PreviousPage = model.CurrentPage,
                    CurrentPage = model.CurrentPage,

                    ListeCoupons = Paging.GetPage(CouponRepository, out totalPages, model.CurrentPage),
                    TotalPages = totalPages,
                   
                };
                return View(result);
            }
        }
               
        #endregion

 

The Data class :

 

[MetadataTypeAttribute(typeof(Coupon.CouponMetadata))]
    public partial class Coupon
    {       
          
        public partial class CouponMetadata
        {
            [Key]
            [RegularExpression(@"^(\{{0,1}([0-9a-fA-F]){8}-([0-9a-fA-F]){4}-([0-9a-fA-F]){4}-([0-9a-fA-F]){4}-([0-9a-fA-F]){12}\}{0,1})$")]
            public global::System.Guid CouponID { get; set; }

            [Required]
            [StringLength(100)]
            [Display(Name = "Name", Order = 0)]
            public global::System.String Name { get; set; }

            [StringLength(250)]
            //[DataType(DataType.ImageUrl)]
            //[FileExtensions("png")]
            [Display(Name = "Image", Order = 1)]
            public global::System.String Image { get; set; }

            [Range(0.01, 99.99)]
            [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0,0}")]
            [Display(Name = "Value", Order = 2)]
            public global::System.Decimal Value { get; set; }

            [Required]
            [DataType(DataType.Text)]
            [Display(Name = "Description", Order = 3)]
            public global::System.String Description { get; set; }

            [Required]
            [DataType(DataType.Date)]      
            [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd/MM/yyyy}")]
            [EqualOrLesserThan("EndDate")]
            [Display(Name = "Start Date", Order = 4)]
            public global::System.DateTime StartDate { get; set; }

            [Required]
            [DataType(DataType.Date)]
            [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd/MM/yyyy}")]
            [EqualOrGreaterThan("StartDate")]           
            [Display(Name = "End Date", Order = 5)]
            public global::System.DateTime EndDate { get; set; }

            [Required]
            [Display(Name = "Category", Order = 6)]
            public global::System.Guid CategoryID { get; set; }

            [Required]
            [Display(Name = "Zone", Order = 7)]
            public global::System.Int32 ZoneID { get; set; }

            [DataType(DataType.DateTime)]
            [ScaffoldColumn(true)]
            public global::System.DateTime DatetimeCreated { get; set; }

            [DataType(DataType.DateTime)]
            [ScaffoldColumn(false)]
            public global::System.DateTime DatetimeModified { get; set; }

            [StringLength(200)]
            [ScaffoldColumn(false)]
            public global::System.String InternalNote { get; set; }

            [StringLength(200)]
            [ScaffoldColumn(false)]
            public global::System.String UserCreator { get; set; }

            [StringLength(200)]
            [ScaffoldColumn(false)]
            public global::System.String UserModifier { get; set; }

            [Include]
            public Zone Zone { get; set; }

        }
    }

 

And For finish a piece (the part of the pager when the page 3 is selected) of the Generated html and javascript :

<div class="pager">

<input type='hidden' value='3' id='PreviousPage' name='PreviousPage' /><input type='hidden' value='3' id='CurrentPage' name='CurrentPage'/>
<a id="CurrentPage_PageButtonFirst" style="cursor: pointer;" href="javascript:void(0);" >&lt;&lt;</a>
<script language='javascript' type='text/javascript'>
$('#CurrentPage_PageButtonFirst').click(function()
{
PageButton_Click('CurrentPage', '1', '', '', 'UnobtrusiveClient');
});
</script>
<a id="CurrentPage_PageButtonPrevious" style="cursor: pointer;" href="javascript:void(0);" >&lt;</a>
<script language='javascript' type='text/javascript'>
$('#CurrentPage_PageButtonPrevious').click(function()
{
PageButton_Click('CurrentPage', '1', '', '', 'UnobtrusiveClient');
});
</script>
<a id="CurrentPage_1" style="cursor: pointer;" href="javascript:void(0);" >1</a>
<script language='javascript' type='text/javascript'>
$('#CurrentPage_1').click(function()
{
PageButton_Click('CurrentPage', '1', '', '', 'UnobtrusiveClient');
});
</script>
&nbsp;
<a id="CurrentPage_2" style="cursor: pointer;" href="javascript:void(0);" >2</a>
<script language='javascript' type='text/javascript'>
$('#CurrentPage_2').click(function()
{
PageButton_Click('CurrentPage', '2', '', '', 'UnobtrusiveClient');
});
</script>
&nbsp;
<span id="CurrentPage_3" style="cursor: pointer; color: gray;" href="javascript:void(0);" selected-page="selected" >3</span>
&nbsp;
<a id="CurrentPage_4" style="cursor: pointer;" href="javascript:void(0);" >4</a>
<script language='javascript' type='text/javascript'>
$('#CurrentPage_4').click(function()
{
PageButton_Click('CurrentPage', '4', '', '', 'UnobtrusiveClient');
});
</script>
<a id="CurrentPage_PageButtonNext" style="cursor: pointer;" href="javascript:void(0);" >&gt;</a>
<script language='javascript' type='text/javascript'>
$('#CurrentPage_PageButtonNext').click(function()
{
PageButton_Click('CurrentPage', '4', '', '', 'UnobtrusiveClient');
});
</script>
<a id="CurrentPage_PageButtonLast" style="cursor: pointer;" href="javascript:void(0);" >&gt;&gt;</a>
<script language='javascript' type='text/javascript'>
$('#CurrentPage_PageButtonLast').click(function()
{
PageButton_Click('CurrentPage', '4', '', '', 'UnobtrusiveClient');
});
</script>
</div><input data-val="true" data-val-number="The field TotalPages must be a number." data-val-required="The TotalPages field is required." id="TotalPages" name="TotalPages" type="hidden" value="4" />
Coordinator
Aug 25, 2011 at 7:40 PM
Edited Aug 26, 2011 at 4:10 AM

You duplicated a lot of jscript files, see below_

 <script src="<%: Url.Content("~/Scripts/jquery-1.5.1.min.js") %>" type="text/javascript"></script>
    <script src="<%: Url.Content("~/Scripts/jquery-1.6.1.min.js") %>" type="text/javascript"></script>// if you put this you dont need to put /jquery-1.5.1.min.js that is a previous version
    <script src="<%: Url.Content("~/Scripts/jquery.validate.min.js") %>" type="text/javascript"></script>
    <script src="<%: Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js") %>" type="text/javascript"></script>
    <script src="<%: Url.Content("~/Scripts/jquery-ui-1.8.11.min.js") %>" type="text/javascript"></script>//verify if in the configuration fiile unobtrusive ajax and validation are selected
    <script src="<%: Url.Content("~/Scripts/jquery.form.min.js") %>" type="text/javascript"></script>
    <script src="<%: Url.Content("~/Scripts/MicrosoftAjax.js") %>" type="text/javascript"></script>// if you use unobtrusive validation you have to use also  unobtrusive ajax, so ypu can't include this
    <script src="<%: Url.Content("~/Scripts/MicrosoftMvcAjax.js") %>" type="text/javascript"></script>// if you use unobtrusive validation you have to use also  unobtrusive ajax, so ypu can't include this
    <script src="<%: Url.Content("~/Scripts/MicrosoftMvcValidation.js") %>" type="text/javascript"></script>//if you use unobtrusive validation you MUST NOY INCLUDE THIS
    <script src="<%: Url.Content("~/Scripts/MVCControlToolkit.Controls-1.3.0.min.js") %>" type="text/javascript"></script>
    <script src="<%: Url.Content("~/Scripts/MVCControlToolkit.Controls.Core-1.3.0.min.js") %>" type="text/javascript"></script>//if you included MVCControlToolkit.Controls-1.3.0.min.js you must not include this. This is a reduced version of the previous file, to be used in case you don't use more complex controls.

 

Correct the above errors and please see the examples in the download area to see what files to include in the layout page

Aug 26, 2011 at 9:21 AM

Thank for your good answer, i clean my code, but the problem is still there, here now the js that i load :

<script src="<%: Url.Content("~/Scripts/jquery-1.6.1.min.js") %>" type="text/javascript"></script>
    <script src="<%: Url.Content("~/Scripts/jquery.validate.min.js") %>" type="text/javascript"></script>
    <script src="<%: Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js") %>" type="text/javascript"></script>
    <script src="<%: Url.Content("~/Scripts/jquery-ui-1.8.11.min.js") %>" type="text/javascript"></script>
    <script src="<%: Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js") %>" type="text/javascript"></script>   
    <script src="<%: Url.Content("~/Scripts/MVCControlToolkit.Controls-1.3.0.min.js") %>" type="text/javascript"></script>

I had this in the index like in the examples

<%@ Import Namespace=" MVCControlsToolkit.Core" %>
<%@ Import Namespace=" MVCControlsToolkit.Controls" %>

another idea?

Coordinator
Aug 26, 2011 at 2:40 PM

I am not sure I have understood what your problem is, however I suspect you are claiming that the PreviousPage filed of the ViewModel is not updated as pages changes. Well, this is by design!

PreviousPage just store a value you have set previously in the controller. This means that after a succesfull change of page you have to set MANUALLY the previous page to the same value of the selected page, otherwis it will always have the initial value 1.

In other terms the previous page  JUST STORE  A VALUE YOU PUT IN IT.