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

Question

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

3

大家好，

我有一个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);
        });

- Geek Matter

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Zach Green · Accepted Answer

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

与其从头开始使用一个空的div，$('<div></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。