如何使用页面控件将分页功能添加到 DevExpress GridView

Question

我正在创建一个带有分页的新 DevExpress GridView，但是单击其他页面的链接时，它们没有任何作用。我需要添加这个功能，但我不知道从哪里开始。

新的 DevExpress GridView 基于不使用 DevExpress 的视图。此页面将是公司目录的列表，因此它具有名称、电话和位置等列。视图已创建并显示分页控件。我在 DevExpress 论坛上搜索了一些类似的问题，但这些都使用 .aspx，而我的 GridView 使用的是 .cshtml。

public ActionResult DevExpressView()
{
   return View(EmployeeList);
}

@Html.DevExpress().GetStyleSheets(new StyleSheet { ExtensionSuite = ExtensionSuite.GridView})

@Html.DevExpress().GridView(
    settings =>
    {
        settings.Name = "GridView";
        settings.CallbackRouteValues = new { Controller = "DevExpessController", Action = "DevExpressView" };

        settings.KeyFieldName = "Clock";
        settings.Width = System.Web.UI.WebControls.Unit.Percentage(100);
        settings.SettingsPager.PageSize = 32;
        settings.Settings.VerticalScrollBarMode = ScrollBarMode.Visible;
        settings.Settings.VerticalScrollableHeight = 350;
        settings.ControlStyle.Paddings.Padding = System.Web.UI.WebControls.Unit.Pixel(0);
        settings.ControlStyle.Border.BorderWidth = System.Web.UI.WebControls.Unit.Pixel(0);
        settings.ControlStyle.BorderBottom.BorderWidth = System.Web.UI.WebControls.Unit.Pixel(1);


        settings.Columns.Add("FirstName");
        settings.Columns.Add("LastName");
        settings.Columns.Add("Department");
        settings.Columns.Add("Title");
        settings.Columns.Add("PlantNO");
        settings.Columns.Add("Telephone");
        settings.Columns.Add("Mobile");
        settings.Columns.Add("Pager");

    }).Bind(Model).GetHtml()

GridView 底部有控件来处理分页，但是点击它们时什么也没有发生。我希望这些控件可以更改正在显示的员工页面。抱歉，如果我的问题没有意义，我是 DevExpress 的新手。

Answer 1

对于 DevExpress 服务器端控件来说，只有一个控制器动作是不够的。 您需要 2 个控制器操作、1 个视图和 1 个 PartialView 才能工作。 还要确保为 GridView 加载脚本（见下文）。

客户端导航到：

public ActionResult DevExpressView()
{
    IQueryable<Employee> model = GetYourDataFromSomewhere();
    return View("EmployeeList", model);
}

EmployeeList.cshtml（视图）

@model IEnumerable
@Html.DevExpress().GetScripts(new Script { ExtensionSuite = ExtensionSuite.GridView })
@Html.DevExpress().GetStyleSheets(new StyleSheet { ExtensionSuite = ExtensionSuite.GridView})

@Html.Partial("GridView", Model)

GridView.cshtml（部分视图）

重要提示：此视图只需要包含网格即可。没有别的！

@Html.DevExpress().GridView(
settings =>
{
    settings.Name = "GridView";
    settings.CallbackRouteValues = new { Controller = "DevExpessController", Action = "DevExpressViewPartial" };

    settings.KeyFieldName = "Clock";
    settings.Width = System.Web.UI.WebControls.Unit.Percentage(100);
    settings.SettingsPager.PageSize = 32;
    settings.Settings.VerticalScrollBarMode = ScrollBarMode.Visible;
    settings.Settings.VerticalScrollableHeight = 350;
    settings.ControlStyle.Paddings.Padding = System.Web.UI.WebControls.Unit.Pixel(0);
    settings.ControlStyle.Border.BorderWidth = System.Web.UI.WebControls.Unit.Pixel(0);
    settings.ControlStyle.BorderBottom.BorderWidth = System.Web.UI.WebControls.Unit.Pixel(1);


    settings.Columns.Add("FirstName");
    settings.Columns.Add("LastName");
    settings.Columns.Add("Department");
    settings.Columns.Add("Title");
    settings.Columns.Add("PlantNO");
    settings.Columns.Add("Telephone");
    settings.Columns.Add("Mobile");
    settings.Columns.Add("Pager");

}).Bind(Model).GetHtml()

网格的回调操作：

public ActionResult DevExpressViewPartial()
{
    IQueryable<Employee> model = GetYourDataFromSomewhere();
    return PartialView("GridView", model);
}

看看他们的demo。如果您复制该代码（当然 NorthwindDataProvider 除外），您应该有一个工作示例。