DreamwaverMX and ASP.NET(2)

2. uses ASP.NET component DataGrid to show data

Relevant content introduces:

ASP.NET took package of a lot of Web oneself, write the rate of the webpage quickly. Let a tutorial that we take oneself with Dreamwaver MX- - the example of Global, will demonstrate how to use this component to show the data in the database come.

1. database is linked and show data with DataGrid

There is the database Global.mdb of this example in the Assets in Web page catalog, our purpose is the data basis in expressing the Location in this database the data that the value of Region_id will come to to output different area. (Can use Access to open this database)

What we can name Location3.htm file the Web window that is Location3.aspx(ASP.NET the file again is suffixal for Aspx) , edit to its after that.



[Graph 2-1 needs changed page]

Let us delete intermediate simple static state section, will realize its fun ction with the DataGrid of ASP.NET.



[Graph 2-2 deletes the page of static part]
Link a database namely next. Click the Application face plate of right, choose Database, click + date,

Choose OLE DB Connection.



[Face plate of graph 2-3 Application]

Enter dialog box of OLE DB Connection then. Here is OK and handwritten link database code, also can generate code automatically. Name Connection Name for Location, click Build, generate code automatically through guide.



[Dialog box of graph 2-4 OLE DB Connection]

After entering page of Data Link Properties, choice Provider installs database engine

The person makes namely below uncannily, support 21 kinds of databases to link means to include SQL Server among them, oracle is waited a moment.



[Engine of graph 2-5 database offers a page]

This is.NET is gigantic one of good places, support a variety of databases. Its used ADO.NET. According to ADO.NET writes wait for the Connection String that we generate with this guide a little while.

The database that will link as a result of us is the database of Access2000, so we choose Microsoft Jet 4.0 OLE DB Provider, click Next.

Click the pushbutton by 1.Select Or Enter A Database Name, what the choice wants the database of the link

User Name and Password cancel in 2.Enter Information To Log On To The Database



[Graph 2-6 set is linked]

In Advanced the setting reads extraction limits of authority. Choose Read, readWrite, write, click affirmatory.



[Graph 2-7 sets limits of authority]

Add Connection Name, click Test to check database link, if database links a success, click OK. Congratulation you,

You had received database catenary your site. Should be next use its DataGrid to show

It is Application face plate likewise, choose Server Behaviors,

Finish a setting first, cl ick Deplay, the program is met site of will automatic deploy, meeting general DreamweaverCtrls.dll, web.config and _mmServerScripts folder copy site catalog, it is the file that builds ASP.net webpage to need with Dreamweaver MX.



[Site of graph 2-8 deploy]
Want to build Bin folder below website root catalog first at the same time, copy DreamweaverCtrls.dll file so far folder.

Click + date, build a DataSet first.



[Graph 2-9 adds Dataset]

Connection is choice data source, table is selection list, column is options order, filter is to be used at choosing data, because this page is the data of indication Europe, reason sets Entered Value=3. On Failure, go To is to be used at processing to read access to occupy the page that when making mistake, jumps.



[Graph 2-10 establishs data set]

DataGrid can be founded after founding DataSet to succeed. Click + date, choose DataGrid



[Graph 2-11 adds DataGrid]

The record volume of need chooses in Dataset, whether does the setting in Show use cent to the page shows and divide every page that the page shows to record a number, the means of column of navigation of the set in Navigation, can be added in Columns or delete indication item.



[Graph 2-12 installs DataGrid]

Click Edit, the setting expresses the caption of the head. After inputting caption, click OK to decide.



[Graph 2-13 installs caption]

Click OK, add DataGrid.



[Graph 2-14 previews a page]

In previewing a page you can see the area that added a DataGrid, preview a page by F12.

The page after moving is below.



[The page after graph 2-15 moves]
2. changes the property of DataGrid

Relevant content introduces:

Whether can feel to look when you see this package color is not quite beautiful, let us change him in that way. DataGrid com ponent has a lot of property, can change the style of DataGrid through him.

Analytic code

Runat="server "

AllowSorting="False "

AutoGenerateColumns="false "

CellPadding="3 "

CellSpacing="0 "

ShowFooter="true "

ShowHeader="true "

DataSource="<%# DataSet1.DefaultView %> "

PagerStyle-Mode="NumericPages "

AllowPaging="true "

AllowCustomPaging="true "

PageSize="<%# DataSet1.PageSize %> "

VirtualItemCount="<%# DataSet1.RecordCount %> "

OnPageIndexChanged="DataSet1.OnDataGridPageIndexChanged "

>













HeaderText="CODE "

ReadOnly="true "

Visible="True"/>


HeaderText="LOCATION_NAME "

ReadOnly="true "

Visible="True"/>


HeaderText="ADDRESS "

ReadOnly="true "

Visible="True"/>


HeaderText="CITY "

ReadOnly="true "

Visible="True"/>


HeaderText="STATE_COUNTRY "

ReadOnly="true "

Visible="True"/>


HeaderText="REGION_ID "

ReadOnly="true "

Visible="True"/>


HeaderText="TELEPHONE "

ReadOnly="true "

Visible="True"/>


HeaderText="FAX "

ReadOnly="true "

Visible="True"/>

This is the code that Dreamwaver MX generates, can undertake modification according to its attribute.

PagerStyle-Mode

Can set minute of form that the page demonstrates, numericPages is with the number cent page shows, nextPrev is with " < " " > " mark shows.

HeaderStyle

The setting expresses the style of the head. Can install HorizontalAlign(level to be opposite neat) , ) of BackColor(setting color, ) of ForeColor(foreground color, font-Name(font) , whether is Font-Bold(thick substance) , font-Size(font size)

ItemStyle

Set every data style, among them attribute is Alexandrine

AlternatingItemStyle

If need is alternant data Xiang Yan is lubricious, this can add this, attribute is Alexandrine

FooterStyle

Set page foot pattern

PagerStyle

Express bottom style
Dreamwaver MX also has the dialog box of the style that can chan ge DataGrid.

Choose generated DataGrid, edit Columns is clicked in its attribute face plate again. .



[The attribute face plate of graph 2-16 DataGrid]

Enter attribute to revise a page, we can be passed " + " , " - " come the kind that place of increase and decrease wants, the data that can click Edit to install each correspondence at the same time, and the name of Title. The type that clicks Change Column to be able to install each includes Free Form(freedom to set every included data among them, and the content) that can add oneself, hyperlink(setting links) to exceed, edit, updata, cancel Buttons(can be used at building administrative page) quickly, delete Button(deletes a record)



[Attribute of graph 2-17 DataGrid Column]



[Attribute of graph 2-18 Change Column Type]

Believe through these attribute you can install the DataGrid that you want.