使用带有 ASP.Net MVC 的 CallBacks 在弹出窗口中加载选定的 GridView 项

Question

我对 ASP.Net 和客户端与服务器之间通信的概念还比较陌生。我正在使用 DevExpress 工具，但我相信这个问题更多的是对这个概念的误解。

我在通过 Action @Html.Action('MessageGridView') 加载的局部视图中有一个 GridView。这没有问题，并且可以使用索引和返回的模型很好地加载数据。

@Html.DevExpress().GridView(settings =>
{
    settings.Width = System.Web.UI.WebControls.Unit.Percentage(100);
    settings.Name = "preparedMessagesGrid";
    settings.CallbackRouteValues = new { Controller = "Messages", Action = "MessagesGridView" };
    settings.KeyFieldName = "Id";
    settings.SettingsBehavior.AllowSelectByRowClick = true;
    settings.SettingsBehavior.AllowSelectSingleRowOnly = true;
    settings.ClientSideEvents.Init = "GridViewInit";
    settings.ClientSideEvents.SelectionChanged = "OnSelectionChanged";
    settings.ClientSideEvents.BeginCallback = "OnBeginCallback";
    settings.SettingsBehavior.AllowEllipsisInText = true;
    settings.PreRender = settings.Init = (sender, e) =>
    {
        MVCxGridView gridView = sender as MVCxGridView;
        gridView.Selection.SelectAll();
    };
    settings.Columns.Add("Name");
    settings.Columns.Add("Description");
}).Bind(Model.preparedMessages).GetHtml()

我想要实现的是当用户选择我希望在单击时将数据加载到弹出控件中的行时。有没有办法为弹出控件回调动态设置参数？

@Html.DevExpress().PopupControl(settings =>
{
    settings.Name = "pcModalMode";
    settings.Width = 100;
    settings.AllowDragging = true;
    settings.CloseAction = CloseAction.CloseButton;
    settings.CloseOnEscape = true;
    settings.PopupAnimationType = AnimationType.None;
    settings.HeaderText = "Login";
    settings.Modal = true;
    settings.PopupHorizontalAlign = PopupHorizontalAlign.WindowCenter;
    settings.PopupVerticalAlign = PopupVerticalAlign.WindowCenter;
    settings.CallbackRouteValues = new { Controller = "Messages", Action = "Load", new { id = THIS NEEDS TO BE SELECTED ID VALUE} };
    settings.LoadContentViaCallback = LoadContentViaCallback.OnFirstShow;

}).GetHtml()

如果我将值设置为静态，它就可以工作，所以我离让它工作只有一步之遥。我研究的是，我可以使用 selection changed 事件从 javascript 中的 GridView 获取值。

function OnSelectionChanged(s, e) {   
    s.GetSelectedFieldValues("Id", GetSelectedFieldValueCallback);
}

然后我可以检索这个值，但是我可以将它设置为我的弹出控件还是我误解了它相对较新，并且可能我可以在执行 ViewGrid 回调时执行此服务器端，然后将其设置为服务器端某种形式的会议？

Answer 1

您只需一步即可使用此功能获取当前选定的网格值：

function OnSelectionChanged(s, e) { 
    s.GetSelectedFieldValues('Id', GetSelectedFieldValueCallback);
}

您需要做的是将GetSelectedFieldValueCallback 方法声明为这样（我从测试中得到selectedValue 包含具有单个值的数组以用于单个网格行选择，使用零索引来分配值）：

var id; // a global variable set to hold selected row key value from grid

function GetSelectedFieldValueCallback(selectedValue) {
    if (selectedValue.length == 0) 
        return;

    id = parseInt(selectedValue[0]);

    pcModalMode.PerformCallback();
}

然后在PopupControl 帮助器上设置BeginCallback，如下所示，注意对于DevExpress HTML 帮助器，您可以在客户端使用customArgs 来传递操作方法参数，而不是使用CallbackRouteValues 和id 参数：

@Html.DevExpress().PopupControl(settings =>
{
    settings.Name = "pcModalMode";

    // other stuff

    settings.CallbackRouteValues = new { Controller = "Messages", Action = "Load" };
    settings.ClientSideEvents.BeginCallback = "OnPopUpBeginCallback";
    settings.ClientSideEvents.EndCallback = "OnPopUpEndCallback";

    // other stuff
}).GetHtml()

// JS function for popup callback
function OnPopUpBeginCallback(s, e) {
    e.customArgs["id"] = id; // this sends 'id' as action method parameter to `Load` action
}

// Optional end callback
function OnPopUpEndCallback(s, e) {
    if (!pcModalMode.IsVisible())
        pcModalMode.Show();
}

最后，让我们将它们放在视图和控制器代码中：

查看

<!-- View page -->
<script type="text/javascript">
    var id;

    function OnSelectionChanged(s, e) { 
        s.GetSelectedFieldValues('Id', GetSelectedFieldValueCallback);
    }

    function GetSelectedFieldValueCallback(selectedValue) {
        if (selectedValue.length == 0) 
           return;

        id = parseInt(selectedValue[0]);

        pcModalMode.PerformCallback();
    }

    function OnPopUpBeginCallback(s, e) {
        e.customArgs["id"] = id;
    }

    function OnPopUpEndCallback(s, e) {
        if (!pcModalMode.IsVisible())
            pcModalMode.Show();
    }
</script>

GridView（局部视图）

@Html.DevExpress().GridView(settings =>
{
    settings.Name = "preparedMessagesGrid";

    // other stuff

    settings.ClientSideEvents.SelectionChanged = "OnSelectionChanged";
}).Bind(Model.preparedMessages).GetHtml()

弹出窗口（部分视图）

@Html.DevExpress().PopupControl(settings =>
{
    settings.Name = "pcModalMode";

    // other stuff

    settings.CallbackRouteValues = new { Controller = "Messages", Action = "Load" };
    settings.ClientSideEvents.BeginCallback = "OnPopUpBeginCallback";
    settings.ClientSideEvents.EndCallback = "OnPopUpEndCallback";

    // other stuff
}).GetHtml()

控制器

public class Messages : Controller 
{
     public ActionResult MessagesGridView()
     {
         // grid view populating data code lines here
         return PartialView("_GridView", data);
     }

     public ActionResult Load(int id)
     {
         // code lines to find ID here
         return PartialView("_ModalPopup", model);
     }
}

参考资料：

(1)Display GridView Row Details in PopupControl Window

(2)How to display detail data within a popup window (MVC)

(3)ASPxClientGridView.GetSelectedFieldValues（DevExpress 文档）

(4) MVCxClientBeginCallbackEventArgs.customArgs（DevExpress 文档）