Question

我有一个显示树视图的devexpress弹出控件，我想要发生的是：

1：用户点击一行

2：Clicked Row的UserLogin通过JQuery发送到控制器，然后出现Popup

3：Controller获取权限详细信息并将其发送到树视图

4：弹出更新以显示树视图＆lt; ====这就是问题所在

有没有办法通过JQuery / Ajax更新弹出窗口，以便显示新数据？ UserRightsTreeListPartial控制器也应该更新自己还是弹出窗口？或者甚至在Popup部分我应该使用@Html.RenderAction？

感谢您的帮助，如果您还有其他需要，请告诉我。

_UserTreePopupControl

@using (Html.BeginForm())
{
    <div class="vertComponentContainer">
        @Html.DevExpress().PopupControl(settings =>
   {
       settings.Name = "UserTreePopupControl";
       settings.PopupElementID = "UserGridView_DXDataRow0";
       settings.Height = 400;
       settings.Width = 400;
       settings.AllowResize = true;
       settings.ShowHeader = true;
       settings.ShowOnPageLoad = false;
       settings.AllowDragging = true;
       settings.DragElement = DragElement.Header;
       settings.CloseAction = CloseAction.OuterMouseClick;
       settings.ShowCloseButton = false;
       settings.CloseOnEscape = true;
       settings.Modal = false;
       settings.HeaderText = "Rights List";
       settings.ScrollBars = System.Web.UI.WebControls.ScrollBars.Vertical;
       settings.EnableHotTrack = true;


       settings.SetContent(() =>
       {
           Html.RenderAction("UserRightsTreeListPartial"); <===== THIS CALLS TREE LIST INTO POPUP
       });
   }).GetHtml()
    </div>

}

_UserRightsTreeListPartial

{
    var treeList = Html.DevExpress().TreeList(settings => {
        settings.Name = "UserRightsTreeList";
        settings.CallbackRouteValues = new { Controller = "Home", Action = "UserRightsTreeListPartial" };
        settings.SettingsBehavior.AutoExpandAllNodes = true;
        settings.Images.CollapsedButton.Width = 0;
        settings.Images.CollapsedButton.Height = 0;
        settings.Images.ExpandedButton.Width = 0;
        settings.Images.ExpandedButton.Height = 0;

        settings.KeyFieldName = "Item1";
        settings.ParentFieldName = "Item2";
        //settings.SettingsSelection.Recursive = true;


        settings.Columns.Add(
            column =>
            {
                column.FieldName = "Item1";
                column.Visible = false;
                column.ReadOnly = true;
            }
        );
        settings.Columns.Add(
    column =>
    {
        column.FieldName = "Item2";
        column.SortIndex = 0;
        column.SortOrder = DevExpress.Data.ColumnSortOrder.Ascending;
        column.Visible = false;
        column.ReadOnly = true;
    }
);
        settings.Columns.Add(
    column =>
    {
        column.FieldName = "Item3";
        column.Name = "Rights";
        column.ReadOnly = true;

    }
);

        settings.SettingsPager.Visible = true;
        settings.SettingsPager.Mode = TreeListPagerMode.ShowAllNodes;
        settings.SettingsSelection.Enabled = false;
    });
}
@treeList.Bind(Model).GetHtml()

家庭控制器

[ValidateInput(false)]
    public ActionResult UserRightsTreeListPartial(string userLogin)
    {


        if (userLogin != null)
        {
            var userlogins = userLogin;
            Manager manager = new Manager();
            var userRightsDetails = manager.GetUserRightsData(userlogins);
            ViewData["UserLogin"] = userlogins;
            var rights = (userRightsDetails.RightIdList.Select(r => new { id = r, text = r }));
            var RightNames = manager.GetAllRightsRows();
            List<Tuple<int, int, string, int>> rightsnamelist = new List<Tuple<int, int, string, int>>();
            foreach (var u in RightNames)
            {
                foreach (var i in rights)
                {
                    if (i.id == u.Id)
                    {
                        var RightsID = u.Id;
                        var ParentsID = u.ParentId;
                        var RightsNames = u.Name;
                        var RightsColor = u.TypeColor;
                        rightsnamelist.Add(new Tuple<int, int, string, int>(RightsID, ParentsID, RightsNames, RightsColor));

                    }
                }

            }

            return PartialView("_UserRightsTreeListPartial", rightsnamelist);
        }

        return View("_UserRightsTreeListPartial");
    }

JQuery的

<script type="text/javascript">
    $(".dxgv").click(function () {
        var $row = $(this).closest("tr");    // Find the row
        var $tds = $row.find("td:nth-child(1)");
        $.each($tds, function () {
            var insertText = $(this).text();

            $.ajax({
                url: '@Url.Action("UserRightsTreeListPartial", "Home")',
                data: { 'userLogin': insertText },
                type: "post",
                cache: false,
                success: function(rightsnamelist) { $(UserTreePopupControl).html(rightsnamelist); }
            });
        });
    });
</script>

表格行

<tr id="UserGridView_DXDataRow0" class="dxgvDataRow">
        <td class="dxgvCommandColumn dxgv dx-ac"><a class="dxbButton dxgvCommandColumnItem dxgv__cci dxbButtonSys" data-args="[['CustomButton','Rights Popup',0],1]" id="UserGridView_DXCBtn0" href="javascript:;" style="font-size: 0pt;"><img title="Rights Popup" class="dx-vam" src="/images/icon_popup.png" alt="Rights Popup" id="UserGridView_DXCBtn0Img"></a></td>
        <td class="dxgv" style="border-right-width:0px;">//USERNAME</td>
</tr>

Answer 1

您尚未定义名为UserTreePopupControl的变量，因此您的成功回调 - $(UserTreePopupControl).html(..) - 未更新正确的元素。此外，您的脚本不必要地找到元素parent <tr>元素，然后找到它的第二个<td>元素，它实际上是您单击的元素（即$(this)），并且因为它是单个元素，不需要$.each()循环。

从聊天讨论中，您要更新的元素为id="UserRightsTreeList_D"，因此正确的脚本为

<script type="text/javascript">
  $(".dxgv").click(function () {
    var insertText = $(this).text();
    $.ajax({
      url: '@Url.Action("UserRightsTreeListPartial", "Home")',
      data: { 'userLogin': insertText },
      type: "post",
      cache: false,
      success: function(data) {
        $('#UserRightsTreeList_D').html(data);
      }
    });
  });
</script>

在弹出控件中动态显示数据

1 个答案: