FormView

@inherits ControlComponent
@inject HttpClient Http

<asp.FormView DataSourceID="EmployeeSource"
                                            AllowPaging="true"
                                            DataKeyNames="EmployeeID">
                                            <ItemTemplate TItem="Employee">
                                            <table>
                                            <tr>
                                            <td>
                                            <asp.Image ImageUrl="@("img/" + context.PhotoPath)"
                                            AlternateText="@context.LastName" />
                                            </td>
                                            <td>
                                            <h3>@context.FirstName @context.LastName</h3>
                                            @context.Title
                                            </td>
                                            </tr>
                                            </table>
                                            </ItemTemplate>
                                            <PagerSettings Position="PagerPosition.Bottom"
                                            Mode="PagerButtons.NextPrevious" />
</asp.FormView>

<asp.FreeDataSource ID="EmployeeSource" OnExecuteSelected="sender => this.employees" />

@code {
                                            private Employee[] employees;

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

                                            public class Employee
    {
                                            public int EmployeeID { get; set; }

                                            public string LastName { get; set; }

                                            public string FirstName { get; set; }

                                            public string Title { get; set; }

                                            public string Address { get; set; }

                                            public string City { get; set; }

                                            public string CountryRegion { get; set; }

                                            public string Phone { get; set; }

                                            public string PhotoPath { get; set; }
    }
}

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

<asp.FormView DataSourceID="EmployeeSource"
                                            AllowPaging="true"
                                            DataKeyNames="EmployeeID"
                                            HeaderText="Employee Record"
                                            EmptyDataText="No employees found."
                                            OnItemUpdating="this.EmployeeFormView_ItemUpdating"
                                            OnModeChanging="this.EmployeeFormView_ModeChanging">
                                            <HeaderStyle BackColor="CornFlowerBlue"
                                            ForeColor="White"
                                            FontSize="14"
                                            HorizontalAlign="HorizontalAlign.Center"
                                            Wrap="false" />
                                            <RowStyle BackColor="LightBlue"
                                            Wrap="false" />
                                            <PagerStyle BackColor="CornFlowerBlue" />
                                            <ItemTemplate TItem="Employee">
                                            <table>
                                            <tr>
                                            <td rowspan="5">
                                            <asp.Image ImageUrl="@("img/" + context.PhotoPath)"
                                            AlternateText="@context.LastName" />
                                            </td>
                                            <td>
                                            <b>Name:</b>
                                            </td>
                                            <td>
                                            @context.FirstName @context.LastName
                                            </td>
                                            </tr>
                                            <tr>
                                            <td>
                                            <b>Title:</b>
                                            </td>
                                            <td>
                                            @context.Title
                                            </td>
                                            </tr>
                                            <tr style="height:150px; vertical-align:top;">
                                            <td>
                                            <b>Address:</b>
                                            </td>
                                            <td>
                                            @context.Address<br />
                                            @context.City @context.CountryRegion
                                            </td>
                                            </tr>
                                            <tr>
                                            <td>
                                            <b>Phone:</b>
                                            </td>
                                            <td>
                                            @context.Phone
                                            </td>
                                            </tr>
                                            <tr>
                                            <td colspan="2">
                                            <asp.LinkButton Text="Edit" CommandName="Edit" />
                                            </td>
                                            </tr>
                                            </table>
                                            </ItemTemplate>
                                            <EditItemTemplate TItem="Employee">
                                            <table>
                                            <tr>
                                            <td rowspan="5">
                                            <asp.Image ImageUrl="@("img/" + context.PhotoPath)"
                                            AlternateText="@context.LastName" />
                                            </td>
                                            <td>
                                            <b>Name:</b>
                                            </td>
                                            <td>
                                            <asp.TextBox @bind-Text="context.FirstName" />
                                            <asp.TextBox @bind-Text="context.LastName" />
                                            </td>
                                            </tr>
                                            <tr>
                                            <td>
                                            <b>Title:</b>
                                            </td>
                                            <td>
                                            <asp.TextBox @bind-Text="context.Title" />
                                            </td>
                                            </tr>
                                            <tr style="height:150px; vertical-align:top;">
                                            <td>
                                            <b>Address:</b>
                                            </td>
                                            <td>
                                            <asp.TextBox @bind-Text="context.Address" /><br />
                                            <asp.TextBox @bind-Text="context.City" />
                                            <asp.TextBox @bind-Text="context.CountryRegion" />
                                            </td>
                                            </tr>
                                            <tr>
                                            <td>
                                            <b>Phone:</b>
                                            </td>
                                            <td>
                                            <asp.TextBox @bind-Text="context.Phone" />
                                            </td>
                                            </tr>
                                            <tr>
                                            <td colspan="2">
                                            <asp.LinkButton Text="Update" CommandName="Update" />
                                            <asp.LinkButton Text="Cancel" CommandName="Cancel" />
                                            </td>
                                            </tr>
                                            </table>
                                            </EditItemTemplate>
                                            <PagerSettings Position="PagerPosition.Bottom"
                                            Mode="PagerButtons.Numeric" />
</asp.FormView>

<br />
<br />

<asp.Label @ref="this.message"
                                            ForeColor="Red" />

<asp.FreeDataSource ID="EmployeeSource" OnExecuteSelected="sender => this.employees"
                                            OnExecuteUpdated="this.EmployeeSource_ExecuteUpdated" />

@code {
                                            private Employee[] employees;
                                            private Label message;

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

                                            protected void EmployeeFormView_ItemUpdating(object sender, FormViewUpdateEventArgs e)
    {
                                            // Validate the field values entered by the user. This
                                            // example determines whether the user left any fields
                                            // empty. Use the NewValues property to access the new
                                            // values entered by the user.
        ArrayList emptyFieldList = ValidateFields(e.NewValues);

                                            if (emptyFieldList.Count > 0)
        {
                                            // The user left some fields empty. Display an error message.

                                            // Use the Keys property to retrieve the key field value.
                                            string keyValue = e.Keys["EmployeeID"].ToString();

            message.Text = "You must enter a value for each field of record " +
              keyValue + ".<br/>The following fields are missing:<br/><br/>";

                                            // Display the missing fields.
                                            foreach (string value in emptyFieldList)
            {
                                            // Use the OldValues property to access the original value
                                            // of a field.
                message.Text += value + " - Original Value = " +
                  e.OldValues[value].ToString() + "<br />";
            }

                                            // Cancel the update operation.
            e.Cancel = true;
        }
                                            else
        {
                                            // The field values passed validation. Clear the
                                            // error message label.
            message.Text = "";
        }
    }

                                            protected ArrayList ValidateFields(IOrderedDictionary list)
    {
                                            // Create an ArrayList object to store the
                                            // names of any empty fields.
        ArrayList emptyFieldList = new ArrayList();

                                            // Iterate though the field values entered by
                                            // the user and check for an empty field. Empty
                                            // fields contain a null value.
                                            foreach (DictionaryEntry entry in list)
        {
                                            if (string.Empty.Equals(entry.Value))
            {
                                            // Add the field name to the ArrayList object.
                emptyFieldList.Add(entry.Key.ToString());
            }
        }

                                            return emptyFieldList;
    }

                                            protected void EmployeeFormView_ModeChanging(object sender, FormViewModeEventArgs e)
    {
                                            if (e.CancelingEdit)
        {
                                            // The user canceled the update operation.
                                            // Clear the error message label.
            message.Text = "";
        }
    }

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

                                            public class Employee
    {
                                            public int EmployeeID { get; set; }

                                            public string LastName { get; set; }

                                            public string FirstName { get; set; }

                                            public string Title { get; set; }

                                            public string Address { get; set; }

                                            public string City { get; set; }

                                            public string CountryRegion { get; set; }

                                            public string Phone { get; set; }

                                            public string PhotoPath { get; set; }
    }
}

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

<asp.FormView DataSourceID="EmployeeSource"
                                            AllowPaging="true"
                                            DataKeyNames="EmployeeID"
                                            EmptyDataText="No employees found.">
                                            <RowStyle BackColor="LightGreen"
                                            Wrap="false" />
                                            <InsertRowStyle BackColor="LightBlue"
                                            Wrap="false" />
                                            <ItemTemplate TItem="Employee">
                                            <table>
                                            <tr>
                                            <td>
                                            <b>Name:</b>
                                            </td>
                                            <td>
                                            @context.FirstName @context.LastName
                                            </td>
                                            </tr>
                                            <tr>
                                            <td>
                                            <b>Title:</b>
                                            </td>
                                            <td>
                                            @context.Title
                                            </td>
                                            </tr>
                                            <tr>
                                            <td colspan="2">
                                            <asp.LinkButton Text="New" CommandName="New" />
                                            </td>
                                            </tr>
                                            </table>
                                            </ItemTemplate>
                                            <InsertItemTemplate TItem="Employee">
                                            <table>
                                            <tr>
                                            <td>
                                            <b>Name:</b>
                                            </td>
                                            <td>
                                            <asp.TextBox @bind-Text="context.FirstName" />
                                            <asp.TextBox @bind-Text="context.LastName" />
                                            </td>
                                            </tr>
                                            <tr>
                                            <td>
                                            <b>Title:</b>
                                            </td>
                                            <td>
                                            <asp.TextBox @bind-Text="context.Title" />
                                            </td>
                                            </tr>
                                            <tr>
                                            <td colspan="2">
                                            <asp.LinkButton Text="Insert" CommandName="Insert" />
                                            <asp.LinkButton Text="Cancel" CommandName="Cancel" />
                                            </td>
                                            </tr>
                                            </table>
                                            </InsertItemTemplate>
</asp.FormView>

<asp.FreeDataSource ID="EmployeeSource" OnExecuteSelected="sender => this.employees"
                                            OnExecuteInserted="this.EmployeeSource_ExecuteInserted" />

@code {
                                            private Employee[] employees;

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

                                            protected void EmployeeSource_ExecuteInserted(object sender, IDictionary values)
    {
                                            // Insert record.
        Employee employee = new Employee().Apply(() => values)
            .Apply(() => new { CustomerID = employees.Max(a => a.EmployeeID) + 1 });
        employees = employees.Union(new Employee[] { employee }).ToArray();
    }

                                            public class Employee
    {
                                            public int EmployeeID { get; set; }

                                            public string LastName { get; set; }

                                            public string FirstName { get; set; }

                                            public string Title { get; set; }

                                            public string Address { get; set; }

                                            public string City { get; set; }

                                            public string CountryRegion { get; set; }

                                            public string Phone { get; set; }

                                            public string PhotoPath { get; set; }
    }
}