Question

我有以下问题。我在ASP MVC 3中使用AjaxForm，而LoadingElementId仅在第一个请求中正常工作，在下一个请求中不会显示。为什么会发生这种情况？

查看：

@model ICollection<Indirect_eSod.ViewModels.OrderSearchViewModel>
@using Indirect_eSod.Helpers

@{
    ViewBag.Title = "Sales Order Lookup";
}
    <script type="text/javascript">
        $(document).ready(function () {
            $("#id").keyup(function () {
                this.value = this.value.replace(/[^0-9\.]/g, '');
            });
        });
    </script>

@using ( Ajax.BeginForm(new AjaxOptions()
{
    HttpMethod = "GET",
    UpdateTargetId = "results",
    LoadingElementId = "ajaxSplash",
    InsertionMode = InsertionMode.Replace
}))
{   
    <div id="Criteria" style="width: 800px;margin-left:10%">
        <table id="tblSearchCriteria" class="FunnyRedLine" width="100%">    
            <tr class="SODRow">
                <td class="SODLabel">
                    eSod ID:
                </td>
                <td colspan="4">
                    @Html.TextBox("id", null, new { @class = "Text"})
                </td>
                <td style="width: 40%"></td>
            </tr>

            <tr class="SODRow">
                <td class="SODLabel">
                   Start Date:
                </td>
                <td>
                    @Html.TextBox("startDate", null, new { @class = "Text", @readonly="readonly" })
                    @Ajax.Calendar("startDate")
                </td>
                <td class="SODSpacer75px">
                </td>
                <td class="SODLabel">
                    End Date:
                </td>
                <td>
                    @Html.TextBox("endDate", null, new { @class = "Text", @readonly = "readonly" })
                    @Ajax.Calendar("endDate")
                </td>
                <td style="width: 40%"></td>
            </tr>

            <tr class="SODRow">
                <td class="SODLabel">
                    Post Code:
                </td>
                <td colspan="4">
                    @Html.TextBox("postCode", null, new { @class = "Text" })
                </td>
            </tr>

            <tr class="SODRow">
                <td class="SODLabel">
                    Sales Person:
                </td>
                <td colspan="4">
                    @Html.DropDownList("salesPersonId", new SelectList(ViewBag.SalesPeople, "UserId", "FullName"), String.Empty, new { @class = "Text" })
                </td>
                <td style="width: 40%">
                </td>
            </tr>

            <tr class="SODRow">
                <td class="SODLabel">
                   Sales Person Ref:
                </td>
                <td colspan="4">
                    @Html.TextBox("salesPersonRef", null, new { @class = "Text" })
                </td>
            </tr>

            <tr class="SODRow">
                <td class="SODLabel">
                    Order Type:
                </td>
                <td colspan="4">
                    @Html.DropDownList("orderTypeId", new SelectList(ViewBag.OrderTypes, "SodTypeID", "SodTypeDesc"), String.Empty, new { @class = "Text" })
                </td>
            </tr>

            <tr class="SODRow">
                <td class="SODLabel">
                    Serial No:
                </td>    
                <td colspan="4">
                    @Html.TextBox("serialNo", null, new { @class = "Text" })
                </td>
            </tr>

            <tr class="SODRow">
                <td class="SODLabel">
                    Customer PO:
                </td>
                <td colspan="4">
                    @Html.TextBox("customerPO", null, new { @class = "Text" })
                </td>
                <td style="width: 40%">
                    <input id="btnSearch" type="submit" value="Search" class="Text" />
                    @Html.Hidden("hdnNoCache",@DateTime.Now)
                </td> 
            </tr>

        </table>
    </div>

}

<div id="results" />

@Html.Partial("AjaxSplash")

AjaxSplash来源

<div id="ajaxSplash" style="display:none;z-index:60;" class="transparent">
    <table id="Table1" width="100%" style="height: 100%; text-align: center">
        <tr align="center">
            <td align="center" valign="middle">
                <img alt="" src="/Content/Images/ajax-loader2.gif" id="img2" />
            </td>
        </tr>
        <tr align="center">
            <td align="center" style="font-family: Verdana; font-size: 8pt; font-weight: bold;
                color: Navy;">
                Please Wait..
            </td>
        </tr>
    </table>
</div>

控制器

[Ajax(true)]
[CacheControl(HttpCacheability.NoCache),HttpGet]
public ActionResult Index(string id, string startDate, string endDate, string postCode, string salesPersonId, string salesPersonRef,
    string orderTypeId, string serialNo, string customerPO)
{
        var service = new eSodSrv();
        var viewModel = service.GetHeaders(id.ToInt32(), salesPersonId.ToInt32(), orderTypeId.ToInt32(), startDate.ToDate(), endDate.ToDate(), postCode, customerPO, serialNo, salesPersonRef);
        return PartialView("SearchResults",viewModel);
}

修改

我想我已经跟踪了问题所在。在我创建document.getElementById（'ajaxSplash'）之后的AJAX调用之后，我得到null。我仍然不知道为什么会发生这种情况

Answer 1

我实际上不喜欢这样做，而是在我的布局中定义一个div并附加

$('#waitImageDiv')
    .hide()
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    })
;

任何ajax事件都会自动显示此图像。

Answer 2

好的我找到了解决方案，似乎只有当div在AJAX表单内时，LoadingElementId才会起作用，否则div在第一次调用后将以null结尾。

Answer 3

看起来loading元素div必须是ajax表单中的第一个元素，才能使该功能正常工作。

尝试以下方法：

@using ( Ajax.BeginForm(new AjaxOptions()
{
    HttpMethod = "GET",
    UpdateTargetId = "results",
    LoadingElementId = "ajaxSplash",
    InsertionMode = InsertionMode.Replace
}))
{ 
   @Html.Partial("AjaxSplash")
   ....

ASP MVC 3：LoadingElementId元素仅在第一个请求时显示

修改

3 个答案: