Ajax ModelPopu and Progress 樣本學習

最後更新：2018-12-06 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

ModelPopu樣本:

1.先建立一個ASP.NET WEB項目;

2.為項目中添加一個CSS檔案,代碼如下所示:

.modalBackground{      background-color: blacks;      filter: alpha(opacity=60);      opacity: 0.6;}.modalPopup{      background-color:#ffffdd;      border-width:3px;      border-style:solid;      border-color:black;      padding:5px;      width: 350px;      height:300px;}

3.把AJAX控制項引用到工具箱中去;

4.為預設頁面中添加控制項,代碼如下:

<asp:ScriptManager ID="ScriptManager1" runat="server" />       Are you sure you want to know the answer?.       <asp:Button ID="btnYes" runat="server" Text="Yes!" />       <br />       <asp:Panel ID="pnlModal" runat="server" CssClass="modalPopup" Style="display: none;">           Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque           laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi           architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas           sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione           voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor           sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt           ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam,           quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid           ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate           velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo           voluptas nulla pariatur?           <br />           <asp:Button ID="btnClose" runat="server" Text="Close" />       </asp:Panel>

5.把滑鼠放在Panel控制項上,會出現智能擴充,代碼如下:

<cc1:ModalPopupExtender TargetControlID="btnYes" ID="pnlModal_ModalPopupExtender"            runat="server" DynamicServicePath="" Enabled="True" BackgroundCssClass="modalBackground"            PopupControlID="pnlModal" CancelControlID="btnClose" DropShadow="true">        </cc1:ModalPopupExtender>

參數說明:

TargetControlID:為目標控制項,以就是說單擊那一個控制項後,回出現什麼的那一個控制項;

PopupControlID:為彈出的控制項;

CancelControlID:為取消時的控制項;

運行效果如下所示:

樣本二   Progress

1.建立一個ASP.NET WEB 項目

2.為預設頁面中添加如下代碼:

<head id="Head1" runat="server">    <title></title></head><body>    <form id="form1" runat="server">    <div>        <asp:ScriptManager ID="ScriptManager1" runat="server">        </asp:ScriptManager>        <asp:UpdateProgress ID="updProgress"

   AssociatedUpdatePanelID="UpdatePanel1" runat="server">            <ProgressTemplate>                <img alt="progress" src="../Image/progress.gif" />                Processing...            </ProgressTemplate>        </asp:UpdateProgress>        <asp:UpdatePanel ID="UpdatePanel1" runat="server">            <ContentTemplate>                <asp:Label ID="lblText" runat="server" Text=""></asp:Label>                <br />                <asp:Button ID="btnInvoke" runat="server" Text="Click" OnClick="btnInvoke_Click" />            </ContentTemplate>        </asp:UpdatePanel>    </div>    </form></body></html>說明:

AssociatedUpdatePanelID:這個是他的合作控制項;

2.為BUTTON添加如下事件:

System.Threading.Thread.Sleep(3000);

Response.Redirect("WebForm1.aspx");

運行如下:

最後到WebForm1.aspx頁面中

完成!希望對初學者有所協助;

睡覺了,明天還得上班,明晚再見!

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More