DetailsView Component Samples

The DetailsView control displays a single record from a data source in a table layout, with one row per field. In Web Forms this was <asp:DetailsView>.

---

Auto-Generated Rows

When AutoGenerateRows is true (the default), the DetailsView automatically creates a row for each public property on the data item.

Code:

<DetailsView ItemType="Product"
             Items="@_products"
             AutoGenerateRows="true"
             HeaderText="Product Details"
             GridLines="GridLines.Both" />

---

Paging Between Records

Set AllowPaging="true" to display a pager row that lets users navigate between individual records in the data source — one record at a time.

Current page changed 0 time(s).

Code:

<DetailsView ItemType="Product"
             Items="@_products"
             AllowPaging="true"
             AutoGenerateRows="true"
             HeaderText="Browse Products"
             PageIndexChanged="HandlePageChanged" />

---

Edit Button & Mode Switching

Set AutoGenerateEditButton="true" to add an Edit link in the command row. Clicking Edit switches the DetailsView to Edit mode. Click Update or Cancel to return to ReadOnly mode. Handle the ModeChanging and ItemUpdating events to integrate with your data store.

Code:

<DetailsView ItemType="Product"
             Items="@_products"
             AllowPaging="true"
             AutoGenerateRows="true"
             AutoGenerateEditButton="true"
             HeaderText="Editable Product"
             ModeChanging="HandleModeChanging"
             ItemUpdating="HandleUpdating" />

@code {
    void HandleModeChanging(DetailsViewModeEventArgs e)
    {
        // e.NewMode indicates the requested mode (Edit, ReadOnly, Insert)
    }

    void HandleUpdating(DetailsViewUpdateEventArgs e)
    {
        // Persist changes to your data store here
    }
}

---

Empty Data

When the data source has no items, the EmptyDataText is displayed.

Code:

<DetailsView ItemType="Product"
             Items="@_emptyList"
             EmptyDataText="No products found." />