004 of ATLAS learning: "updatepanel" and "updateprogress" enable animation effects for updated data

Source: Internet
Author: User

Let's take a look at the end of this article:

This article uses two controls, "updatepanel" and "updateprogress", to present the animation effect of the data during the update and provide a friendly interface for users to wait. It's cool!

This document also describes how to create a dataset. When I study it, I can't say it?

The detailed steps are as follows:

1. Open "Visual Studio 2005", "create a website", select "Atlas web site" under "My templates", and click OK.

 

2. Prepare the following two files:

One is the "northwnd. MDF" database file provided by SQL Server. Right-click the "app_data" folder of "solution Resource Manager" and "add existing items" to add the file.

One is this image: busy.gif. Add it to the new "image" folder under Solution Explorer. Let's go!

 

3. Right-click the project in solution Resource Manager, add a new project, select dataset, add, and click yes. Then, ensure that "northwnd. MDF in the drop-down box of the tableadapter Configuration Wizard, click "Next", "Next", and "Next ".

 

4. Click "query generator...", select "Products", and then "add" and "close ".

 

5. Select "productid, productname, discontinued" and click "OK ". Click "Next", deselect the check box before "fill in able (I)", and click "Next" and "finish ".

 

6. Save all files.

 

7. Double-click "default. aspx" under "solution Resource Manager" and switch to its "design" page. You can see that there is already a "scriptmanager" control. Click it, click its Smart tag, and check "enable partial rendering.

 

8. Drag a gridview control, select "Select data source", "create data source", select "object", and click "OK". Select the data adapter "dataset1tableadapters" created in step 3-5. productstableadapter ", click" Next ", and" complete ".

 

9. Select "enable pagination" and "enable editing" under the "gridview task" that follows ".

 

10. Save all files.

11. Go to "default" from the "atals" control list in the toolbox. on the "design" page of aspx, drag an "updatepanel" control. If there are any prompts, click "yes ", then drag the previous "gridview" to the "updatepanel" control.

 

12. Go to "default" from the "atals" control list in the toolbox. on the "design" page of aspx, drag a "updateprogress" control. If you have any prompts, click "yes ".

 

13. Select the "updateprogress" control and switch to "default. on the "Source" interface of aspx, the description of the "updateprogress" Control in the Code is displayed in bold. Add (insert) in the description) enter <progresstemplate> </progresstemplate>, and drag the "updata.gif" image file in "image" under Solution Explorer into the inserted code segment. Insert this line of code after the image: "<span style =" color: # ff3366 "> data is being updated. Please wait ...... </span> "to save all files.

 

14. Good. You can check the effect. Press "Ctrl" + F5 to run one. After the result is displayed, click "edit" in any row, modify it in the table, and click "Update". Because it is actually a local operation, the "cool" effect of data update is basically invisible. Let's do this: switch to "default. on the "design" page of aspx, select the "objectperformance1" control, press "F4" to bring up the "properties" window, select "Event" (lightning mark), and double-click the "selecting" attribute, add the following code to the event: "system. threading. thread. sleep (2000); "to save all files.

 

15. Press "Ctrl" + F5 to run the command. After the result is displayed, click "edit" in any row, modify it in the table, and click "Update ", the effect should come out. When the data is updated, the small circle turns slowly! Cool!

 

The complete code is provided below:

 

<%... @ Page Language = "C #" autoeventwireup = "true" codefile = "default. aspx. cs" inherits = "_ default" %>

<! Doctype HTML public "-// W3C // dtd xhtml 1.1 // en" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Title> untitled page </title>
</Head>
<Body>
<Form ID = "form1" runat = "server">
<Atlas: scriptmanager id = "scriptmanager1" runat = "server" enablepartialrendering = "true"/>

<Div>

<Atlas: updateprogress id = "updateprogress1" runat = "server">
<Progresstemplate>
<span style = "color: # ff3366"> data is being updated. Please wait... </span>
</Progresstemplate>
</Atlas: updateprogress>



<Atlas: updatepanel id = "updatepanel1" runat = "server">
<Contenttemplate>
<Asp: gridview id = "gridview1" runat = "server" allowpaging = "true" autogeneratecolumns = "false"
Datakeynames = "productid" performanceid = "objectperformance1">
<Columns>
<Asp: commandfield showeditbutton = "true"/>
<Asp: boundfield datafield = "productid" headertext = "productid" insertvisible = "false"
Readonly = "true" sortexpression = "productid"/>
<Asp: boundfield datafield = "productname" headertext = "productname" sortexpression = "productname"/>
<Asp: checkboxfield datafield = "discontinued" headertext = "discontinued" sortexpression = "discontinued"/>
</Columns>
</ASP: gridview>
</Contenttemplate>
</Atlas: updatepanel>




<Asp: objectdatasource id = "objectperformance1" runat = "server" oldvaluesparameterformatstring = "original _ {0}" selectmethod = "getdata" typename = "dataset1tableadapters. productstableadapter "updatemethod =" Update "onselecting =" objectperformance=selecting ">
<Updateparameters>
<Asp: parameter name = "productname" type = "string"/>
<Asp: parameter name = "discontinued" type = "Boolean"/>
<Asp: parameter name = "original_productid" type = "int32"/>
</Updateparameters>
</ASP: objectdatasource>


</Div>
</Form>
</Body>
</Html>

 

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.