分页局部图排序不是网络的网格工作使用/ [英] Paging/Sorting not working on web grid used in Partial View

问题描述

我有哪里我显示这取决于从页面中选择一个值的web网格的局部视图。

I have a partial view where I am showing a web grid depending upon a value selected from a page.

有关下拉我用

 @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这是对我显示与Web网的新窗口我的部分观点整理。

everything works good, but when I try doing a paging or sorting on my webgrid which is on my partial view I am showing a new window with the web grid.

我希望能够进行排序，并没有回传在同一页上页

I wanted to be able to sort and page on the same page without postback

请帮忙

推荐答案

下面的例子为我工作得很好。

The following example works fine for me.

型号：

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",
        data_url = Url.Action("Foo", "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请求来刷新网格，而不是职位，因为在下拉列表中选择这种方式的值查询字符串参数是为将来preserved公告排序和分页。

Notice that I have used a GET request to refresh the grid instead of POST because this way the value query string parameter selected in the dropdown is preserved for future sorting and paging.

这篇关于分页局部图排序不是网络的网格工作使用/的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！