Asp.net mvc ASP.NET MVC 3 Jquery模式弹出窗口-显示加载图标

各位

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

$（.EditShippinglink”）.live（“单击”，函数（e）{
$.ajaxSetup（{cache:false}）；
e、 预防默认值（）；
变量$loading=$（''）；
$("")
.addClass（“对话框”）
.attr（“id”，$（此）
.attr（“数据对话框id”））
.附件（“正文”）
.对话({
标题：$（this.attr（“数据对话框标题”），
关闭：函数（）{$（this）.remove（）}，
宽度：900，
莫代尔：是的，
身高：500，
节目：“褪色”，
隐藏：“褪色”，
可调整大小：“false”
})
.load（this.href）；
});

将模式对话框的初始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>

@Html.ActionLink（“项目详细信息”、“详细信息”、“主页”、新的{id=1}、新的{@class=“EditShippinglink”、title=“编辑产品发货”、data\u dialog\u title=“发货方法”}）
var theDialog=$（“#我的对话框”）.dialog({
自动打开：错误，
莫代尔：是的，
closeOnEscape：错误，
宽度：900，
莫代尔：是的，
身高：500，
节目：“褪色”，
隐藏：“褪色”，
可调整大小：“false”
});
var myDialogProgress=$（“#我的对话进度”）；
var myDialogContent=$（“#我的对话框内容”）；
$（.EditShippinglink”）。在（“单击”上，函数（e）{
$.ajaxSetup（{cache:false}）；
e、 预防默认值（）；
myDialogProgress.show（）；
对话框（“打开”）；
dialog.dialog（'option'，'title'，$（this.attr）（'datadialog title'）；
//在再次显示之前清除内容
myDialogContent.html（“”）；
$.ajax({
键入：“get”，
url:this.href，
数据类型：“html”，
错误：函数（jqXHR、textStatus、errorshown）{
//对这个错误做些什么
},
成功：功能（数据）{
//隐藏进度微调器并显示html
myDialogProgress.hide（）；
myDialogContent.html（数据）；
},
完成：函数（）{
//做一些其他的竣工维护
}
});
});

---

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

Zach，如果您能提供一些示例代码，我们将不胜感激。我花了几乎一整天的时间来弄明白这一点。谢谢，我的答案更新了一些信息。稍后我会举一个更具体的例子。此外，jquery的Live方法已被弃用，您应该使用“on（）”@GeekMatter，我添加了一个更完整的示例。在第二次单击链接时，这不会失败吗？你的加载器图像将被上一个弹出窗口的加载删除，不是吗？是的。如果这是您想要的功能，您将需要一个更健壮的流程。请稍等，我会更新答案。