Jquery ajaxStart and blockUI

Question

使用Asp.Net MVC 3（Razor）时，我正在尝试添加blockUI插件以在调用@Ajax.ActionLink的操作时显示加载指示器。如果我使用默认调用，则可以正常工作。

$(document).ajaxStart($.blockUI);

但是，当我尝试使用以下方式自定义消息时，页面加载后UI被阻塞了。有人能给出正确的格式建议吗？

$(document).ajaxStart($.blockUI({ 
     message: '<h1><img src="busy.gif" /> Just a moment...</h1>' 
}));

- user918064

---

页面加载时，您是否自动调用任何Ajax方法？ - Emil Stenström

不，页面加载时没有调用任何内容。 - user918064

Answer 1

在第二段代码中，您实际上正在执行blockUI方法。

将其包装在匿名函数中：

$(document).ajaxStart(function() {
     $.blockUI({ 
         message: '<h1><img src="busy.gif" /> Just a moment...</h1>' 
     });
});

---

在jsfiddle上有一个工作示例。

- Didier Ghys

---

谢谢，我尝试了一下，但是出现了一个错误：“错误：对象不支持属性或方法'blockUI'”。 - user918064

我在jsfiddle上进行了一个快速测试（请参见答案中的链接 - 这是一个虚拟的ajax请求，但它显示了blockUI自定义消息）。对于您的错误，可能是您没有正确地包含blockUI文件，尽管使用默认设置工作很奇怪... - Didier Ghys

伙计们，这个帮了大忙（类似的答案也有帮助）。错误的问题在于页面中Jquery被注册了两次，第二次是由Telerik ScriptManager引起的，这一点并不明显。 - user918064

现在有意义了，因为jquery的第二个包含会擦除之前注册blockUI插件的jQuery/$变量。很高兴你找到了解决方案！ - Didier Ghys

Answer 2

将blockui的内容封装在一个函数中：

$(document).ajaxStart(function (){
    $.blockUI({ 
       message: '<h1><img src="busy.gif" /> Just a moment...</h1>' 
    });
});

- Mbrevda

---

谢谢，我尝试了那个方法，但是它报错了：“错误：对象不支持属性或方法 'blockUI'”。 - user918064

Answer 3

引入jQuery JS文件和blockUI JS文件，然后执行代码

$(document).ajaxStart(function (){
    $.blockUI({ 
       message: '<h1><img src="busy.gif" /> Just a moment...</h1>' 
    });
});

- Abhishek

---

嗨，已包含Jquery和Jblock。我已经测试过了，使用默认方法$(document).ajaxStart($.blockUI);可以正常工作。但是当我尝试使用建议的代码时，调试时出现错误“Error: Object doesn't support property or method 'blockUI'”。 - user918064