如何制作使用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部分可能写的有点不太清楚,大虾们看了请指点下.