Tutorial - Master/Detail

In this tutorial we will show you how to setup Master/Detail table view in ASP.NET Maker. We will use the demo database for demonstration.

In the demo database, there are two tables called "Orders" and "Order Details". We will set up the master/detail relation between these two tables.

Fields in Table "Orders"

Fields in Table "Order Details"

Steps to Setup Master/Detail Records

1. Loading ASP.NET Maker

Open ASP.NET Maker and connect to the demo database.

2. Setting up Master/Detail Relationship

Click [Tables] (or any child node of the database node) on the Database tree view in the left pane. The Table Setup page is displayed in the right pane.

To setup the Master/Detail relation between table "Orders" (Master) and "Order Details", select either table, in this example, we choose "Orders" table at Table/View list. Then in [Master/Detail] panel at the bottom right corner of the page, click [Modify...] to bring up the visual master/detail relationship editor. Drag the detail table from the table list on the left to the diagram on the right.

Then create a relationship between them by dragging from the master field (key field in master table) to the detail field (foreign key field in the detail table).

If there are more linked field, repeat the step until all the relationships are setup. In this tutorial, we only have one detail field ([Order Details].[OrderID]) and one master field ([Orders].[OrderID]).

ASP.NET Maker supports multiple master/detail, if the table has other master tables or detail tables, just repeat above process. In this example, we have only one master/detail relationship, so we click [OK] to confirm. The master/detail relationship is setup.

If you want to enable Master/Detail-Add and/or Master/Detail-Edit, enable Grid-Add and/or Grid-Edit for the detail table in the Table Setup page. If you want to see the number of detail records in the master table's List page, enable Detail Record Count for the master table:

If you have the YUI Container or the Preview Row extension (for registered users only) and want to enable Detail Record Preview by Ajax, you can click Tools->Extension to enable it. Also see Third-Party Tools.

Note: The Detail Record Preview feature works best when the number of the fields and number of records are not too many so the size of the preview area will not be too large. Otherwise the preview area may exceed the browser area and therefore the detail records cannot be viewed completely at a glance. Or the preview area will be too wide that it covers the detail table link and therefore the preview area can be hidden by moving the mouse cursor from the link.

3. ASP.NET Script Generation

Click the [Generate ASP.NET] icon to go to the [Generate] tab, click the [Generate] button. ASP.NET Maker will generate the required ASP.NET scripts automatically.

4. Running the ASP.NET Application

Click on the link to the "Orders" table, there will be a new column of "Order Details Details" which links to the "Order Details " table. Click on the link to access the Order Details for that Order.

Click the "Order Details (n)" link, the Detail Record List Page for "Order Details" will be shown as below. To add, delete, view, edit or search records in the Detail table, simply click on the corresponding links in the page.

Click "Back to Master Page" to go back to the master page, click the "Edit" or "Copy" link under the "Order Details" link, or click the "Add Orders/Order Details", the Master/Detail-Add or Master/Detail-Edit page (actually the Add/Edit page for the master table with Grid-Add/Edit page for the detail table) will be shown. You can enter one master record with a number of detail records. For example, Master/Detail-Edit:

In Master/Detail-Add/Edit mode, you can click "Add Blank Row" or "Delete" to add or delete rows without refreshing the page. Note this feature is implemented by JavaScript, newer version of browsers are required.