加载时将“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

我不知道这是否是实际的最佳解决方案，但它有点工作 - 虽然有点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()"