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

Question

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

新的 DevExpress

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

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 个部分视图才能正常工作。此外，请确保加载 GridView 的脚本(见下文(。

客户端导航到：

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

EmployeeList.cshtml (View(

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

GridView.cshtml (Partial View(

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

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

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