加载时将“UpdateTargetId”替换为“LoadingElementId”？答案

【问题标题】：Replace "UpdateTargetId" with "LoadingElementId" while loading?加载时将“UpdateTargetId”替换为“LoadingElementId”？
【发布时间】：2016-10-17 16:42:15
【问题描述】：

所以目前，我正在尝试用 ajax 替换刷新的部分视图。我正在尝试用加载器替换它

下面的图片应该解释我想要做什么。

当按钮被点击时，它应该渲染加载器（蓝色矩形）代替局部视图（红色矩形和它正上方的文本，我也忘了把文本放在那里）但是，如你所见- 它分别呈现它们。

以下是按钮的调用方式：

 @{using (Ajax.BeginForm("_LogOut", "User",
                new AjaxOptions
                {
                    UpdateTargetId = "userInformation",
                    LoadingElementId = "loader-container",
                    InsertionMode = InsertionMode.Replace,
                    HttpMethod = "GET"
                }))
            {
                <button type="submit" class="btn btn-danger btn-raised text-center">
                    <i class="material-icons">refresh</i> 
                    Refresh Data
                </button>
            }
        }

如果您想更深入地了解这个局部视图是如何构建的：http://pastebin.com/1mMfpQyB

该按钮会正确刷新数据 - 所以它可以工作！唯一的问题是（我假设的）“UpdateTargetId”和“LoadingElementId”交互。

【问题讨论】：

标签： asp.net-mvc-5 asp.net-ajax

【解决方案1】：

我不知道这是否是实际的最佳解决方案，但它确实有效 - 虽然有点 hacky：

            @{
            using (Ajax.BeginForm("_LogOut", "User",
                new AjaxOptions
                {
                    UpdateTargetId = "userInformation",
                    LoadingElementId = "loadercontainer",
                    InsertionMode = InsertionMode.Replace,
                    HttpMethod = "GET",
                    OnBegin = "$('#userInformation').slideUp(); $('#loadercontainer').slideDown()",
                    OnComplete = "$('#userInformation').slideDown(); $('#loadercontainer').slideUp()"
                }))
            {
                <button type="submit" class="btn btn-danger btn-raised text-center">
                    <i class="material-icons">refresh</i> 
                    Refresh Data
                </button>
            }
        }

总而言之，我委托 ajaxoptions onbegin 和 oncomplete 来调用一些 jquery：

OnBegin = "$('#userInformation').slideUp(); $('#loadercontainer').slideDown()",
OnComplete = "$('#userInformation').slideDown(); $('#loadercontainer').slideUp()"

【讨论】：