asp.net-mvc-3 - 在表单提交后和重定向前添加加载屏幕

Question

我有一个带有 MVC3 和 Jquerymobile 的移动应用程序。在表单提交（使用 ajax 功能）时，我想在提交和重定向时显示加载图标（ajax-loader.png）。谢谢！

我的ajax函数：

 $("#add").click(function () {
    $.validator.unobtrusive.parse($('form'));  //added
    if ($("form").valid()) {
        var IDs = new Array($("#SelectedProduct").val(), $("#SelectedAccount").val(), $("#SelectedProject").val(), $("#SelectedTask").val(), $("#date").val(), $("#duration").val());
        $.ajax({
            url: '@Url.Action("SaveLine", "AddLine")',
            type: 'post',
            data: { ids: IDs },
            dataType: 'json',
            traditional: true,
            success: function (data) {
                if (data.success == true) {
                    $("#ajaxPostMessage").html(data.Success);
                    $("#ajaxPostMessage").addClass('ajaxMessage').slideDown(function () {
                        window.location.href = '@Url.Action("Index", "AddLine")';
                    }).delay(1800)
                }
                else {
                    $("#ajaxPostMessage").html(data.Error);
                    $("#ajaxPostMessage").addClass('ajaxMessage');
                    $("#ajaxPostMessage").show();
                }
            }
        });
    }
    return false;
});

Answer 1

尝试（未经测试）：

$("#add").click(function () {
    $.validator.unobtrusive.parse($('form'));  //added
    if ($("form").valid()) {
        var IDs = new Array($("#SelectedProduct").val(), $("#SelectedAccount").val(), $("#SelectedProject").val(), $("#SelectedTask").val(), $("#date").val(), $("#duration").val());
        $.ajax({
            url: '@Url.Action("SaveLine", "AddLine")',
            type: 'post',
            data: { ids: IDs },
            dataType: 'json',
            traditional: true,
            beforeSend: function(jqXHR, settings){
                $.mobile.showPageLoadingMsg();
            },
            success: function (data) {
                $.mobile.hidePageLoadingMsg();
                if (data.success == true) {
                    $("#ajaxPostMessage").html(data.Success);
                    $("#ajaxPostMessage").addClass('ajaxMessage').slideDown(function () {
                        window.location.href = '@Url.Action("Index", "AddLine")';
                    }).delay(1800)
                }
                else {
                    $("#ajaxPostMessage").html(data.Error);
                    $("#ajaxPostMessage").addClass('ajaxMessage');
                    $("#ajaxPostMessage").show();
                }
            }
        });
    }
    return false;
});

资料来源：

http://forum.jquery.com/topic/how-to-show-hide-loading-spinner-in-jquery-mobile http://api.jquery.com/jQuery.ajax/