DetailsView

@inherits ControlComponent
@inject HttpClient Http

<table>
                                            <tr>
                                            <td>
                                            <asp.GridView @ref="this.gridview" AutoGenerateColumns="false"
                                            DataSourceID="Customers"
                                            DataKeyNames="CustomerID"
                                            OnSelectedIndexChanged="this.GridView_SelectedIndexChanged">
                                            <Columns>
                                            <asp.CommandField ShowSelectButton="true" />
                                            <asp.BoundField DataField="ContactName" HeaderText="ContactName" />
                                            <asp.BoundField DataField="CompanyName" HeaderText="CompanyName" />
                                            </Columns>
                                            </asp.GridView>
                                            </td>
                                            <td valign="top">
                                            <asp.DetailsView @ref="this.detailsview" AutoGenerateRows="true"
                                            DataSourceID="Details"
                                            DataKeyNames="CustomerID" Height="50px" Width="301px">
                                            </asp.DetailsView>
                                            </td>
                                            </tr>
</table>

<asp.FreeDataSource ID="Customers" OnExecuteSelected="sender => this.customers" />

<asp.FreeDataSource ID="Details" OnExecuteSelected="sender => this.details" />

@code {
                                            private GridView gridview;
                                            private DetailsView detailsview;
                                            private Customer[] customers;
                                            private Customer[] details;

                                            protected override async Task OnInitializedAsync()
    {
        customers = await Http.GetFromJsonAsync<Customer[]>("sample-data/customers.json");
    }

                                            protected void GridView_SelectedIndexChanged(object sender, EventArgs e)
    {
        details = customers.Where(a => a.CustomerID == Convert.ToInt32(gridview.SelectedValue)).ToArray();
        detailsview.DataBind();
    }

                                            public class Customer
    {
                                            public int CustomerID { get; set; }

                                            public string CompanyName { get; set; }

                                            public string ContactName { get; set; }

                                            public string JobTitle { get; set; }

                                            public string City { get; set; }

                                            public string Address { get; set; }

                                            public string CountryRegion { get; set; }

                                            public string Phone { get; set; }

                                            public string Fax { get; set; }
    }
}

@using System.Collections
@using System.Web
@inherits ControlComponent
@inject HttpClient Http

<table cellspacing="10">
                                            <tr>
                                            <td>
                                            <asp.GridView @ref="this.gridview" AutoGenerateColumns="false"
                                            DataSourceID="Customers"
                                            DataKeyNames="CustomerID"
                                            OnSelectedIndexChanged="this.GridView_SelectedIndexChanged">
                                            <HeaderStyle BackColor="Blue" ForeColor="White" />
                                            <Columns>
                                            <asp.CommandField ShowSelectButton="true" />
                                            <asp.BoundField DataField="ContactName" HeaderText="ContactName" />
                                            <asp.BoundField DataField="CompanyName" HeaderText="CompanyName" />
                                            </Columns>
                                            </asp.GridView>
                                            </td>
                                            <td valign="top">
                                            <asp.DetailsView @ref="this.detailsview" AutoGenerateRows="false"
                                            DataSourceID="Details"
                                            AutoGenerateInsertButton="true"
                                            AutoGenerateEditButton="true"
                                            AutoGenerateDeleteButton="true"
                                            EmptyDataText="No records."
                                            DataKeyNames="CustomerID"
                                            GridLines="GridLines.Both"
                                            OnItemInserted="this.DetailsView_ItemInserted"
                                            OnItemInserting="this.DetailsView_ItemInserting"
                                            OnItemUpdated="this.DetailsView_ItemUpdated"
                                            OnItemUpdating="this.DetailsView_ItemUpdating"
                                            OnItemDeleted="this.DetailsView_ItemDeleted">
                                            <HeaderStyle BackColor="Navy" ForeColor="White" />
                                            <RowStyle BackColor="White" />
                                            <AlternatingRowStyle BackColor="LightGray" />
                                            <EditRowStyle BackColor="LightCyan" />
                                            <Fields>
                                            <asp.BoundField DataField="CustomerID" HeaderText="CustomerID" ReadOnly="true"
                                            InsertVisible="false" />
                                            <asp.BoundField DataField="CompanyName" HeaderText="CompanyName" />
                                            <asp.BoundField DataField="ContactName" HeaderText="ContactName" />
                                            <asp.BoundField DataField="JobTitle" HeaderText="JobTitle" />
                                            <asp.BoundField DataField="City" HeaderText="City" />
                                            <asp.BoundField DataField="Address" HeaderText="Address" />
                                            <asp.BoundField DataField="CountryRegion" HeaderText="CountryRegion" />
                                            <asp.BoundField DataField="Phone" HeaderText="Phone" />
                                            <asp.BoundField DataField="Fax" HeaderText="Fax" />
                                            </Fields>
                                            </asp.DetailsView>
                                            </td>
                                            </tr>
</table>

<asp.FreeDataSource ID="Customers" OnExecuteSelected="sender => this.customers" />

<asp.FreeDataSource ID="Details" OnExecuteSelected="sender => this.details"
                                            OnExecuteInserted="this.Details_ExecuteInserted"
                                            OnExecuteUpdated="this.Details_ExecuteUpdated"
                                            OnExecuteDeleted="this.Details_ExecuteDeleted" />

@code {
                                            private GridView gridview;
                                            private DetailsView detailsview;
                                            private Customer[] customers;
                                            private Customer[] details;

                                            protected override async Task OnInitializedAsync()
    {
        customers = await Http.GetFromJsonAsync<Customer[]>("sample-data/customers.json");
    }

                                            protected void GridView_SelectedIndexChanged(object sender, EventArgs e)
    {
        details = customers.Where(a => a.CustomerID == Convert.ToInt32(gridview.SelectedValue)).ToArray();
        detailsview.DataBind();
    }

                                            protected void DetailsView_ItemInserted(object sender, DetailsViewInsertedEventArgs e)
    {
                                            // Refresh the GridView control after a new record is inserted
                                            // in the DetailsView control.
        gridview.DataBind();
    }

                                            protected void DetailsView_ItemInserting(object sender, DetailsViewInsertEventArgs e)
    {
                                            // Iterate though the values entered by the user and HTML encode
                                            // the values. This helps prevent malicious values from being
                                            // stored in the data source.
                                            for (int i = 0; i < e.Values.Count; i++)
        {
                                            if (e.Values[i] != null)
            {
                e.Values[i] = HttpUtility.HtmlEncode(e.Values[i].ToString());
            }
        }
    }

                                            protected void DetailsView_ItemUpdated(object sender, DetailsViewUpdatedEventArgs e)
    {
                                            // Refresh the GridView control after a new record is updated
                                            // in the DetailsView control.
        gridview.DataBind();
    }

                                            protected void DetailsView_ItemUpdating(object sender, DetailsViewUpdateEventArgs e)
    {
                                            // Iterate though the values entered by the user and HTML encode
                                            // the values. This helps prevent malicious values from being
                                            // stored in the data source.
                                            for (int i = 0; i < e.NewValues.Count; i++)
        {
                                            if (e.NewValues[i] != null)
            {
                e.NewValues[i] = HttpUtility.HtmlEncode(e.NewValues[i].ToString());
            }
        }
    }

                                            protected void DetailsView_ItemDeleted(object sender, DetailsViewDeletedEventArgs e)
    {
                                            // Refresh the GridView control after a new record is updated
                                            // in the DetailsView control.
        gridview.DataBind();
    }

                                            protected void Details_ExecuteInserted(object sender, IDictionary values)
    {
                                            // Insert record.
        Customer customer = new Customer().Apply(() => values)
            .Apply(() => new { CustomerID = customers.Max(a => a.CustomerID) + 1 });
        customers = customers.Union(new Customer[] { customer }).ToArray();
    }

                                            protected void Details_ExecuteUpdated(object sender, IDictionary keys, IDictionary values, IDictionary oldValues)
    {
                                            // Update record.
        customers.Where(a => a.CustomerID == (int)keys["CustomerID"]).Apply(a => values);
    }

                                            protected void Details_ExecuteDeleted(object sender, IDictionary keys, IDictionary oldValues)
    {
                                            // Delete record.
        customers = customers.Where(a => a.CustomerID != (int)keys["CustomerID"]).ToArray();
    }

                                            public class Customer
    {
                                            public int CustomerID { get; set; }

                                            public string CompanyName { get; set; }

                                            public string ContactName { get; set; }

                                            public string JobTitle { get; set; }

                                            public string City { get; set; }

                                            public string Address { get; set; }

                                            public string CountryRegion { get; set; }

                                            public string Phone { get; set; }

                                            public string Fax { get; set; }
    }
}