大數(shù)據(jù)方向?qū)W習(xí)第14章ajax實(shí)例

主要內(nèi)容ASP.NETAJAX實(shí)例解析[]周口師范學(xué)院計(jì)算機(jī)科學(xué)系UpdatePanel控件如何在頁(yè)面中實(shí)現(xiàn)拖放功能如何在頁(yè)面兩邊浮動(dòng)顯示信息如何提供文本框水印效果如何實(shí)現(xiàn)分類折疊效果如何實(shí)現(xiàn)選項(xiàng)卡式快速切換如何實(shí)現(xiàn)鼠標(biāo)指針移入移出顯示動(dòng)畫特效1.UpdatePanel控件-如何以編程的方式在UpdatePanel中實(shí)現(xiàn)局部更新頁(yè)面運(yùn)行效果：1.UpdatePanel控件-如何以編程的方式在UpdatePanel中實(shí)現(xiàn)局部更新頁(yè)面設(shè)計(jì)：RadioButtonList控件DataList控件1.UpdatePanel控件-如何以編程的方式在UpdatePanel中實(shí)現(xiàn)局部更新屬性設(shè)置：RadioButtonListToolTip屬性RepeatDirection屬性O(shè)nSelectedIndexChanged屬性O(shè)nDataBinding屬性UpdatePanelUpdateMode=“Conditional”LabelText='<%#Eval("Key")%>‘Text='<%#Eval(“Value")%>'一般屬性事件屬性1.UpdatePanel控件-如何以編程的方式在UpdatePanel中實(shí)現(xiàn)局部更新代碼分析：ScriptManager1.RegisterAsyncPostBackControl(RadioButtonList1);作用：注冊(cè)要實(shí)現(xiàn)異步更新的控件原因：只有這樣注冊(cè)的控件才能引發(fā)UpdatePanel的異步更新1.注冊(cè)的控件可以實(shí)現(xiàn)對(duì)所有的UpdatePanel控件的異步更新注意：此時(shí)的ScriptManager的EnablePartialRendering屬性應(yīng)設(shè)為true。UpdatePanel的UpdateMode屬性應(yīng)設(shè)為Always。2.注冊(cè)的控件可以實(shí)現(xiàn)針對(duì)特定UpdatePanel控件的異步更新注意：這里的UpdatePanel的屬性要設(shè)為Conditional，注冊(cè)控件的事件代碼的后面加入代碼：UpdatePanel1.Update()。

1.UpdatePanel控件-如何以編程的方式在UpdatePanel中實(shí)現(xiàn)局部更新

protectedSortedListAnsweredQuestions{get{if(ViewState["AnsweredQuestions"]==null){returnnewSortedList();}else{

return(SortedList)ViewState["AnsweredQuestions"];}}set{

ViewState["AnsweredQuestions"]=value;}}1.UpdatePanel控件-如何以編程的方式在UpdatePanel中實(shí)現(xiàn)局部更新protectedvoidRadioButtonListChoices_SelectedIndexChanged(objectsender,EventArgse){SortedListanswers=this.AnsweredQuestions;RadioButtonListr=(RadioButtonList)sender;if(answers.ContainsKey(r.ToolTip)==false){

answers.Add(r.ToolTip,r.SelectedValue);}else{

answers[r.ToolTip]=r.SelectedValue;}this.AnsweredQuestions=answers;DataList1.DataSource=this.AnsweredQuestions;DataList1.DataBind();if(this.AnsweredQuestions.Count==3){ButtonOK.Visible=true;}UpdatePanel1.Update();}1.UpdatePanel控件-如何以編程的方式在UpdatePanel中實(shí)現(xiàn)局部更新protectedvoidButtonOK_Click(objectsender,EventArgse){stringscript="alert('OK');";ScriptManager.RegisterClientScriptBlock(ButtonOK,typeof(Button),"Alert",script,true);}增加頁(yè)面代碼：

if(Page.IsPostBack){strings="";for(inti=0;i<this.AnsweredQuestions.Count;i++){s=s+this.AnsweredQuestions.GetKey(i).ToString()+":"+this.AnsweredQuestions.GetByIndex(i).ToString()+",";}Label4.Text=s;}1.UpdatePanel控件-如何以編程的方式在UpdatePanel中實(shí)現(xiàn)局部更新局部更新頁(yè)面效果對(duì)比：2.如何在頁(yè)面中實(shí)現(xiàn)拖放功能2.如何在頁(yè)面中實(shí)現(xiàn)拖放功能主要知識(shí)點(diǎn)：AjaxControlToolKit工具包

DragPanelExtender控件2.如何在頁(yè)面中實(shí)現(xiàn)拖放功能AjaxControlToolKit工具包：AjaxControToolKit是一個(gè)控件集合器,微軟通過多個(gè)時(shí)期的ctp版本的測(cè)試和修改,最終形成了一些功能完善的控件集合,以dll的形式將這些控件免費(fèi)發(fā)布,共包含了30多個(gè)Ajax控件。AjaxControlToolKit的目標(biāo)：2.如何在頁(yè)面中實(shí)現(xiàn)拖放功能屬性設(shè)置：body

style="height:100%;text-align:center;“

DragPanelExtender--TargetControlId屬性2.如何在頁(yè)面中實(shí)現(xiàn)拖放功能分析比較：DragPanelExtender1的TargetControlId屬性為Panel2DragPanelExtender2的TargetControlId屬性為Calendar1DragPanelExtender控件可以實(shí)現(xiàn)拖動(dòng)網(wǎng)頁(yè)中的控件每個(gè)需拖動(dòng)的控件有一個(gè)DragPanelExtender控件來控制3.如何在頁(yè)面兩邊浮動(dòng)顯示信息3.如何在頁(yè)面兩邊浮動(dòng)顯示信息主要知識(shí)點(diǎn)：Alwaysvisiblecontrolextender控件Panel控件Image控件3.如何在頁(yè)面兩邊浮動(dòng)顯示信息屬性設(shè)置：AlwaysvisiblecontrolextenderTargetControlId

="Image2"HorizontalSide="right"VerticalSide="middle"把圖片設(shè)置在頁(yè)面左右兩側(cè)中部顯示3.如何在頁(yè)面兩邊浮動(dòng)顯示信息Panel控件存放頁(yè)面內(nèi)容Image控件ImageUrl="~/images/image2.JPG“ID="Image2"4.如何實(shí)現(xiàn)分類折疊效果實(shí)現(xiàn)分類折疊效果4.如何實(shí)現(xiàn)分類折疊效果主要知識(shí)點(diǎn)：1.Accordion2.AccordionPane3.CollapsiblePanel4.如何實(shí)現(xiàn)分類折疊效果

Accordion介紹Accordion是一個(gè)網(wǎng)頁(yè)控件，它可以讓程序員設(shè)計(jì)多個(gè)面板，并且一次只顯示一個(gè)面板。在頁(yè)面上的顯示效果就像是使用了多個(gè)CollapsiblePanels控件，只不過每一次只展開其