asp.net-mvc-3 – 分页/排序不适用于部分视图中使用的网格

发布时间：2020-12-16 00:05:11 所属栏目：asp.Net 来源：网络整理

导读：我有局部视图,我在显示网格,具体取决于从页面中选择的值. 对于下拉我用过 @Html.DropDownListFor(x = x.ItemId,new SelectList(Model.Items,"Value","Text"),new { id = "myddl",data_url = Url.Action("Foo","SomeController")}) 对于下拉项目选择我使用过

我有局部视图,我在显示网格,具体取决于从页面中选择的值.

对于下拉我用过

@Html.DropDownListFor(
x => x.ItemId,new SelectList(Model.Items,"Value","Text"),new { 
    id = "myddl",data_url = Url.Action("Foo","SomeController")
}
)

对于下拉项目选择我使用过

$(function() {
$('#myddl').change(function() {
   var url = $(this).data('url');
   var value = $(this).val();
   $('#result').load(url,{ value: value })
});
});

以下是我的行动

public ActionResult Foo(string value)
 {
  SomeModel model = ...
return PartialView(model);
 }

一切都很好,但是当我尝试在我的部分视图上的webgrid上进行分页或排序时,我正在显示一个带有网格的新窗口.

我希望能够在没有回发的情况下对同一页面进行排序和分页

请帮忙

解决方法

以下示例适用于我.

模型：

public class MyViewModel
{
    public string Bar { get; set; }
}

控制器：

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult Foo(string value)
    {
        var model = Enumerable.Range(1,45).Select(x => new MyViewModel
        {
            Bar = "bar " + value + " " + x
        });
        return PartialView(model);
    }
}

Index.cshtml视图：

<script type="text/javascript">
    $(function () {
        $('#myddl').change(function () {
            var url = $(this).data('url');
            var value = $(this).val();
            $.ajax({
                url: url,type: 'GET',cache: false,data: { value: value },success: function (result) {
                    $('#result').html(result);
                }
            });
        });
    });
</script>

@Html.DropDownList(
    "id",new[] {
        new SelectListItem { Value = "val1",Text = "value 1" },new SelectListItem { Value = "val2",Text = "value 2" },new SelectListItem { Value = "val3",Text = "value 3" },},new {
        id = "myddl","Home")
    }
)

<div id="result">
    @Html.Action("Foo")
</div>

Foo.cshtml部分：

@model IEnumerable<MyViewModel>
@{
    var grid = new WebGrid(
        canPage: true,rowsPerPage: 10,canSort: true,ajaxUpdateContainerId: "grid"
    );
    grid.Bind(Model,rowCount: Model.Count());
    grid.Pager(WebGridPagerModes.All);
}

@grid.GetHtml(
    htmlAttributes: new { id = "grid" },columns: grid.Columns(
        grid.Column("Bar")
    )
)

请注意,我已使用GET请求刷新网格而不是POST,因为这样保留了下拉列表中选择的值查询字符串参数,以便将来进行排序和分页.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!