Ajax learning Records in ASP. Six non-refreshed data edits (GridView and DetailsView combined instances)

Source: Internet
Author: User

This blog is a copy of the book example, the implementation of the GridView and DetailsView combined with No refresh of the data editing effect, page effect: When you click on the GridView1 line or page change, will be raised DetailsView1 data binding display to the page , while using DetailsView1 edit, delete, add, will also cause GridView1 re-binding, the overall page implementation is not refreshed.

Page layout:

1. Create a new Ajax window named: "norefreshedit.aspx". To implement a page without refreshing edits, you must use two UpdatePanel.

2. Add a two-column table to the norefreshedit.aspx page and place a UpdatePanel in each cell.

3. Add a table in the Updatepanel1, it is best to add a table with more data, so that you feel the refresh effect of the page change, I use the tb_info table, according to my usual practice, directly drag it into the Updatepanel1, Automatically generate bindings for GridView1 and SqlDataSource1. Turn on the selection, paging function in the GridView1.

4. Place a sqldatasource2 in Updatepanel2, bind the SqlDataSource2 connection string to the tb_info table, and start configuring SqlDataSource2. Click the Advanced button, select the Generate INSERT, Update, DELETE statement, click the Where button, and bind the ID to the ID value of GridView1 's SelectedValue event firing.

5. Drag and drop a DetailsView1 into the Updatepanel2, configure the DetailsView1 data source as SqlDataSource2, and start the edit, delete, and insert functions.

6. Change the UpdateMode attribute of the Updatepanel1 to: conditional, and the UpdateMode property of the Updatepanel2 to conditional, At the same time, adding two async-postback,controlid in the triggers of Updatepanel2 is Gridview1,eventname selectedindexchanged and pageindexchanged, that is, when GridView1 select rows and page numbers change, Updatepanel2 refreshes occur, and DetailsView1 is displayed.

Page layout to this, the following look at the CS code:


1 Public Partial classNoRefreshEdit:System.Web.UI.Page
2{
3    protected voidPage_Load (Objectsender, EventArgs e)
4    {
5
6 }
7    protected voiddetailsview1_itemdeleted (Objectsender, DetailsViewDeletedEventArgs e)
8    {
9 Gridview1.databind ();
Ten updatepanel1.update ();
one }
A    protected voiddetailsview1_iteminserted (Objectsender, DetailsViewInsertedEventArgs e)
-    {
- Gridview1.databind ();
the updatepanel1.update ();
+ }
-    protected voiddetailsview1_itemupdated (Objectsender, DetailsViewUpdatedEventArgs e)
-    {
+ Gridview1.databind ();
- updatepanel1.update ();
+ }
A}
at

So what's the code for writing these two lines, for two reasons: 1. DetailsView1 is not a Updatepanel1 triggers, so any action of it will not refresh the Updatepanel1 control, 2. Even DetailsView1 became UPDATEPANEL1 triggers, Its actions can cause Updatepanel1 to refresh, and Updatepanel1 refresh will continue to display the last list because the GridView1 control does not rebind SqlDataSource1. So we have to let Updatepanel1 refresh and let GridView1 rebind.

      when the UpdateMode of UpdatePanel is changed to conditional, in addition to using the triggers setting to ask for when to flush out, You can also call its update function directly in the program code to require the UpdatePanel to refresh.

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.