Question

我正在尝试在mvc 2.0中实现一种非常简单的分页技术

我有一个看起来像这样的客户模型

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

现在在控制器索引中，我有一个虚拟集合或列表，我将其传递给这样的

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();
}

现在在View中我有一个下拉列表

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

现在在foreach循环中，我循环遍历从控制器传递的所有ViewData，它工作正常。

当用户从下拉列表中更改页面号时，我将其传递给控制器，如此

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

这也会获取正确的数据，但会将值重置为1.我的问题是如何在页面更改后保留下拉列表选择值（页码）？

非常感谢帮助。谢谢

Answer 1

尝试使用javascript中的document.getElementById获取示例：

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

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

注意：如果您使用的是asp.net-mvc并且此javascript位于视图中，则可以使用UrlHelper属性中的Url对象添加路由。它将使用asp.net mvc上定义的路由表。

Answer 2

您可以使用JavaScript和本地存储来保存值

$( 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;
}

Answer 3

好好打了我的头约1天后我终于改变了方法。我现在在JsonResult而不是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);
}

现在可以像这样对这个控制器方法进行ajax调用

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

这种方式可以预期。

mvc 2中的简单分页

3 个答案: