我正在尝试在链接按钮上使用此代码,但因为它希望使用表单它不起作用。我希望在单击链接按钮时显示叠加div,因此用户可以了解函数的处理时间。我想在http://www.aspsnippets.com/demos/289/
上按照此示例进行操作我认为问题在于jquery,因为当我只想在按钮点击时显示时,它需要提交表单。请记住,我是在用户控件中执行此操作,因此也许它与页面生命周期的内容有关,但由于我的链接按钮不是很好,它在主页面中,这可能不是问题。
$('form').live("submit", function () {
ShowProgress();
});
这是我的脚本代码
<script type="text/javascript">
function ShowProgress() {
setTimeout(function () {
var modal = $('<div />');
modal.addClass("modal");
$('body').append(modal);
var loading = $(".loading");
loading.show();
var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
loading.css({ top: top, left: left });
}, 200);
}
$('form').live("submit", function () {
ShowProgress();
});
</script>
Syles
<style type="text/css">
.modal
{
position: fixed;
top: 0;
left: 0;
background-color: black;
z-index: 99;
opacity: 0.8;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
min-height: 100%;
width: 100%;
}
.loading
{
font-family: Arial;
font-size: 10pt;
border: 5px solid #67CFF5;
width: 200px;
height: 100px;
display: none;
position: fixed;
background-color: White;
z-index: 999;
}
</style>
我的Html和按钮点击
<div class="loading" align="center">
Loading. Please wait.<br />
<br />
<img src="~/Images/slateloading.gif" alt="" />
</div>
<asp:LinkButton ID="lnkExport" CausesValidation="false" style="margin-top: 5px;" on Height="60" OnClick="lnkExport_Click" ClientIDMode="Static" runat="server" Text=" <i class='glyphicon glyphicon-open-file' ></i><br/>Submit Case" CssClass="btn btn-info btn-dark-theme-negative pull-right" />
然后,在page_load
我有这个。我需要进度窗口来显示点击lnkexport
按钮的时间。
if (!IsPostBack)
{
string script = "$(document).ready(function () { $('[id*=lnkExport]').click(); });";
Page.ClientScript.RegisterStartupScript(this.GetType(), "load", script, true);
}
答案 0 :(得分:1)
在这种情况下,您的表单不会提交给服务器。 您应该使用提交按钮而不是链接按钮。
检查你的jquery版本,在jquery V1.9中删除了jQuery .live函数。因此,如果您使用的是最新版本,则必须使用.on功能。
我建议使用更新面板更新进度模板&#39;添加加载面板。
<asp:UpdatePanel runat="server" ID="mainUpdatePanel">
<ContentTemplate>
<!-- HTML CODE -->
<asp:UpdateProgress ID="UpdateProgress" runat="server" AssociatedUpdatePanelID="mainUpdatePanel">
<ProgressTemplate>
<!-- LOADING SPINNER USER CONTROL -->
<uc:Uc_Waiting runat="server" ID="Uc_Waiting"/>
</ProgressTemplate>
</asp:UpdateProgress>
</ContentTemplate>