Dynamically Create and Delete Elements in Blazor

-
Dynamically Create and Delete Elements in Blazor

This blog is going to explain how to create and delete elements in Blazor. Let's see step by step

Step 1: Create Dynamic Element

The code for creating dynamic elements is shown below. I created a class named Movie with the fields Name, ReleasedYear, and CoProduction. Inside the for loop, three textboxes were added to collect movie information. I also included a button to generate a new row of text boxes.

@page "/"
<h4>Dynamic Elements</h4>
<style>
    body {
        font-size: 12px;
    }
 
    table {
        width: 50% !important;
    }
</style>
 
<table class="table">
    <thead>
        <tr>
            <th>Movie Name</th>
            <th>Release Year</th>
            <th>Co Production</th>
        </tr>
    </thead>
    <tbody>
        @for (int i = 0; i < movies.Count; i++)
        {
            int index = i;
            <tr>
                <td><input type="text" value="@movies[index].Name" /> </td>
                <td><input type="number" value="@movies[index].ReleasedYear" /> </td>
                <td><input type="text" value="@movies[index].CoProduction" /> </td>
            </tr>
        }
    </tbody>
</table>
 
<button @onclick="AddNewRow" class="btn btn-primary">Create new row</button>
 
@code {
    public class Movie
    {
        public string? Name { get; set; }
        public int? ReleasedYear { get; set; }
        public string? CoProduction { get; set; }
    }
 
    private List<Movie> movies = new();
 
    private void AddNewRow() => movies.Add(new Movie { });
}

The image below is the result of the aforementioned code. When the user clicks the create new button, dynamic textbox elements are created.

Dynamically Create and Delete Elements in Blazor

Step 2: Set Values for Dynamic Elements

The next step is to set the values for the dynamic components. In the code snippet below the @onchange event is added to all textboxes. Also, a method to update values has been added.

<tr>
    <td><input type="text" value="@movies[index].Name" @onchange="(e) => UpdateName(index, e.Value.ToString())" /> </td>
    <td><input type="number" value="@movies[index].ReleasedYear" @onchange="(e) => UpdateYear(index, e.Value.ToString())" /> </td>
    <td><input type="text" value="@movies[index].CoProduction" @onchange="(e) => UpdateCoProduction(index, e.Value.ToString())" /> </td>
</tr>

The update methods assign the textbox values to the values of the movies object.

@code {
....
....
....
    private void UpdateName(int i, string value) => movies[i].Name = value;
    private void UpdateYear(int i, string value) => movies[i].ReleasedYear = int.Parse(value);
    private void UpdateCoProduction(int i, string value) => movies[i].CoProduction = value;
}

I have displayed the movie values using a foreach loop to ensure that the values are added.

@if(movies.Count>0)
{
<table class="table">
    <thead>
        <tr>
            <th>Movie Name</th>
            <th>Release Year</th>
            <th>Co Production</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in movies)
        {
            <tr>
                <td>@item.Name</td>
                <td>@item.ReleasedYear</td>
                <td>@item.CoProduction</td>
            </tr>
         }
    </tbody>
</table>
}

The image below is the result of the aforementioned code. When a user enters movie information, it is saved in the movies object and displayed.

Dynamically Create and Delete Elements in Blazor

Step 3: Delete Dynamic Elements

To remove dynamically generated rows. I've included a Remove button.

@for (int i = 0; i < movies.Count; i++)
{
    int index = i;
    <tr>
        <td><input type="text" value="@movies[index].Name" @onchange="(e) => UpdateName(index, e.Value.ToString())" /> </td>
        <td><input type="number" value="@movies[index].ReleasedYear" @onchange="(e) => UpdateYear(index, e.Value.ToString())" /> </td>
        <td><input type="text" value="@movies[index].CoProduction" @onchange="(e) => UpdateCoProduction(index, e.Value.ToString())" /> </td>
        <td>
            <button @onclick="() => RemoveRow(index)" class="btn btn-secondary">Remove</button>
        </td>
    </tr>
}

The code for the remove button is as follows. It deletes a specific indexed item.

@code {
 ...
    ...
    ...
    private void RemoveRow(int i) => movies.RemoveAt(i);
    ...
    ...
    ...
}

The image below is the final output.

Dynamically Create and Delete Elements in Blazor
The whole coding is shown below.
@page "/"
<h4>Dynamic Elements</h4>
<style>
    body {
        font-size: 12px;
    }
    table {
        width: 50% !important;
    }
</style>
@if(movies.Count>0)
{
<table class="table">
    <thead>
        <tr>
            <th>Movie Name</th>
            <th>Release Year</th>
            <th>Co Production</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in movies)
        {
            <tr>
                <td>@item.Name</td>
                <td>@item.ReleasedYear</td>
                <td>@item.CoProduction</td>
            </tr>
        }
    </tbody>
</table>
}
<hr />
<table class="table">
    <thead>
        <tr>
            <th>Movie Name</th>
            <th>Release Year</th>
            <th>Co Production</th>
        </tr>
    </thead>
    <tbody>
    @for (int i = 0; i < movies.Count; i++)
    {
        int index = i;
        <tr>
            <td><input type="text" value="@movies[index].Name" @onchange="(e) => UpdateName(index, e.Value.ToString())" /> </td>
            <td><input type="number" value="@movies[index].ReleasedYear" @onchange="(e) => UpdateYear(index, e.Value.ToString())" /> </td>
            <td><input type="text" value="@movies[index].CoProduction" @onchange="(e) => UpdateCoProduction(index, e.Value.ToString())" /> </td>
            <td>
                <button @onclick="() => RemoveRow(index)" class="btn btn-secondary">Remove</button>
            </td>
        </tr>
    }
    </tbody>
</table>
<button @onclick="AddNewRow" class="btn btn-primary">Create new row</button>

@code {
    public class Movie
    {
        public string? Name { get; set; }
        public int? ReleasedYear { get; set; }
        public string? CoProduction { get; set; }
    }
    private List<Movie> movies = new();
    private void RemoveRow(int i) => movies.RemoveAt(i);
    private void AddNewRow() => movies.Add(new Movie { });
    private void UpdateName(int i, string value) => movies[i].Name = value;
    private void UpdateYear(int i, string value) => movies[i].ReleasedYear = int.Parse(value);
    private void UpdateCoProduction(int i, string value) => movies[i].CoProduction = value;
}

I hope this helps you. Keep coding.


Comments

Post a Comment

Popular posts from this blog

Entity Framework Core (EF) with SQL Server LocalDB

-
Image
This blog is going to illustrate how to implement Entity Framework (EF) Core with SQL Server LocalDB. The Entity Framework Core enables access to data from the database. This allows developers to avoid having to write most of the data access code. And the SQL Server LocalDB works similarly to the SQL SERVER with few features. You can get the LocalDB when you install visual studio or visual studio express. You can find the .mdf and _log.ldf files in the C:/Users/{user} directory. Let see how to create a SQL Server LocalDB and implement Entity Framework Core Step 1: The first step is to add a connection. In the menu -> click Tools and select Connect to Database It will display the Add Connection window. Enter (localdb)\mssqllocaldb in the server name textbox. Then in the Select or enter a database, select master and click ok Now in the server explorer, you can find the master DB containing Tables, Views, Stored
Read more

Creating a C# Azure Function with Visual Studio: Step-by-Step Guide

-
Image
Azure Functions is a serverless computing service provided by Microsoft Azure, enabling developers to create applications without worrying about server maintenance and infrastructure. Using Azure Functions, developers can create event-driven, scalable, and highly available applications. In this blog, we will explain how to create an Azure function using Visual Studio 2022 with C# as the programming language. Before we begin, there are some prerequisites to consider. You will need an active Azure account subscription, Visual Studio 2022, and Azure Functions and Azure Storage extensions for Visual Studio. Step 1: Creating a new Azure Functions project in Visual Studio To create a new project, open Visual Studio 2022 and click on "Create a new project". In the "Create a new project" window, search for "Azure Functions" and select "Azure Functions" from the list of project templates. Next, enter the project name, which
Read more

Exploring EventCallback in Blazor: Building Interactive Components

-
Image
Introduction: Blazor is a powerful framework for building web applications using C# instead of JavaScript. It allows developers to create interactive and dynamic user interfaces with ease. One of the key features in Blazor is the EventCallback<T> pattern, which enables communication between components through events. In this blog post, we will explore how to use the EventCallback<T> pattern in Blazor by building a simple example. Creating the Event-Driven Component: Let's start by creating a Blazor component called MyComponent. This component will raise an event when a button is clicked. Here's the code for the MyComponent.razor file: MyComponent.razor < h3 > My Component < / h3 > < button @onclick = " RaiseEvent " > Raise Event < / button > @code { [ Parameter ] public EventCallback < string > EventRaised { get ; set ; } private async Task RaiseEvent ( ) { await EventRais
Read more