您的位置：首页 > Web前端 > JQuery

在 ASP.NET 使用 jQuery BlockUI 插件

2008-04-19 12:37 1981 查看

BlockUI是一个相当不错的jQuery插件，它可以轻易设定页面指定区域显示执行中文字(如Loading...)并锁定该区域限制输入。简单的说，若我们希望网页在执行PostBack或Ajax更新的过程中，希望能限制输入或重复按钮并显示处理中讯息的话，那BlockUI是相当不错的选择，接下来我们就来示范如何在ASP.NET中使用BlockUI。

BlockUI是jQuery的插入，所以要下载jQuery及BlockUI插入的js檔(jquery.js及jquery.blockUI.js)，相关档案可由下列连结下载

jquery.js：http://jquery.com/

jquery.blockUI.js：http://malsup.com/jquery/block/(该网站有BlockUI使用的详细说明)

在VS2005新增一个ASP.NETAJAX网站专案，将jquery.js及jquery.blockUI.js档案复制至网站js数据夹，并在页面中的head区块加入引用

<headrunat="server">

[code]<title>jQueryBlockUIPlugin</title>

<scriptsrc="js/jquery.js"type="text/javascript"></script>

<scriptsrc="js/jquery.blockUI.js"type="text/javascript"></script>

</head>

[/code]

在页面中加入UpdatePanel控件，并在UpdatePanel中置入一个Button，aspx程序代码如下

<formid="form1"runat="server">

[code]<asp:ScriptManagerID="ScriptManager1"runat="server"/>

<div>

<asp:UpdatePanelID="UpdatePanel1"runat="server">

<ContentTemplate>

<asp:ButtonID="Button1"runat="server"OnClick="Button1_Click"Text="Button"/>

</ContentTemplate>

</asp:UpdatePanel>

</div>

</form>

[/code]
在Button的Click事件中撰写等待3秒的程序代码，这是为了呈现BlockUI的效果。

ProtectedSubButton1_Click(ByValsenderAsSystem.Object,ByValeAsSystem.EventArgs)

[code]DimN1AsInteger

ForN1=1To3

System.Threading.Thread.Sleep(1000)

Next

EndSub

使用BlockUI插件相当容易，只要页面submit时呼叫$.blockUI()就会显示BlockUI，而页面载入时呼叫$.unblockUI()隐藏BlockUI。

所以在页面PageLoad事件中撰写如下程序代码。

[/code]

ProtectedSubPage_Load(ByValsenderAsObject,ByValeAsSystem.EventArgs)HandlesMe.Load

[code]DimsScriptAsString

'页面执行Submit时显示blockUI

sScript="$.blockUI();"

ScriptManager.RegisterOnSubmitStatement(Me,Me.GetType(),"blockUI",sScript)

'页面载入时隐藏blockUI

sScript="$.unblockUI();"

ScriptManager.RegisterStartupScript(Me,Me.GetType(),"unblockUI",sScript,True)

EndSub

[/code]

执行结果如下，因为$.blockUI()未指定区域，所以会将整个页面Lock并显示"Pleasewait..."的讯息。当执行结束时，就会呼叫$.unblockUI()来隐藏BlockUI。

若我们希望将显示的文字改为「数据加载中...」并加入等待图示的话，可以在$.blockUI()传入message参数，程序代码修改如下

'页面执行Submit时显示blockUI

[code]sScript="$.blockUI({"&_

"message:'<h3></br><imgsrc=""busy.gif""/>数据加载中...</h3>'"&_

"});"

ScriptManager.RegisterOnSubmitStatement(Me,Me.GetType(),"blockUI",sScript)

[/code]

执行结果如下

.csharpcode,.csharpcodepre
{
font-size:small;
color:black;
font-family:consolas,"CourierNew",courier,monospace;
background-color:#ffffff;
/*white-space:pre;*/
}
.csharpcodepre{margin:0em;}
.csharpcode.rem{color:#008000;}
.csharpcode.kwrd{color:#0000ff;}
.csharpcode.str{color:#006080;}
.csharpcode.op{color:#0000c0;}
.csharpcode.preproc{color:#cc6633;}
.csharpcode.asp{background-color:#ffff00;}
.csharpcode.html{color:#800000;}
.csharpcode.attr{color:#ff0000;}
.csharpcode.alt
{
background-color:#f4f4f4;
width:100%;
margin:0em;
}
.csharpcode.lnum{color:#606060;}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航