ASP 开发快递 如何按组合框选定项筛选网格视图

Question

我在从组合框到网格视图的交互时遇到问题。我的用例是：用户从组合框值中选择，gridview 将按组合框中的值更新其内容。我在aps Web应用程序中使用devexpress控件。

型：

public class MyModel
{
    public IEnumerable<Person> Persones()
    {
        return DataProvider.GetPersons();
    }
    public IEnumerable<Role> Roles()
    {
        return DataProvider.GetRoles();
    }
    public int SelectedRoleId { get; set; }
}

索引视图：

@model DXWebApplication1.Models.MyModel
@Html.DevExpress().Splitter(settings => {
    settings.Name = "InnerContentSplitter";
    settings.AllowResize = true;
    settings.Orientation = System.Web.UI.WebControls.Orientation.Vertical;
    settings.FullscreenMode = false;
    settings.SeparatorVisible = true;
    settings.Styles.Pane.Border.BorderWidth = System.Web.UI.WebControls.Unit.Pixel(0);
    settings.Styles.Pane.Paddings.Padding = System.Web.UI.WebControls.Unit.Pixel(0);
    settings.Panes.Add(pane => {
        pane.Name = "InnerContentHeader";
        pane.PaneStyle.BorderBottom.BorderWidth = System.Web.UI.WebControls.Unit.Pixel(1);
        pane.PaneStyle.CssClass = "headerPane";
        pane.SetContent("<h2>Header of View</h2>");
        });
    settings.Panes.Add(pane =>
    {
        pane.Name = "InnerContent01";
        pane.PaneStyle.CssClass = "mainContentPane01";
        pane.PaneStyle.BackColor = System.Drawing.Color.White;
        pane.Size = System.Web.UI.WebControls.Unit.Pixel(150);
        pane.SetContent(() =>
        {
            Html.DevExpress().Splitter(splitSettings =>
            {
                splitSettings.Name = "Splitter001";
                splitSettings.AllowResize = false;
                splitSettings.Orientation = System.Web.UI.WebControls.Orientation.Horizontal;
                splitSettings.FullscreenMode = false;
                splitSettings.SeparatorVisible = false;
                splitSettings.Styles.Pane.Border.BorderWidth = System.Web.UI.WebControls.Unit.Pixel(0);
                splitSettings.Styles.Pane.Paddings.Padding = System.Web.UI.WebControls.Unit.Pixel(0);
                splitSettings.Panes.Add(innerpane =>
                {
                    innerpane.AutoWidth = true;
                    innerpane.Name = "Content001";
                    innerpane.PaneStyle.BackColor = System.Drawing.Color.White;
                    innerpane.PaneStyle.Paddings.Padding = System.Web.UI.WebControls.Unit.Pixel(10);
                    innerpane.PaneStyle.Paddings.PaddingTop = System.Web.UI.WebControls.Unit.Pixel(20);
                    innerpane.SetContent(() => Html.RenderPartial("ComboBoxPartialView", Model));
                });
                splitSettings.Panes.Add(innerpane =>
                {
                    innerpane.Name = "Content002";
                    innerpane.PaneStyle.BackColor = System.Drawing.Color.White;
                    innerpane.SetContent(() => Html.RenderPartial("GridViewPartialView", Model));
                });                
            }).Render();
        });
    });
}).GetHtml()

网格部分视图：

@Html.DevExpress().GridView(
    settings =>
    {
        settings.Name = "GridView";
        settings.CallbackRouteValues = new { Controller = "Home", Action = "GridViewPartialView" };
        settings.Width = System.Web.UI.WebControls.Unit.Percentage(100);
        settings.SettingsPager.Visible = false;
        settings.SettingsPager.PageSize = 20;
        settings.Settings.VerticalScrollBarMode = ScrollBarMode.Visible;
        settings.Settings.VerticalScrollableHeight = 350;
        settings.Settings.VerticalScrollBarStyle = GridViewVerticalScrollBarStyle.Virtual;
        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);
        // DXCOMMENT: Configure grid's columns in accordance with data model fields
        settings.Columns.Add("Id");
        settings.Columns.Add("Name");
        settings.Columns.Add("RoleId");
    }).Bind(Model.Persones()).GetHtml()

组合框部分视图

@Html.DevExpress().ComboBox(cmbSettings =>
{
    cmbSettings.Name = "RoleId";
    cmbSettings.Width = System.Web.UI.WebControls.Unit.Pixel(200);
    cmbSettings.Properties.ValueField = "Id";
    cmbSettings.Properties.TextField = "RoleName";
    cmbSettings.Properties.ValueType = typeof(int);
    cmbSettings.SelectedIndex = 0;
    cmbSettings.Properties.IncrementalFilteringMode = IncrementalFilteringMode.Contains;
    cmbSettings.Properties.ClientSideEvents.SelectedIndexChanged =
        "function(s, e) {GridView.PerformCallback();}";
}).BindList(Model.Roles()).Bind(Model.SelectedRoleId).GetHtml()

控制器：

public class HomeController : Controller
{
    public ActionResult Index([ModelBinder(typeof(DevExpressEditorsBinder))]MyModel mo)
    {
        return View(mo);    
    }
    [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult GridViewPartialView([ModelBinder(typeof(DevExpressEditorsBinder))]MyModel mo) 
    {
        return PartialView("GridViewPartialView", mo);
    }
}

所以我期待在我的控制器中更新模型，但每次我得到的模型都没有实际数据。我在模型使用中错过了什么？实现我的用例的最佳方式是什么？

Answer 1

我与DevExpress的人们讨论了这个问题，他们帮助我解决了这个问题。

解决方案就在这里