MVC AjaxOption没有在正确的位置显示微调器？

Question

我正在尝试在加载另一个局部视图时在局部视图上显示一个微调器。但是，它显示了宣布div的位置。

Index.cshtml

<div id="DivEmailContainer" style="display:block" class="row">
    @Html.Partial("_DisplayContactEmail",Model)
</div>
<div id="spinnerdiv" style="display:none;">         
    <i class="fa fa-spinner fa-pulse fa-3x"></i>
</div>

_DisplayContactEmail.cshtml

<td class="">
     @Ajax.ActionLink(
           "Edit",
           "GetEditEmail",
           new { CommunicationLocation = commemail.Location },
           new AjaxOptions()
           {
                HttpMethod = "Get",
                UpdateTargetId = "DivEmailContainer",
                InsertionMode = InsertionMode.Replace,
                LoadingElementId = "spinnerdiv"
           },
           new { @class = "linkbutton" })

</td>

它假设显示在partialview之上。

可能出现什么问题？

Answer 1

LoadingElementId选项设置为在将Ajax调用发送到服务器期间以及收到响应之前要显示的元素的ID（通常为div或span）。在您的情况下，您使用的div元素的ID位于页面上的局部视图下方。如果您希望微调器显示在局部视图的顶部，只需将div移动到顶部：

<div id="spinnerdiv" style="display:none;">
    <i class="fa fa-spinner fa-pulse fa-3x"></i>
</div>
<div id="DivEmailContainer" style="display:block" class="row">
    @Html.Partial("_DisplayContactEmail",Model)
</div>