javascript - 使用 ASP.Net MVC 的回调在弹出窗口中加载选定的 GridView 项目

Question

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

我在部分 View 中有一个 GridView，它是通过 Action @Html.Action('MessageGridView') 加载的。这没有问题，并且数据可以通过索引和返回的模型正常加载。

@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()

如果我将值设置为静态，它就会起作用，因此我距离实现此功能仅一步之遥。我研究的是，我可以使用选择更改事件从 javascript 中的 GridView 获取值。

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

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

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 和 Controller 代码中:

查看

<!-- 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(部分 View )

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

    // other stuff

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

弹出窗口(部分 View )

@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()

Controller

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 文档)