Create a dynamic table in ASP. NET

 Abstract:The DataGrid Control is a server control that is bound to data released with ASP. NET page framework. This document uses the DataGrid to create a web page that contains a dynamic table view. It also explores various features provided by controls, including selection, deletion, paging, and template columns, which are used to create the final page.

　　Introduction

The DataGrid control can be used for several read-only data items. This control can be used to simplify the output of the data table layout. It also provides multiple mechanisms for adding interactivity to the output through Hyperlink and its support for selection, sorting, paging, in-situ editing, and other features. This makes the control useful in some common web application solutions, such as list, shopping cart, and query results.

The DataGrid also provides some functions that feature all server controls unique to the ASP. NET architecture. The control contains the logic required for browser-independent output. It also provides a unified programming model to process the returned data and manage the status between requests. In this way, developers can program object models with attributes, methods, and events without having to deal with the inconsistency and complexity caused by HTML programming.

　　What should we establish?

This article presents a series of sample pages, which are combined to generate a page based on the authors table and titles table of the sample database, provides the master/Detail View (is this database compatible with Microsoft SQL Server? 2000 ). Each page in the sequence describes a new feature or function of the DataGrid Control. Extracted from the pubs database.
The master/Detail View is similar to the form/subform concept introduced by Microsoft Access. It is also similar to the dataform wizard (Data Form Wizard) published with Microsoft Visual InterDev 6.0 ). The master/Detail View displays the results of one to more links. One part of the View displays the results of the first query or master query. Then, we track a selection to filter the results of the second query used, and then display the details of the selected content in another part of the view.

Figure 1. Completed page

　　
Figure 1 shows the author list in the upper half of the page, and displays detailed information about the selected author (including the relevant title) in the lower half. The authors list and titles are both represented by the DataGrid Control. Show the author's DataGrid example to show how to select, sort, and pagination. The DataGrid that displays the title shows how to edit, format, and customize columns in situ.

　　Data Access

In order to make the example one by one, extract data from SQL Server and keep the data together with its schema information as an XML file titlesdb. xml. The following is a piece of the file.

<Root> <Schema id = "documentelement" targetnamespace = "" Xmlns = "http://www.w3.org/1999/XMLSchema" Xmlns: msdata = "urn: Schemas-Microsoft-com: XML-msdata"> <Element name = "author"> <Complextype content = "elementonly"> <Element name = "au_id" type = "string" minoccurs = "1" Maxoccurs = "1"> </element> <Element name = "au_name" type = "string" minoccurs = "1" Maxoccurs = "1"> </element> <Element name = "Address" type = "string" minoccurs = "0" Maxoccurs = "1"> </element> <Element name = "city" type = "string" minoccurs = "0" Maxoccurs = "1"> </element> <Element name = "state" type = "string" minoccurs = "0" Maxoccurs = "1"> </element> <Element name = "Zip" type = "string" minoccurs = "0" Maxoccurs = "1"> </element> <Element name = "phone" type = "string" minoccurs = "0" Maxoccurs = "1"> </element> </Complextype> <Unique name = "authorconstraint" msdata: primarykey = "true"> <Selector>. </selector> <Field> au_id </field> </Unique> </Element> <Element name = "title"> <Complextype content = "elementonly"> <Element name = "title_id" type = "string" minoccurs = "1" Maxoccurs = "1"> </element> <Element name = "au_id" type = "string" minoccurs = "1" Maxoccurs = "1"> </element> <Element name = "title" type = "string" minoccurs = "1" Maxoccurs = "1"> </element> <Element name = "price" msdata: datatype = "system. Currency" Type = "string" Minoccurs = "1" maxoccurs = "1"> </element> <Element name = "pubdate" type = "timeinstant" minoccurs = "1" Maxoccurs = "1"> </element> </Complextype> <Unique name = "titleconstraint" msdata: primarykey = "true"> <Selector>. </selector> <Field> title_id </field> </Unique> <Key name = "authortitle"> <Selector> ../author </selector> <Field> au_id </field> </Key> <Keyref refer = "authortitle"> <Selector>. </selector> <Field> au_id </field> </Keyref> </Element> </Schema> <Documentelement> <Author> & Lt; au_id & gt; 154-00-1300 & lt;/au_id & gt; <Au_name> John Doe </au_name> <Phone> 425 705 1234 </phone> <Address> One Microsoft Way </address> <City> Redmond </city> <State> Ca </State> <Zip> 98005 </zip> </Author> <Title> <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 examples simplify data access and focus on using the DataGrid. The above XML is loaded into a dataset. Dataset provides high-speed data caching for filtering, sorting, editing, and other operations. The following code is from global. asax, which is used to load dataset and save it as session state.

Public void session_onstart (){ // Load the data used in the example to the dataset in the session range. 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, data is not cached at a high speed in the session or application state, but is stored through the process and intermediate layer business object, you can also access and modify data by calling methods exposed by Web Services. No matter how you access data, you will find that you are still programming and interacting with the control's object model in the same way.
Step 2: A Basic DataGrid

The first step of the sequence shows a page that contains a separate DataGrid Control to display a list of read-only books from the data source.

 

Figure 2. Page after Step 1 is completed

The DataGrid declaration comes from:

<% @ Register tagprefix = "cr" namespace = "crystaldecisions. Web" assembly = "crystaldecisions. Web" %> <% @ Page Language = "VB" autoeventwireup = "false" codebehind = "Borrow. aspx. VB" inherits = "borrrow. Borrow" %> <% @ Register tagprefix = "cr" namespace = "crystaldecisions. Web" assembly = "crystaldecisions. Web" %> <! Doctype HTML public "-// W3C // dtd html 4.0 transitional // en"> <HTML> <Head> <Title> archives and Book Circulation Management </title> <Meta content = "Microsoft Visual Studio. NET 7.0" name = "generator"> <Meta content = "Visual Basic 7.0" name = "code_language"> <Meta content = "JavaScript" name = "vs_defaultclientscript"> <Meta content = "http://schemas.microsoft.com/intellisense/ie5" name = "vs_targetschema"> </Head> <Body bgcolor = "beige" ms_positioning = "gridlayout"> <Form ID = "form1" method = "Post" runat = "server"> <Asp: Label id = "label14" style = "Z-INDEX: 101; left: 100px; position: absolute; top: -50px "runat =" server "width =" 47px "Height =" 18px "> </ASP: Label> <Asp: linkbutton id = "linkfind" style = "Z-INDEX: 105; left: 361px; position: absolute; top: 182px "runat =" server "width =" 33px "Height =" 22px "tooltip =" Click here to query "forecolor =" #0000c0 "> query </ASP: linkbutton> <Table Style = "Z-INDEX: 104; left: 133px; width: 637px; position: absolute; top: 75px; height: 74px "cellspacing =" 1 "cellpadding =" 1 "width =" 637 "border =" 1 "> <Tr> <TD style = "width: 92px"> <Asp: Label id = "lblfind1" runat = "server" forecolor = "green"> Search no. </ASP: Label> </TD> <TD style = "width: 196px"> <Asp: textbox id = "txtfind1" runat = "server" width = "199px" Height = "26px"> </ASP: textbox> </TD> <TD style = "width: 83px"> <Asp: Label id = "lblfind4" runat = "server" forecolor = "green"> Standard No. </ASP: Label> </TD> <TD> <Asp: textbox id = "txtfind4" runat = "server" width = "243px" Height = "26px"> </ASP: textbox> </TD> </Tr> <Tr> <TD style = "width: 92px"> <Asp: Label id = "lblfind2" runat = "server" forecolor = "green"> Standard Book Number </ASP: Label> </TD> <TD style = "width: 196px"> <Asp: textbox id = "txtfind2" runat = "server" width = "199px" Height = "26px"> </ASP: textbox> </TD> <TD style = "width: 83px"> <Asp: Label id = "lblfind5" runat = "server" forecolor = "green"> classification </ASP: Label> </TD> <TD> <Asp: textbox id = "txtfind5" runat = "server" width = "243px" Height = "26px"> </ASP: textbox> </TD> </Tr> <Tr> <TD style = "width: 92px"> <Asp: Label id = "lblfind3" runat = "server" forecolor = "green"> book name </ASP: Label> </TD> <TD style = "width: 196px"> <Asp: textbox id = "txtfind3" runat = "server" width = "199px" Height = "26px"> </ASP: textbox> </TD> <TD style = "width: 83px"> <Asp: Label id = "lblfind6" runat = "server" forecolor = "green"> Search number </ASP: Label> </TD> <TD> <Asp: textbox id = "txtfind6" runat = "server" width = "242px" Height = "26px"> </ASP: textbox> </TD> </Tr> </Table> <Asp: DataGrid id = "datagrid1" style = "Z-INDEX: 102; left: 129px; position: absolute; top: export PX "runat =" server "width =" 1600px "Height =" 325px "alternatingitemstyle-wrap =" false "cellpadding =" 4 "borderwidth =" 1px "borderstyle =" NONE "bordercolor = "# cc9966" backcolor = "white" allowpaging = "true" tooltip = "click the" select "button to select the books and materials to borrow."> <Footerstyle wrap = "false" forecolor = "#330099" backcolor = "# ffffcc"> </footerstyle> <Headerstyle font-bold = "true" Wrap = "false" horizontalalign = "Left" forecolor = "# ffffcc" backcolor = "#990000"> <Pagerstyle horizontalalign = "center" forecolor = "#330099" backcolor = "# ffffcc" Wrap = "false" mode = "numericpages"> </pagerstyle> <Selecteditemstyle font-bold = "true" Wrap = "false" forecolor = "# 9900ff" backcolor = "# ffcc66"> </selecteditemstyle> <Edititemstyle wrap = "false"> </edititemstyle> <Alternatingitemstyle wrap = "false"> </alternatingitemstyle> <Itemstyle wrap = "false" forecolor = "# cc9900" backcolor = "white"> </itemstyle> <Columns> <Asp: buttoncolumn text = "" headertext = "" select "commandname =" select "itemstyle-forecolor =" # 3366cc "> </ASP: buttoncolumn> </Columns> </ASP: DataGrid> <Asp: linkbutton id = "linksumit" style = "Z-INDEX: 109; left: 816px; position: absolute; top: 184px "runat =" server "width =" 42px "Height =" 18px "tooltip =" you can use this method to transfer borrowing information to the Administrator "forecolor =" #0000c0 "> submit </ ASP: linkbutton> <Asp: Label id = "label1" style = "Z-INDEX: 110; left: 138px; position: absolute; top: 186px "runat =" server "forecolor =" # c00000 "> you have selected this line! </ASP: Label> </Form> </Body> </Html>

The code above shows the DataGrid. Various attributes of the control have been declared and set. The DataGrid Control shares a set of common style attributes with other Web controls such as font, backcolor, forecolor, and borderwidth. In addition, the DataGrid provides attributes that only apply to tables, such as cellpadding. The DataGrid provides additional style attributes that affect the representation of items and columns such as headerstyle, itemstyle, and alternatingitemstyle. These style attributes are used to create data visual effects that are versatile and attractive.

DataGrid supports automatic column generation from the data source to which it is bound. In this example, the autogeneratecolumns attribute has been set to true. Therefore, you must bind the columns set with the column set to be displayed. In this way, you can control the performance, such as the column order and header, and the style corresponding to each column. 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 attribute. You can see in the subsequent steps that the DataGrid allows you to select various types of columns.

The following class contains code that supports this page.

Step1page. VB:

Imports system. dbnull Imports system. Data Imports system. Data. sqlclient Imports system. Data. oledb Imports system. datetime Imports dataaccess Public class borrow Inherits system. Web. UI. Page Public dB as new oledataaccess () Dim mydataset as new dataset () Dim selecttable as new datatable () Dim selectview as new dataview () ... Private sub page_load (byval sender as system. Object, byval e as system. eventargs) handles mybase. Load Dim info as string, time If not page. ispostback then If now. Hour> = 6 and now. Hour <12 then Info = "Good Morning !! " Elseif now. Hour> 12 and now. Hour <18 then Info = "Good afternoon !! " Else Info = "Good evening !! " End if Dim counter as int16 Counter = Application ("counter ") Lblinfo. Text = Application ("username") + "," + info + CHR (13) + "welcome to borrow .. "+ CHR (10) +" you are the "+ counter. tostring +" Visitor! " End if If isnothing (Session ("mtable") then Selecttable = createtable () Session ("mtable") = selecttable Settext () Else Selecttable = SESSION ("mtable ") End if End sub Private function createtable () as datatable Dim dT as new datatable () Dim Dr as datarow DT. Columns. Add (New datacolumn ("ID", GetType (string ))) DT. Columns. Add (New datacolumn ("name", GetType (string ))) 'Dt. Columns (0). columnname = "system number" 'Dt. Columns (1). columnname = "name" Return dt End Function End Class

This class goes beyond the onload method of page (similar to implementing page_load). It creates a temporary table and cleverly uses session to ensure that only one execution is performed when loading the page. Determine the number of visitors, as on other general pages.