Simple paging in mvc 2

Question

I am trying to implement a very simple paging techniques in mvc 2.0

I have a customer model which looks like this

public class Customer
{
public string name{get;set;}
public string address{get;set;}
public string city{get;set;}
}

Now in controller index I have a dummy collection or list which I am passing to view like this

ActionResult index(int page=1)
{
 List<Customer> col=new List<Customer>();
 col.Add(new Customer(.....)
 .....
 ViewData["PagedList"]=col.skip((page-1)*pagesize)*take(pagesize);
 return View();
}

Now in View I have a dropdown list

<select id="dropdown" onChange="getthis()">
<option>1</option>
<option>2</option>
<option>3</option>  //This are page no hardcoded
<option>4</option>
<option>5</option>
</select>

Now inside foreach loop I am looping through all ViewData passed from controller and it works fine.

When user changes page no from dropdown I pass it to controller like this

function getthis()
{
 var page=//get page no from dropdown
 self.location="/Home/Index?page=" + page
}

this also fetches correct data but it resets the value back to 1.My question is how can I hold the dropdown selected value(page number) after page change?

Help will be much appreciated.Thanks

Answer 1

Ok after beating my head for around 1 days I finally changed the approach.I am now returning my object in JsonResult instead of ActionResult.

public JsonResult CustomerList(int page=1)
{
List<Customer> col=new List<Customer>();
col.Add(new Customer(.....)
 .....
var result=col.skip((page-1)*pagesize)*take(pagesize);
return Json(result,JsonBehaviour.AllowGet);
}

In view now making ajax call to this controller method like this

$.getJson('/Home/CustomerList?page=' + pagefromdropdownselction,function(data){
  //here I loop through the data and form html table accordingly.
 $.each(data,function(key,value){
  });
});

This way it works expectedly.

Answer 2

try using document.getElementById from javascript, for sample:

function getthis()
{
    var drop = document.getElementById("dropdown");
    var page = drop.options[drop.selectedIndex].value;

    self.location = "<%=Url.Action("Index", "Home")%>?page=" + page;
}

Note: If you are using asp.net-mvc and this javascript is on the view, you could use the UrlHelper object from Url property to add a route. It will use the route tables defined on the asp.net mvc.

Answer 3

you can do it with JavaScript and local storage to hold the value

$( document ).ready(function() {
  $("#dropdown").val(localStorage.page);

  // or you can also get the query string 
$("#dropdown").val( getParameterByName('page'));

});

function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

function getthis()
{
   var page=//get page no from dropdown
   self.location="/Home/Index?page=" + page
   localStorage.page=1;
}