Sample of a Data Form that uses dapper for data persistence

[John Jensen]

Do you have a sample project of a data form that performs CRUD with dapper using SQL Server as a back end?

[Priyanka Karthikeyan]

Hi John Jensen,

 

Thank you for reaching out to us.

 

We have prepared a sample demonstrating how to perform CRUD operations, such as create, editing and deleting entries, using the SfDataForm component in a Blazor application. Please find the code snippet and sample below for your reference:

 

 

<h3>Employee Management</h3>
<SfDialog Visible=@IsVisible Width="300px" AllowDragging=true IsModal=true ShowCloseIcon=true Header="Employee Details">
    <DialogTemplates>
        <Content>
            <SfDataForm ID="OrderEditForm" EditContext="editContext" OnSubmit="@SubmitForm" ButtonsAlignment="FormButtonsAlignment.Center">
                <FormValidator>
                    <DataAnnotationsValidator />
                </FormValidator>
                <FormItems>
                    <FormAutoGenerateItems />
                </FormItems>
                <FormButtons>
                    <SfButton IsPrimary=true>Save</SfButton>
                </FormButtons>
            </SfDataForm>
        </Content>
    </DialogTemplates>
</SfDialog>
<SfButton IsPrimary=true OnClick="Save">Add New</SfButton>
<table class="table">
    <thead>
        <tr>
            <th>Employee ID</th>
            <th>Name</th>
            <th>Date Of Birth</th>
            <th>Designation</th>
            <th>Salary</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var employee in employeesList)
        {
            <tr>
                <td>@employee.Id</td>
                <td>@employee.Name</td>
                <td>@employee.DateOfBirth</td>
                <td>@employee.Designation</td>
                <td>@employee.Salary</td>
                <td>
                    <SfButton @onclick="() => EditEmployee(employee)">Edit</SfButton>
                    <SfButton @onclick="() => DeleteEmployee(employee.Id)">Delete</SfButton>
                </td>
            </tr>
        }
    </tbody>
</table>

 

@code {
    private bool IsVisible { get; set; } = false;
    IEnumerable<EmployeeDetails> employeesList;
    public EmployeeDetails EmployeeModel { get; set; } = new EmployeeDetails();
    EditContext editContext;

 

    EmployeeCrud employeeCrudService { get; set; } = new EmployeeCrud();

 

    protected override void OnInitialized()
    {
        employeesList = employeeCrudService.GetAllEmployees();
        editContext = new EditContext(EmployeeModel);
        editContext.OnFieldChanged += EditContext_OnFieldChanged;
    }
    void SubmitForm()
    {
        if (editContext.Validate())
        {
            if (EmployeeModel.Id == 0)
            {
                employeeCrudService.AddEmployee(EmployeeModel);
            }
            else
            {
                employeeCrudService.UpdateEmployee(EmployeeModel);
            }
            EmployeeModel = new EmployeeDetails();
            editContext = new EditContext(EmployeeModel);
            employeesList = employeeCrudService.GetAllEmployees();
            IsVisible = false;
        }
    }

 

    void EditEmployee(EmployeeDetails employee)
    {
        IsVisible = true;
        EmployeeModel = employee;
        editContext = new EditContext(EmployeeModel);
    }

 

    void DeleteEmployee(int id)
    {
        employeeCrudService.DeleteEmployee(id);
        employeesList = employeeCrudService.GetAllEmployees();
    }
    void Save()
    {
        EmployeeModel = new EmployeeDetails();
        editContext = new EditContext(EmployeeModel);
        // show the dialog
        IsVisible = true;
    }
    private void EditContext_OnFieldChanged(object sender, FieldChangedEventArgs e)
    {
        
    }

 

}

 

 

Regards,

Priyanka K

Attachment: BlazorDataFormCRUD_6aedcf63.zip

[John Jensen]

Priyanka, thank you for the code... it definitely helps.  I was hoping to see a project that uses Dapper as the back-end connecting to a SQL Server Database, but this definitely gets me one step closer... THANK YOU

[Kalpana Ganesan]

Hi John,

You are welcome. Please get back to us for further assistance.

Regards,

Kalpana.