Part 1 - Standard Custom Page Dynamic Data and Custom Pages

As far as I can see there are three (oops! four then) types of Custom Page:

1. Custom Pages Part 1 - Standard Custom Page based on an existing PageTemplate and customised in the DynamicData\CustomPages folder.
2. Custom Pages Part 2 - A completely Custom Page again in the DynamicData\CustomPages folder.
3. Custom Pages Part 3 - Standard ASP.Net Page with Dynamic Data features added to take advantage of the FieldTemplates.
4. Custom Pages Part 4 - A DetailsView and a GridView using Validation Groups
5. Custom Pages Part 5 - I18N? Internationalisation Custom Page  

Creating a Standard Custom Page

To customise a standard PageTemplate all you do is create a folder with the name of the entity collection (e.g. Order entity would have the folder Orders).

 

Figure 1 – Copy PageTemplate to CustomPages folder

All you do then is copy the PageTemplate you want to modify to the CustomPages sub-folder.

 

Figure 2 - Copying Details.aspx to the CustomPages <TableName>folder

Customising the Standard Custom Page

For out first step we will wire up the LinqDataSource to the Orders Table/Entity set, this will cause the column of the DetailsView to be updated see below.

<Fields>
    <asp:BoundField DataField="OrderID" HeaderText="OrderID" InsertVisible="False" ReadOnly="True" SortExpression="OrderID" />
    <asp:BoundField DataField="CustomerID" HeaderText="CustomerID" SortExpression="CustomerID" />
    <asp:BoundField DataField="EmployeeID" HeaderText="EmployeeID" SortExpression="EmployeeID" />
    ...
    <asp:BoundField DataField="ShipPostalCode" HeaderText="ShipPostalCode" SortExpression="ShipPostalCode" />
    <asp:BoundField DataField="ShipCountry" HeaderText="ShipCountry" SortExpression="ShipCountry" />
</Fields>

Listing 1 – Columns collection from the Details.aspx

Now to edit his to take advantage of DynamicData:

<Fields>
    <asp:DynamicField DataField="OrderID" />
    <asp:DynamicField DataField="Customer" />
    <asp:DynamicField DataField="Employee" />
    ...
    <asp:DynamicField DataField="ShipPostalCode" />
    <asp:DynamicField DataField="ShipCountry" />
</Fields>

Listing 2 – Updated columns collection from the Details.aspx

Here what I did was search and replace BoundField with DynamicField and remove all other unneeded properties (I used regular expressions to remove the extra fields here is the expression HeaderText=\".*\" SortExpression=\".*\" and replaced with an empty string), (these should come from the metadata from the column) then rearrange the order and replace the columns I didn’t want displaying with columns that I did (i.e. ShipVia with Shipper, CustomerID with Customer, etc) you can find the names of the EntitySet and EntityRef in the designer.cs/designer.vb file under the dbml file of your LinqToSql classes just drop the ‘_’ underscore at the beginning (you will see the actual property for each later on but this bit at the beginning always gets me what I want).

private EntitySet<Order_Detail> _Order_Details;
private EntityRef<Customer> _Customer;
private EntityRef<Employee> _Employee;
private EntityRef<Shipper> _Shipper;

Listing 3 – from Northwind.designer.cs file

If we run the DynamicData website now we will get what seems similar to the default Details.aspx page, but missing the Edit and Delete links.

Now whart we need is to add Edit and Delete functionality again.

<asp:TemplateField>
    <ItemTemplate>
        <asp:HyperLink ID="EditHyperLink" runat="server"
            NavigateUrl='<%# table.GetActionPath(PageAction.Edit, GetDataItem()) %>'
            Text="Edit" />
        <asp:LinkButton ID="DeleteLinkButton" runat="server" CommandName="Delete" CausesValidation="false"
            OnClientClick='return confirm("Are you sure you want to delete this item?");'
            Text="Delete" />
    </ItemTemplate>
</asp:TemplateField>

Listing 4 – copied from the original List.aspx

Here I’ve copied and pasted the TemplateField from the original List.aspx page to get the same functionality for Edit, Details and Delete.

Adding Master Details page funtionality

Now we add a GridView and LinqDataSource to the page for the Order_Details, (which all I did was copy the one from the List.aspx PageTemplate and then edit it).

<asp:GridView ID="GridView1" runat="server" DataSourceID="GridDataSource"
    AllowPaging="True" AllowSorting="True" CssClass="gridview">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:HyperLink ID="EditHyperLink" runat="server"
                    NavigateUrl='<%# table.GetActionPath(PageAction.Edit, GetDataItem()) %>'
                Text="Edit" />&nbsp;<asp:LinkButton ID="DeleteLinkButton" runat="server" CommandName="Delete"
                    CausesValidation="false" Text="Delete"
                    OnClientClick='return confirm("Are you sure you want to delete this item?");'
                />&nbsp;<asp:HyperLink ID="DetailsHyperLink" runat="server"
                    NavigateUrl='<%# table.GetActionPath(PageAction.Details, GetDataItem()) %>'
                    Text="Details" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>

    <PagerStyle CssClass="footer"/>        
    <PagerTemplate>
        <asp:GridViewPager runat="server" />
    </PagerTemplate>
    <EmptyDataTemplate>
        There are currently no items in this table.
    </EmptyDataTemplate>
</asp:GridView>

<asp:LinqDataSource ID="GridDataSource" runat="server" EnableDelete="true">
    <WhereParameters>
        <asp:DynamicControlParameter ControlID="FilterRepeater" />
    </WhereParameters>
</asp:LinqDataSource>
<br />

Listing 5 – Extra GridView and LinqDataSource which I copied from the List.aspx PageTemplate

Linking the two GridViews together is done in the customising of the LinqDataSource switch to design view of the Details.aspx page and find the new LinqDataSource and click on the tasks button:

Figure 3 – Configuring the LinqDataSource

Follow the wizard through and select Order_Details as the source table and then click on the Where button. Then configure the where expression to limit the list to the record in the DetailsView.

Figure 4 - Configure the where expression

Say yes to updating the GridViews column when asked. Then edit the GridView’s columns collection the same way we did the DetailsView’s fileds collection, edit the columns so that any EntitySets/EntityRefs are shown instead of their foreign keys.

Now if we run the app and choose Orders and then Details we will see something like this:

Figure 5 – Output from our custom Details.aspx page

Note: I’ve left the OrderID in both the DetailsView and the GridView just to show that we are getting the correct records, you can remove them once you are happy that that is happening.

We need to ad a new class level variable:

protected MetaTable table1;

Then the Page_Init must updated:

protected void Page_Init(object sender, EventArgs e)
{
    DynamicDataManager1.RegisterControl(DetailsView1, true);
    DynamicDataManager1.RegisterControl(GridView1, false);
}

Listing 6 – Updated Page_Init

Also in the Page_Load event handler add the following line right after one for that default table so that its metadata for the second table can be referenced:

table1 = GridDataSource.GetTable();

and then in the NavigateUrl declaration change table to table1

Note: Creating table1 and assigning it through GridDataSource.GetTable() give us a reference to the GridView’s table. Which then allows us to get the correct URL from table1.GetActionPath(PageAction.Edit, GetDataItem())

We need to put the edit capability back into the GridView to do this all we have to do is copy them from the List.aspx PageTemplate and then add them to the beginning of the Columns collection:

<asp:TemplateField>
    <ItemTemplate>
        <asp:HyperLink ID="EditHyperLink" runat="server"
            NavigateUrl='<%# table1.GetActionPath(PageAction.Edit, GetDataItem()) %>'
        Text="Edit" />&nbsp;<asp:LinkButton ID="DeleteLinkButton" runat="server" CommandName="Delete"
            CausesValidation="false" Text="Delete"
            OnClientClick='return confirm("Are you sure you want to delete this item?");'
        />&nbsp;<asp:HyperLink ID="DetailsHyperLink" runat="server"
            NavigateUrl='<%# table1.GetActionPath(PageAction.Details, GetDataItem()) %>'
            Text="Details" />
    </ItemTemplate>
</asp:TemplateField>

Listing 6 – Adding the Edit, Delete and Details functionality

As you can see from running the app again the Edit, Delete and Details functionality is back.

Figure 6 – With Edit, Delete and Details functionality

And we finish off by adding paging to the DetailsView

<asp:DetailsView ID="DetailsView1" runat="server" DataSourceID="DetailsDataSource"
    OnItemDeleted="DetailsView1_ItemDeleted" CssClass="detailstable" FieldHeaderStyle-CssClass="bold"
    AutoGenerateRows="False" DataKeyNames="OrderID" AllowPaging="True">
    <PagerSettings Mode="NextPreviousFirstLast" />

Listing 7 – Adding paging to the DetailsView

I think that will do for this part of the series, we can add other features to the page in the next edition.