ASP.NET MVC 3 Jquery Modal Popup - значок загрузки дисплея

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, $('<div></div>'), используйте div, который загружен с HTML, который вы хотите показать во время загрузки.

@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 загрузки. После завершения операции загрузка перезапишет анимированный HTML-код загрузки.