您的位置:首页 > 其它

用Ajax 1.0制作一个按钮提交后UpdatePanel动画

2007-07-11 14:40 579 查看
如何制作使用Ajax 1.0一个按钮提交后台的UpdatePanel动画呢?
这里我制使用了Ajax 1.0制作了当一个LinkButton点击提交后UpdatePanel闪出一个边框的动画.

步骤如下:
1)拖放一个LinkButton控件和一个TextBox控件到页面
<asp:LinkButton ID="ExtraShow1" Text="1234567" runat="server" OnClick="ExtraShow_Click" />
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>

2)添加一个LinkButton的Click事件,该事件用来将LinkButton中的Text值付给TextBox
protected void ExtraShow_Click(object sender, EventArgs e)
{
TextBox2.Text = ((LinkButton)sender).Text;
}

3)拖放一个UpdatePanel控件,将LinkButton和TextBox控件放入其中.并设置UpdateMode为Conditional.
增加LinkButton的Trigger触发一个AsyncPostBackTrigger
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ExtraShow1" />
</Triggers>
<ContentTemplate>
<fieldset>
<asp:LinkButton ID="ExtraShow1" Text="1234567" runat="server" OnClick="ExtraShow_Click" />
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
4)写JavaScript动画方法
<script type="text/javascript">
Type.registerNamespace("ScriptLibrary");//注册一个ScriptLibrary的命名空间

//制作一个BorderAnimation边框动画(如果写过wpf的动画,那么在这里我们会发现这句话很眼熟).
ScriptLibrary.BorderAnimation =
function(color, duration) {
this._color = color;
this._duration = duration;
}

//制作一个边框
ScriptLibrary.BorderAnimation.prototype = {
animatePanel: function(panelElement) {
var s = panelElement.style;
s.borderWidth = '1px';
s.borderColor = this._color;
s.borderStyle = 'solid';
window.setTimeout(
function() {{ s.borderWidth = 0; }},
this._duration
);
}
}

//在动画中注册刚才我们制作的
ScriptLibrary.BorderAnimation.registerClass('ScriptLibrary.BorderAnimation', null);

//定义一个panelUpdatedAnimation用来存储我们做好的边框动画,我们设置成蓝色
var panelUpdatedAnimation = new ScriptLibrary.BorderAnimation('blue', 1000);
var postbackElement;

Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest);
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);

//我们在BeginRequest事件中获取到页面所有的PostBack元素
function beginRequest(sender, args) {
postbackElement = args.get_postBackElement();
}

function pageLoaded(sender, args) {
//在窗体加载事件中我们获取到UpdatePanels
var updatedPanels = args.get_panelsUpdated();
//判断如果没有任何元素返回
if (typeof(postbackElement) === "undefined") {
return;
} //否则查找里面的id中包含extrashow字符的控件,将动画注册到这些控件上
else if (postbackElement.id.toLowerCase().indexOf('ExtraShow1') > -1)
{
for (i=0; i < updatedPanels.length; i++) {
//设置当触发PostBack后在UpdatePanel上调用动画.
panelUpdatedAnimation.animatePanel(updatedPanels[i]);
}
}

}
</script>
其中js部分可能写的有点不太清楚,大虾们看了请指点下.
还 有就是我尝试了添加一个Calender控件使用同样的方法,始终不能加载动画进去,看了下源代码,发现Calender控件生成后是个Table,只有 Table拥有ID.每一个数字中不拥有ID.非常郁闷.大虾们如果知道如何将动画事件加载上去,请教教小弟我~~~~~~~
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: