Use the ASP + DATAGRID control to create a main viewdetail view

zhaozj2021-02-08 238

Nikhil Kothari

Microsoft Corporation

August 2000

Summary: The DataGrid control is a server control that is shipped with ASP PAGE Framework. This article uses DataGrid to create a web page with the main / detail view. Also discusses all aspects of the functions provided by the control, including sorting, editing, paging, and template columns, and the control is to use these features to establish the final page.

Download DataGridSamples.exe files. (119 kB)

table of Contents

Introduction What should we build? Step 1: A basic DataGrid Step 2: Main / Detail View with Multi-Page: Single Page Main / Details View Step 4: Sort Fepture Step 5: Page 6: Originally Edited Step 7: Using Templates Step 8: Custom Column Conclusions

Introduction

The next release of Microsoft® Visual Studio.NET includes a DataGrid Web Control (as part of the Active Server Page (ASP ) suite of the server control). This control provides a function of using the content of the data source to represent the HTML.

DataGrid controls can be used for several read-only reporting situations. This control is designed to simplify the output of rich and fully customizable data table layout. Multiple mechanisms are also available to add interactivity to the output via hyperlink and its support for selection, sort, paging, and originally editing and other characteristics. This makes this control in a number of common web applications, such as lists, shopping carts, and query results.

DataGrid also provides features that have the characteristics of all server controls unique to the ASP architecture. The control includes logic required to perform an output independent of the browser while providing a unified programming model to handle the return data, and managing the status between the request. In this way, developers can program for object models with attributes, methods, and events without having to handle inconsistency and complexity brought directly with HTML programming.

Use the ASP list binding control (English) to introduce the DataGrid control and the relevant DataList and RePeater controls. It also introduces multiple key concepts for data binding, template, and formatting. This article is written based on the basis and focus on the DataGrid control to reveal how to use the functions provided by this control in your own application.

What should we build?

This article raises a sequence of example pages, combined with each other, which eventually generates a page, which is based on the Authors table and Titles table of the sample database, providing the main / detail view (this database along with Microsoft SQL ServerTM 2000) Shipment). Each page in the sequence introduces a new feature or feature of the DataGrid control. The following images are extracted from the Pubs database.

Master / Detail View similar to the form / sub-form concept described in Microsoft Access. It is also similar to the DataForm Wizard shipped together with Microsoft Visual InterDev® 6.0 (Data Form Wizard). The main / detailed view shows a multi-relation result, where a portion of the view displays the results of the first query or primary query. A selection is then tracked to filter the result of the second query used, so that the details of the selection content are displayed on another part of the view.

Figure 1. Completed page

Figure 1 displays the AUTHOR list in the upper part of the page, and displaying the details of the selected author (including the relevant book name) in the lower part. Authors list and titles are represented by DataGrid controls. The DataGrid example shows how to choose, sort, and pagination. The DataGrid showing the book name How to perform originally edited, format, and custom columns.

data access

In order to make examples, data is extracted from SQL Server and retain the data along with its architecture information as an XML file titlesdb.xml. Below is a piece of this file.

XMLns = "http://www.w3.org/1999/xmlschema"

XMLns: MSData = "URN: Schemas-Microsoft-COM: XML-MSDATA">

Maxoccurs = "1">

AU_ID

Maxoccurs = "1">

TYPE = "string"

Minoccurs = "1" maxoccurs = "1">

Maxoccurs = "1">

Title_id

../ Author

AU_ID

154-00-1300

john doe

425 705 1234

One Microsoft Way

redmond

98005

<title_id> bu1032 </ title_id> <au_id> 213-46-8915 </ au_id> <title> The busy executive's database guide </ title> <price> 19.99 </ price> <pubdate> 1991-06-12t07: 00: 00 </ pubdate> </ Title> </ Documentelement> </ root> These samples simplify data access, which will focus all on the use of DataGrid. The above XML is loaded into a DataSet. DataSet provides caches to data, so as can be performed, such as screening, sorting, and editing. The following code comes from Global.asax, which is used to load DataSet and save it as a SESSION state. PUBLIC VOID session_onstart () { // Use the data used in the sample to load the DataSet of the session. FILESTREAM FS = NULL; DataSet DS = NULL; Try { Fs = new filestream (server.mappath ("data // titlesdb.xml), Filemode.open, FileAccess.read; DS = new dataset (); DS.Readxml (FS); } finally { IF (fs! = null) { fs.close (); FS = NULL; } } SESSION ["AppData"] = DS; } In actual web applications, it is usually not used to use cache data in the session or Application status, but to access and modify data by the stored procedure, intermediate layer business object, or by calling the Web Service. Whether you have access to data, you will find that you are still in the same way and interact with the object model of the control. Www.ibuyspy.com (English) website is a good application example of demonstrating these concepts. Step 1: A basic DataGrid The first step of the sequence shows a page, which contains a separate DataGrid control for display a list of read-only authors from the data source. The results are similar to the effect of using the ASP list binding control (English). Figure 2. Finish the page behind the first step DataGrid declaration comes from: Step1.aspx: <ask: DataGrid ID = "authorsgrid" runat = "server" AutogenerateColumn = "false" Backcolor = "White" Borderwidth = "1px" borderstyle = "solid" bordercolor = "tan" Cellpadding = "2" cellspacing = "0" Font-name = "Verdana" font-size = "8pt"> <Property Name = "Column"> <asp: boundcolumn headertext = "id" datafield = "au_id"> <Property Name = "Headerstyle"> <asp: tableitemstyle width = "100px" /> </ Property> </ ask: BOUNDCOLUMN> <ask: boundcolumn headertext = "name" datafield = "au_name"> <property name = "Headerstyle"> <ask: TableItemStyle Width = "150px" /> </ Property> </ ask: BOUNDCOLUMN> <asp: boundcolumn headertext = "state" datafield = "state"> <Property Name = "Headerstyle"> <ask: TableItemStyle Width = "50px" /> </ Property> </ ask: BOUNDCOLUMN> </ Property> <Property Name = "Headerstyle"> <ask: TableItemStyle BackColor = "DARKRED" forcolor = "White" Font-bold = "true" /> </ Property> <Property Name = "ItemStyle"> <ask: tableItemStyle Forecolor = "DARKSLATEBLUE" /> </ Property> <property name = "alternatingItemStyle"> <ask: TableItemStyle BackColor = "geger" /> </ Property> </ ask: DataGrid> The above code shows DataGrid, the various properties of the control have been declared. The DataGrid control is shared with other web controls such as Font, BackColor, ForeColor, and BorderWidth shared a set of common style properties. In addition, DataGrid provides properties such as Cellpadding only for tables. Finally, DataGrid provides additional style properties that affect each item and the representation of Headerstyle, ItemStyle, and AlternatingItemstyle. These style properties are used to create a rich and very charming data visual effect. DataGrid supports the function of automatically generating a column from its binding data source. However, in this example, the AutoGenerateColumns property has been set to false. It is therefore necessary to initialize the columns collection by means of the columns to be displayed. Thereby, the performance effect, such as the order and header, and the pattern corresponding to each column can be more controlled. The columns defined in this step are BoundColumns so that they can be bound to a separate field of the data source through its DataField property. As you can see in the later steps, DataGrid allows you to select a variety of types of columns. The following class contains the code that supports this page. Step1page.cs: Namespace Samples { ... Public Class Step1page: Page { Protected DataGrid Authorsgrid; // Retrieve application data stored in session status Private dataset getsessionData () { Return (Dataset) session ["appdata"]; // Retrieve an Authors table PRIVATE ICOLLECTION GETAUTHORS () { DataSet DS = GetSessionData (); DataView DV = DS.TABLES ["Author"]. DefaultView; DV.ROWFILTY; Return DV; } // load the authors table in DataGrid Private void loadingauthorsgrid () { Icollection authors = getAuthors (); Authorsgrid.datasource = authors; Authorsgrid.databind (); } // Supercontrol OnLoad to load data during the first request Protected Override Void OnLoad (Eventargs E) { Base.onLoad (e); IF (! ispostback) { LoadAuthorsgrid (); } } } } This class beyond the OnLoad method (similar to implementing page_load), load the Author list as the DataGrid data source. Like other server controls, DataGrid implements an explicit data binding model, where the control only enumerates the value in the data source when the DATABIND method is called. Designed to design each control, you can fully control which point in time requires the data source and reduces the data accesses when there is no data to minimize, such as most round-trip processes. This will be proof in future steps. The code also demonstrates data retrieved from the session state, and the data is in this state during the session startup process. Step 2: Main / Detail View with Multi-Page One way to create the master / detail view is to use multiple pages. In this method, the detailed view of the selected value in the primary query is displayed on the secondary page. In information regarding the selected content, the secondary page is passed as a parameter in the URL request. Figure 3. Floating view of the second post, show the floating view of the details page Step2.aspx contains changes to the DataGrid so that it contains a column named DataGrid declaration. Step2.aspx: <ask: DataGrid ID = "authorsgrid" runat = "server" AutogenerateColumn = "false" Backcolor = "White" Borderwidth = "1px" borderstyle = "solid" bordercolor = "tan" Cellpadding = "2" cellspacing = "0" Font-name = "Verdana" font-size = "8pt"> <Property Name = "Column"> <asp: boundcolumn headertext = "id" datafield = "au_id"> <Property Name = "Headerstyle"> <asp: tableitemstyle width = "100px" /> </ Property> </ ask: BOUNDCOLUMN> <ask: boundcolumn headertext = "name" datafield = "au_name"> <property name = "Headerstyle"> <ask: TableItemStyle Width = "150px" /> </ Property> </ ask: BOUNDCOLUMN> <asp: boundcolumn headertext = "state" datafield = "state"> <Property Name = "Headerstyle"> <ask: TableItemStyle Width = "50px" /> </ Property> </ ask: BOUNDCOLUMN> <asp: hyperlinkcolumn text = "details" datanavigateURLFIELD = "au_id" DataNavigateURLFORMATSTRING = "Step2a.aspx? Authorid = {0}" /> </ Property> <Property Name = "Headerstyle"> <ask: TableItemStyle BackColor = "DARKRED" forcolor = "White" Font-bold = "true" /> </ Property> <Property Name = "ItemStyle"> <ask: tableItemStyle Forecolor = "DARKSLATEBLUE" /> </ Property> <property name = "alternatingItemStyle"> <ask: TableItemStyle BackColor = "geger" /> </ Property> </ ask: DataGrid> DataGrid declaration is almost the same as the DataGrid statement in step 1. A single HyperLinkColumn has been added to the columns collection. HyperLinkColumn is used to create a navigable link in each row of DataGrid. This type of column allows its text and navigateURL properties to bind to data. In this way, the Text property is static, and navigateURL is the data binding to the author ID (by setting the DataNavigateURL property). In addition, specifying DataNavigateURLFORMATSTRING to create a URL of the Detail page with the Author ID as a parameter. Therefore, each line includes an additional column with a "detailed" hyperlink, and the link URL is based on the data associated with the line. HyperlinkColumn represents the first step in adding interaction with the only read-only data display. The code that supports this page (step2page.cs) is the same as step 1. Adding this column does not add any code, nor does it cause any code to change, so there is no listings. Step2a.aspx Implements the details page to show the details of a specific author. Step2a.aspx: <asp: panel id = "detailspanel" runat = "server"> <table border = "0" cellspacing = "0" cellpadding = "2" width = "100%" Style = "Font-Family: Verdana; Font-size: 8pt"> <tr> <TD Width = "200"> name: </ td> <td width = "100%"> <% # DataBinder.eval (CurrentAuthor, "AU_NAME")%> </ td> </ TR> <tr> <td width = "200"> id: </ td> <td width = "100%"> <% # DataBinder.eval (CurrentAuthor, "AU_ID")%> </ td> </ TR> <tr> <TD Width = "200" Valign = "TOP"> address: </ td> <td width = "100%"> <% # DataBinder.eval (CurrentAuthor, "Address")%> <% # DataBinder.eval (CurrentAuthor, "City")%>, <% # DataBinder.eval (CurrentAuthor, "State")%> <% # DataBinder.eval (CurrentAuthor, "Zip")%> </ td> </ TR> <tr> <td width = "200"> phone: </ td> <td width = "100%"> <% # DataBinder.eval (CurrentAuthor, "Phone")%> </ td> </ TR> <tr> <TD COLSPAN = "2"> Title (s) authored </ td> </ TR> <tr> <TD COLSPAN = "2"> <ask: DataGrid ID = "titlesgrid" runat = "server" DataSource = '<% # DataBinder.eval (CurrentAuthor, "Authortitle")%>' AutogenerateColumn = "false" Showfooter = "True" Backcolor = "White" Borderwidth = "1px" borderstyle = "solid" bordercolor = "tan" cellpadding = "2" cellspacing = "0" Font-name = "Verdana" font-size = "8pt" OnItemcreated = "onItemcreatedTitlesGrid"> <Property Name = "Column"> <asp: boundcolumn headertext = "id" datafield = "title_id"> <Property Name = "Headerstyle"> <asp: tableitemstyle width = "100px" /> </ Property> </ ask: BOUNDCOLUMN> <ask: boundcolumn headertext = "title" datafield = "title"> <Property Name = "Headerstyle"> <ask: TableItemStyle Width = "250px" /> </ Property> </ ask: BOUNDCOLUMN> <asp: boundcolumn headertext = "public" datafield = "pubdate" DataFormatString = "{0: MMM YYYY}"> <Property Name = "Headerstyle"> <asp: tableitemstyle width = "100px" /> </ Property> </ ask: BOUNDCOLUMN> <asp: boundcolumn headertext = "price" datafield = "price" DataFormatString = "{0: C}"> <Property Name = "Headerstyle"> <ask: TableItemStyle Width = "50px" /> </ Property> <Property Name = "ItemStyle"> <ask: TableItemStyle Horizontalalign = "Right" /> </ Property> </ ask: BOUNDCOLUMN> </ Property> <Property Name = "Headerstyle"> <ask: TableItemStyle BackColor = "DARKRED" forcolor = "White" Font-bold = "true" /> </ Property> <Property Name = "Footerstyle"> <ask: TableItemStyle BackColor = "Tan" /> </ property> <Property Name = "ItemStyle"> <ask: tableItemStyle Forecolor = "DARKSLATEBLUE" /> </ Property> <property name = "alternatingItemStyle"> <ask: TableItemStyle BackColor = "geger" /> </ Property> </ ask: DataGrid> </ td> </ TR> </ table> </ asp: panel> This page contains several data binding expressions that use DataBinder.eval. These expressions extract each attribute of the CurrentAr property implemented in this page code. DataGrid is used to display the title compiled by the selected author. As in step 1, the DataGrid contains a definition of the columns to be displayed, and a style property setting for providing visual formatting for columns, rows, and overall controls. BoundColumns also allows data to be formatted. As seen in the above declaration, the DataFormatString property is used to format the date and currency values. Format is extremely useful for representing localized texts and controlling non-string types. Step2apage.cs contains code that supports the details page. STEP2APAGE.CS: Namespace Samples { ... Public Class Step2Apage: Page { Private Object CurrentAr; / / Return to the currently selected Author Public Object CurrentAuthor { Get { Return CurrentAuthor; } } // Retrieve application data stored in session status Private dataset getsessionData () { Return (Dataset) session ["appdata"]; } // Process the itemcreated event to customize the tail // Show summary information Protected Void OnItemcreatedTitlesgrid (Object Sender, DataGridItemcreatedEventArgs e) { IF (E.Item.ItemType == ListItemType.footer) { INT CELLCOUNT = E.Item.cells.count; For (int i = 0; i <cellcount - 1; i ) { E.Item.cells.Removeat (0); } Int itemcount = titlesgrid.Items.count; String itemcountstring; IF (itemcount == 0) { itemcountstring = "no titles found"; } Else { itemcountstring = int32.toString (itemcount) "Title (s)"; } TableCell Summarycell = E.Item.cells [0]; Summarycell.text = itemcountstring; Summarycell.columnpan = cellcount; Summarycell.horizontalalign = horizontalalign.right;} } // Super-control ONLOAD to load the details of the selected author Protected Override Void OnLoad (Eventargs E) { Base.onLoad (e); String authorid = request.queryString ["authorid"]; IF (Authorid! = NULL) { SelectAuthor (Authorid); Detailspanel.DATABIND (); } } / / Set the CurrentAuth object according to the given author ID Private void selectautauthor (string authorid) { DataSet DS = GetSessionData (); DataView DV = DS.TABLES ["Author"]. DefaultView; DV.ROWFILTER = "au_id = '" authorid "'"; CurrentAuthor = DV [0]; } } } By accessing the Request.QueryString collection, the class beyond the online ONLOAD method to retrieve the Author ID from the parameters in the URL request. The author ID is then used to query the data source and set the CurrentAr property. Finally, call DATABIND to make an expression for all data binding. In addition, the page implements an event processor for the ItemCreated event of the DataGrid control. The itemcreated event is one of the extension mechanisms provided by DataGrid for its advanced purposes. This event allows you to add and delete controls inside the row, and add it to a particular row in special circumstances. DataGrid triggered the event each time you create a project (or row). There are two cases: To be binding the control, and the project needs to be created from the head, the event is triggered before data binding the project. When you want to create a project from the save state during the round-trip process, the event is raised before loading the saved status into the project and the control therebetween. As a result, the event provides a hook for making changes to the existing control structure of the project. In this example, the processor modifies the end of the control to display a count of the column name. The number of columns included in the tail is the same as other rows. Abstract The entire DataGrid needs to be across the entire DataGrid. Therefore, the processor only retains a cell in the row, deletes all the rest, and resets the remaining cells of the COLUMNSPAN to make it cross the entire column, set its horizontalalign properties to make the text right alignment Finally, set its text, indicating the count. When processing the event, only one rule needs to be followed: You must perform the same structural conversion, regardless of the context of calling the item, whether in the data binding process, or during the round-trip process. Step 3: Master / Detail View in Single Pages Another optional and more common way to create a master / detail view is to display these views with a single page. Figure 4. Complete the page behind the third step Authors DataGrid From: Step3.aspx: <ask: DataGrid ID = "authorsgrid" runat = "server" ... DataKeyfield = "au_id" OnselectedIndexchanged = "OnselIndexchangeDAuthorsgrid> <property name =" columns "> <asp: buttoncolumn text = "SELECT" Command = "SELECT" /> ... </ Property> ... <Property Name = "SelectedItemStyle"> <ask: tableitemstyle backcolor = "palegoldenrod" font-bold = "true" /> </ Property> </ ask: DataGrid> There are three changes in this statement compared to the previous step. First, HyperLinkColumn added in step 2 has been deleted. This is no longer required because the entire view is implemented in a single page. Second, add a new column type ButtonColumn to the column set. This column generates a linkButton in each row for submitting this page instead of browsing from this page. The column's Command property is set to SELECT, and the corresponding LinkButton property is set. DataGrid Select the select as a standard command to select the column of the clicked button. When the selection changes, the DataGrid triggers the SELECTEDEXCHANGED event, which is processed in the code. The DatakeyField property page is set, resulting in a value of the DataKeys collection to fill the value corresponding to each item in the data source. This page also contains the UI and layout of the details of the details of the Detail section entitled to the panel of Detailspanel. This is replicated from the second stepwise. Step3page.cs represents the support code of the .aspx page in this step. These include code combinations from two code supported in step 2. Most of the code from the detailed information page is originally illuminated. The code shown below contains the changes and supplements we do. Step3page.cs: Namespace Samples { ... Public Class Step3Page: Page { Private Object CurrentAr; // load the authors table in DataGrid / / Another update author Private void loadingauthorsgrid () { Icollection authors = getAuthors (); Authorsgrid.datasource = authors; IF (authors.count! = 0) { Authorsgrid.selectedIndex = 0; } Else { Authorsgrid.selectedIndex = -1; } Authorsgrid.databind (); Updatedetails (); } // Treat the selected industryXchanged event in the author grid, // Update details Protected void OnselIndexchangeDauthorsgrid (Object Sender, Eventargs e) { Updatedetails (); } / / Update according to the current authors // Details Festival Private void updateTails () { Updateselection (); IF (CurrentAuthor! = null) { Detailspanel.visible = true; Detailspanel.dataBind (); Else { Detailspanel.visible = false; } } // Update the author of the currently selected Private void updateselection () { Int selectedindex = authorsgrid.selectedIndIndex; CurrentAuthor = NULL; IF (SELECTEDINDEX! = -1) { String authorid = (String) Authorsgrid.DataKeys [SELECTEDINDEX]; DataSet DS = GetSessionData (); DataView DV = DS.TABLES ["Author"]. DefaultView; DV.ROWFILTER = "au_id = '" authorid "'"; CurrentAuthor = DV [0]; } } } } Each SELECTEDINDEX property is initialized each time you load Authors DataGrid. Once the binding is obtained, the DataKeys collection is completed, and the details of the details are updated by calling UpdatedTails. Details in the processor of the SelectedIndexchanged event is also updated. Note that the DATAKEYS collection is filled with a save state in the Save of DataBind until the call. UpdatedTails method first calls UpdateSerection. UpdateSerection uses Authors DataGrid's SELECTEDIDEX and DATAKEYS attribute to determine the ID of the selected author's ID and initialize the CurrentAuth property. Then, UpdatedTails call DataBind on the DetailsPanel control, and evaluate the data binding expressions accessed by the CurrentAutor. In addition to selecting the SelectIndexchanged event, you can also implement another key concept from this sample. Note that changing the selection does not need to have an Authors DataGrid over data binding. Therefore, it is never necessary to reload the AUTHORS list, which greatly reduces access to the Authors table. This is a key benefit of explicit data binding models implemented in ASP . Step 4: Sort DataGrid supports the generation of the clicking header, which can be used to let the end user sorted the data shown in the control. This step adds a function of sorting the AUTHORS list. Figure 5. Complete the screen snapshot of the page after step 4 Authors DataGrid From: Step4.aspx <ask: DataGrid ID = "authorsgrid" runat = "server" ... ALLOWSORTING = "True" OnSortCommand = "OnSortCommandAuthorsgrid" OnItemcreated = "OnItemcreatedAuthorsgrid"> <Property Name = "Column"> <asp: buttoncolumn text = "SELECT" Command = "SELECT" /> <asp: boundcolumn headertext = "id" datafield = "au_id"> <property name = "headerstyle"> <asp: tableitemstyle width = "100px" /> </ Property> </ ask: BOUNDCOLUMN> <asp: boundcolumn headertext = "name" datafield = "au_name" Sortfield = "au_name"> <Property Name = "Headerstyle"> <ask: TableItemStyle Width = "150px" /> </ Property> </ ask: BOUNDCOLUMN> <ask: boundcolumn headertext = "state" datafield = "state" Sortfield = "State"> <Property Name = "Headerstyle"> <asp: tableitemstyle width = "75px" /> </ Property> </ ask: BOUNDCOLUMN> </ Property> ... </ ask: DataGrid> Enable sort by setting the allowsorting to TRUE. Then, set the Sortfield property of each column that does not support sorting. Columns do not set this attribute do not generate clickable headers. Finally, the SortCommand event is handled, which will be discussed in the context of the file with code supported. The sample also adds an event processor to the ItemCreated event to display the current sort setting in the column header. The following code shows that the ordering function is added to the Authors list and make changes and supplements in a class with code support. Step4page.cs: Namespace Samples { ... Public Class Step4page: Page { / / Return to the current sort direction, this information is // maintained in the Page status Protected bool sortascending { Get { Object o = state ["sortascending"]; IF (o! = null) Return (BOOL) O; Return True; } SET { State ["Sortascending"] = Value; } } / / Return to the current sort field, this information is // maintained in the Page status protected string sortfield { Get { Object o = state ["sortfield"]; IF (o! = null) Return (String) O; Return "AU_NAME"; } SET { State ["Sortfield"] = Value; } } // Retrieve an Authors table PRIVATE ICOLLECTION GETAUTHORS () { DataSet DS = GetSessionData (); DataView DV = DS.TABLES ["Author"]. Defaultview; dv.rowfilter = string.empty; String sort = sortfield; IF (sortascending == false) { Sort = "DESC"; } Dv.sort = sort; Return DV; } // Process the itemcreated event to the header with a sort icon // customize Protected Void OnItemcreatedAuthorsgrid (Object Sender, DataGridItemcreatedEventArgs e) { IF (E.Item.ItemType == ListItemType.Header) { String sortfield = sortfield; Bool ascending = sortascending; Label Sortglyph = new label (); Sortglyph.Text = Ascending? "5": "6"; Sortglyph.font.name = "Webdings"; Tablecell Cell = NULL; IF (sortfield.equals) { Cell = E.Item.cells [2]; } Else IF (Sortfield.equals ("State")) { Cell = E.Item.cells [3]; } IF (Cell! = null) { Cell.controls.add (sortglyph); } } } // Treat the SortCommand event in the author grid to update // Sort parameter and reload the new sorted data Protected Void OnsortCommandauthorsgrid (Object Sender, DataGridsortCommandEventArgs e) { String currentsterfield = sortfield; Sortfield = E.sortfield; IF (currentsortfield.equals (e.sortfield) { Sortascending =! Sortascending; } Else { Sortascending = true; } LoadAuthorsgrid (); } } } The page uses the current field and sorting direction as the name value pair, retains the state attribute in the page, and provides it as a SortField and Sortascending properties, at which point the page is responsible for maintaining the values of these attributes between the round trip processes. These properties are used for the GetAuthors function, where it is sorted according to the current value of the attribute before returning an Author list. Event processors for SortCommand events are passed in one instance of DataGridSortCommandeventArgs. This object contains the value of the sortfield property, and the property is associated with columns that are clicked in the title. You can choose to handle this value as long as it is reasonable in your application. For example, this value can include a name of a single field, such as the situation in this sample, or a sorting information, thereby allowing multiple column sorting. Implementing this method, updating the value of the sortfield and sortascending properties. Finally, this method calls loadAuthorsgrid and binds the Authors DataGrid. At this time, the situation is that the column of the DataGrid needs to be regenerated and requires you to set the data source and call DATABIND. The itemcreated event processor is similar to the event processor for Titles DataGrid in step 2. At this time, the processor modifies the control structure of the header row, and the specific method is to add icons representing the rise and fall, indicating that the currently sorted column and the current sorting direction. Here is a problem that needs to answer, why does DataGrid are not actually sorted by their data. This mainly has two main reasons. First, the ASP data source is a general ICollection so that you have the greatest flexibility when you select the data source. Data sources do not include built-in sequencing semantics. Second, it is also more important. During each request, automatic sorting will require an instance of a activity of the data source. This is not suitable for use in explicit data binding structures because this requires you to access and load data during the round-trip process. Step 5: Page 5 DataGrid provides a function of displaying a special row that contains the UI for displaying the page number and "Next" / "Previous" browsing button. This step adds a feature to page viewing to the Authors list. Figure 6. Complete the screen snapshot of the page after step 5 Authors DataGrid From: Step5.aspx: <ask: DataGrid ID = "authorsgrid" runat = "server" ... AllowPaging = "true" Pagesize = "5" ONPAGEINDEXCHANGED = "OnpageIndexchangeDAuthorsgrid"> ... <Property Name = "PagersTyle"> <ask: DataGridPagerstyle BackColor = "Tan" horizontalalign = "Right" PageButtonCount = "3" Mode = "numericpages" /> </ Property> </ ask: DataGrid> Similar to sorting, you must set several properties and implement an event processor to enable paging features. The specific step of enabling the paging feature is to set the AllowPaging property to True and set the PageSize property to a positive integer. The PageSize property determines the value of the data source to be expressed in a single page. The sample also shows setting the PagersTyle property, allowing you to customize the visual appearance and layout of the paging UI. The sample will show the pager at a time, the method is to set the MODE to NumericButtons, and set the pageButtonCount property to "3" and make it to the right. In addition to these settings, you can also choose "Next" / "Previous" Style button, the location of the Paging UI, its color scheme, and more. To support paging, you must handle the DataGrid's pageIndexchanged event, and see Step5Page.cs for specific discussion. Step5page.cs: Namespace Samples { ... Public class step5page: Page { // Treat the PageIndexchanged event in the author grid to update the data Protected Void OnPageIndexchangeDauthorsgrid (Object Sender, DataGridPageChangeDeventArgs e) { LoadAuthorsgrid (); } } } PageIndexchangeDevent's event handler is just reloading the DataGrid, thereby automatically rendering paging views of all items in the data source. The event processor is passed in an instance of DataGridPageChangeDeventArg, which contains information about the old page index and the new page index. If you are determined by the application's status, you should not change the page index, you can set the old pages index with only the DataGrid's CURRENTPAGEIDEX property, skip the reloaded data. Explicit data binding model makes it possible. Here, the content of DataGrid is refreshed until the DATABIND is called. DataGrid supports an alternative paging mode, you can enable this mode by setting the AlLowCustomPaging property to TRUE. In this mode, you are responsible for telling the Total number of values in the data source to the DataGrid, and the specific method is to set the VirtualItemCount property. Once in this mode, your data source will only contain the value of the current page. In this mode, you only need to retrieve the minimum number of values from the query to further optimize your data access. Step 6: Editing in place DataGrid supports the original editing of its rows. This step uses this feature to allow editing inside the Titles DataGrid. Figure 7. Complete the page behind step 6 Titles DataGrid From: Step6.aspx: <ask: DataGrid ID = "titlesgrid" runat = "server" ... OneDitCommand = "OneDitCommandtitlesgrid" OnupdateCommand = "OnupdateCommandtitlesgrid" Oncancelcommand = "oncancelcommandtitlesgrid"> <Property Name = "Column"> <ask: boundcolumn headertext = "id" datafield = "title_id" readonly = "true"> <Property Name = "Headerstyle"> <asp: tableitemstyle width = "100px" /> </ Property> </ ask: BOUNDCOLUMN> <asp: boundcolumn headertext = "title" datafield = "title" readonly = "true"> <Property Name = "Headerstyle"> <ask: TableItemStyle Width = "250px" /> </ Property> </ ask: BOUNDCOLUMN> <asp: boundcolumn headertext = "published" datafield = "pubdate" dataformatstring = "{0: mmm yyyy}" readonly = "true"> <Property Name = "Headerstyle"> <asp: tableitemstyle width = "100px" /> </ Property> </ ask: BOUNDCOLUMN> <asp: boundcolumn headertext = "price" datafield = "price" DataFormatString = "{0: C}"> <Property Name = "Headerstyle"> <ask: TableItemStyle Width = "50px" /> </ Property> <Property Name = "ItemStyle"> <ask: TableItemStyle Horizontalalign = "Right" /> </ Property> </ ask: BOUNDCOLUMN> <ask: editcommandcolumn edittext = "edit" canceltext = "ca Zancel" UpdateText = "OK" /> </ Property> ... </ ask: DataGrid> The purpose of editing in the DataGrid is reached by handling the editcommand, updateCommand, and CancelCommand events of the control. The Columns collection contains a new column named EditCommandColumn. This column automatically creates a button set on the right side of each row. Create an Edit button for the serials in the read-only mode and create an UPDATE and CANCEL buttons for each line in the edit mode. The EDITTEXT, CANCELTEXT, and UPDATEXT properties are used to specify the text of the button. Note that the text can be set to an HTML tag to use the image for these buttons. Finally, the READONLY <. / FONT> attribute of the columns is set to TRUE. This prevents editing of data in these columns, even if the column is in edit mode. For this example, only the price field is editable, so all other BoundColumns are labeled read-only. The above declared event processor is implemented in the class shown below. Step6page.cs: Namespace Samples { ... Public class step6page: Page { / / Update the currently selected author and reload the title corresponding to the selected content // grid protected void loadingtitlesgrid () { Updateselection (); Titlesgrid.databind (); } // Treat the Cancelcommand event in the book name grid, // End Edit without administration Protected Void Oncancelcommandtitlesgrid (Object Sender, DataGridCommandev</div><div class="text-center mt-3 text-grey"> 转载请注明原文地址:https://www.9cbs.com/read-1403.html</div><div class="plugin d-flex justify-content-center mt-3"></div><hr><div class="row"><div class="col-lg-12 text-muted mt-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></div></div></div></div><div class="card card-postlist border-white shadow"><div class="card-body"><div class="card-title"><div class="d-flex justify-content-between"><div>New Post(0) </div><div></div></div></div><ul class="postlist list-unstyled"> </ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="1403" checked /></div></div></div></div></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2020 All Rights Reserved </div><div class="col text-right">Processed: 0.038, SQL: 9</div></div></div></footer><script src="./lang/en-us/lang.js?2.2.0"></script><script src="view/js/jquery.min.js?2.2.0"></script><script src="view/js/popper.min.js?2.2.0"></script><script src="view/js/bootstrap.min.js?2.2.0"></script><script src="view/js/xiuno.js?2.2.0"></script><script src="view/js/bootstrap-plugin.js?2.2.0"></script><script src="view/js/async.min.js?2.2.0"></script><script src="view/js/form.js?2.2.0"></script><script> var debug = DEBUG = 0; var url_rewrite_on = 1; var url_path = './'; var forumarr = {"1":"Tech"}; var fid = 1; var uid = 0; var gid = 0; xn.options.water_image_url = 'view/img/water-small.png'; </script><script src="view/js/wellcms.js?2.2.0"></script><a class="scroll-to-top rounded" href="javascript:void(0);"></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"></a></body></html><script> var forum_url = 'list-1.html'; var safe_token = 'knSFrXuAFBp8Hzdd0lcy072Zvs6b_2BGAVjYvqeq5TCQS1ftNLXectgBfRqbVPfv5K7hyjMMpJQKhj5kJcAgqhKw_3D_3D'; var body = $('body'); body.on('submit', '#form', function() { var jthis = $(this); var jsubmit = jthis.find('#submit'); jthis.reset(); jsubmit.button('loading'); var postdata = jthis.serializeObject(); $.xpost(jthis.attr('action'), postdata, function(code, message) { if(code == 0) { location.reload(); } else { $.alert(message); jsubmit.button('reset'); } }); return false; }); function resize_image() { var jmessagelist = $('div.message'); var first_width = jmessagelist.width(); jmessagelist.each(function() { var jdiv = $(this); var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width(); var jmessage_width = Math.min(jdiv.width(), maxwidth); jdiv.find('img, embed, iframe, video').each(function() { var jimg = $(this); var img_width = this.org_width; var img_height = this.org_height; if(!img_width) { var img_width = jimg.attr('width'); var img_height = jimg.attr('height'); this.org_width = img_width; this.org_height = img_height; } if(img_width > jmessage_width) { if(this.tagName == 'IMG') { jimg.width(jmessage_width); jimg.css('height', 'auto'); jimg.css('cursor', 'pointer'); jimg.on('click', function() { }); } else { jimg.width(jmessage_width); var height = (img_height / img_width) * jimg.width(); jimg.height(height); } } }); }); } function resize_table() { $('div.message').each(function() { var jdiv = $(this); jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>'); }); } $(function() { resize_image(); resize_table(); $(window).on('resize', resize_image); }); var jmessage = $('#message'); jmessage.on('focus', function() {if(jmessage.t) { clearTimeout(jmessage.t); jmessage.t = null; } jmessage.css('height', '6rem'); }); jmessage.on('blur', function() {jmessage.t = setTimeout(function() { jmessage.css('height', '2.5rem');}, 1000); }); $('#nav li[data-active="fid-1"]').addClass('active'); </script>