加载时将 "UpdateTargetId" 替换为 "LoadingElementId"？

Question

所以目前，我正在尝试用 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" 交互。

Answer 1

我不知道这是否是实际的最佳解决方案，但它确实有效 - 尽管有点老套：

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

加载时将 "UpdateTargetId" 替换为 "LoadingElementId"？

Replace "UpdateTargetId" with "LoadingElementId" while loading?

asp.net-ajax

asp.net-mvc-5