ASP.NET MVC 3 Jquery 模态弹出窗口 - 显示加载图标

Question

各位，

我有 ASP.NET MVC 3 应用程序，并且下面有以下 JQuery 脚本来显示模式弹出窗口。以下脚本能够显示模式对话框。但是，我想在模式对话框打开时加载加载图标。你知道我该怎么做吗？

<%= Html.ActionLink("Details", "ProductShipping", "OnlineStore", new { ProductGUID = Html.Encode(Model.GUID) }, new { @class = "EditShippinglink", title = "Edit Product Shipping", data_dialog_id = "EditProductShipping", data_dialog_title = "Shipping Method" })%>

JQuery

$(".EditShippinglink").live("click", function (e) {
            $.ajaxSetup({ cache: false });
            e.preventDefault();
            var $loading = $('<img src="/Content/ajax-loader.gif" alt="loading" class="ui-loading-icon">');
            $("<div></div>")
                    .addClass("dialog")
                    .attr("id", $(this)
                    .attr("data-dialog-id"))
                    .appendTo("body")
                    .dialog({
                        title: $(this).attr("data-dialog-title"),
                        close: function () { $(this).remove() },
                        width: 900,
                        modal: true,
                        minHeight: 500,
                        show: 'fade',
                        hide: 'fade',
                        resizable: 'false'
                    })
                    .load(this.href);
        });

Answer 1

将模式对话框的初始 HTML 设置为您想要显示的内容，直到 ajax 请求完成并更改弹出窗口的内容。

不要从一个空的 div 开始 $('

')，而是使用加载了您想要在加载时显示的 html 的 div 。

@Html.ActionLink("Item Details", "Details", "Home", new { id = 1 }, new { @class = "EditShippinglink", title = "Edit Product Shipping", data_dialog_title = "Shipping Method" })
<div id="my-dialog" style="display:none;">
    <div id="my-dialog-content"></div>
    <div id="my-dialog-progress" style="display:none;"><img src="@Url.Content("~/Content/ajax-loader.gif")" alt="loading" class="ui-loading-icon"></div>
</div>

<script type="text/javascript">
    var theDialog = $('#my-dialog').dialog({
        autoOpen: false,
        modal: true,
        closeOnEscape: false,
        width: 900,
        modal: true,
        minHeight: 500,
        show: 'fade',
        hide: 'fade',
        resizable: 'false'
    });
    var myDialogProgress = $('#my-dialog-progress');
    var myDialogContent = $('#my-dialog-content');
    $(".EditShippinglink").on("click", function (e) {
        $.ajaxSetup({ cache: false });
        e.preventDefault();

        myDialogProgress.show();
        theDialog.dialog('open');
        theDialog.dialog('option', 'title', $(this).attr("data-dialog-title"));

        //clear content before showing again
        myDialogContent.html('');

        $.ajax({
            type: 'get',
            url: this.href,
            dataType: 'html',
            error: function (jqXHR, textStatus, errorThrown) {
                //do something about the error
            },
            success: function (data) {
                //hide the progress spinner and show the html
                myDialogProgress.hide();
                myDialogContent.html(data);
            },
            complete: function () {
                //do some other completion maintenance
            }
        });
    });

</script>

然后，当显示对话框但仍在等待加载完成时，将显示加载 gif。一旦操作完成，加载将覆盖动画加载gif html。