Blazor WebAssembly: Creating Dialog Box in Web UI

-

In this article, we will implement a Dialog Box using Bootstrap in the Blazor WebAssembly application. Since the Blazor WebAssembly is a great technology for building interactive UI using Components, the Dialog Box UI is one of the frequent UX requirements demanded by the End-Users. In the Blazor WebAssembly application, we can create a Dialog Box using Bootstrap.


Step 1: Open Visual Visual Studio 2022 and create a new Blazor WebAssembly project and name this project as Blazor_DialogBox. In this project add a new folder and name it as Models. In this folder add a new class file and name it as StateCities.cs. In this class file add State, States, City, and Cities classes. The code for these classes is shown in listing 1


namespace Blaz_CascadeDropdown.Models
{
    public class State
    {
        public int StateId { get; set; }
        public string? StateName { get; set; }
    }

    public class States : List<State>
    {
        public States()
        {
            Add(new State() { StateId = 1, StateName = "Andhra Pradesh" });
            Add(new State() { StateId = 2, StateName = "Arunachal Pradesh" });
            Add(new State() { StateId = 3, StateName = "Assam" });
            Add(new State() { StateId = 4, StateName = "Bihar" });
            Add(new State() { StateId = 5, StateName = "Chhattisgarh" });
            Add(new State() { StateId = 6, StateName = "Goa" });
            Add(new State() { StateId = 7, StateName = "Gujarat" });
            Add(new State() { StateId = 8, StateName = "Haryana" });
            Add(new State() { StateId = 9, StateName = "Himachal Pradesh" });
            Add(new State() { StateId = 10, StateName = "Jharkhand" });
            Add(new State() { StateId = 11, StateName = "Karnataka" });
            Add(new State() { StateId = 12, StateName = "Kerala" });
            Add(new State() { StateId = 13, StateName = "Maharashtra" });
        }
    }


    public class City
    {
        public int CityId { get; set; }
        public string? CityName { get; set; }
        public int StateId { get; set; }
    }

    public class Cities : List<City>
    {
        public Cities()
        {
            Add(new City() { CityId = 101, CityName = "Vizianagaram", StateId = 1 });
            Add(new City() { CityId = 102, CityName = "Prakasam", StateId = 1 });
            Add(new City() { CityId = 103, CityName = "West Godavari", StateId = 1 });
            Add(new City() { CityId = 104, CityName = "Kurnool", StateId = 1 });
            
             

            Add(new City() { CityId = 201, CityName = "Tawang", StateId = 2 });
            Add(new City() { CityId = 202, CityName = "Itanagar", StateId = 2 });
            Add(new City() { CityId = 203, CityName = "Naharlagun", StateId = 2 });
            Add(new City() { CityId = 204, CityName = "Along", StateId = 2 });

            Add(new City() { CityId = 301, CityName = "Baksa", StateId = 3 });
            Add(new City() { CityId = 302, CityName = "Jorhat", StateId = 3 });
            Add(new City() { CityId = 303, CityName = "Sivasagar", StateId = 3 });
            Add(new City() { CityId = 304, CityName = "Barpeta", StateId = 3 });
            

            Add(new City() { CityId = 401, CityName = "Araria", StateId = 4 });
            Add(new City() { CityId = 402, CityName = "Aurangabad", StateId = 4 });
            Add(new City() { CityId = 403, CityName = "Begusarai", StateId = 4 });
            Add(new City() { CityId = 404, CityName = "Patna", StateId = 4 });

            Add(new City() { CityId = 501, CityName = "Balod", StateId = 5 });
            Add(new City() { CityId = 502, CityName = "Baloda Bazar", StateId = 5 });
            Add(new City() { CityId = 503, CityName = "Balrampur", StateId = 5 });
            Add(new City() { CityId = 504, CityName = "Bastar", StateId = 5 });

            Add(new City() { CityId = 601, CityName = "North Goa", StateId = 6 });
            Add(new City() { CityId = 602, CityName = "South Goa", StateId = 6 });

            Add(new City() { CityId = 701, CityName = "Ahmedabad", StateId = 7 });
            Add(new City() { CityId = 702, CityName = "Amreli", StateId = 7 });
            Add(new City() { CityId = 703, CityName = "Baroda", StateId = 7 });
            Add(new City() { CityId = 704, CityName = "Surat", StateId = 7 });

            Add(new City() { CityId = 801, CityName = "Ambala", StateId = 8 });
            Add(new City() { CityId = 802, CityName = "Bhiwani", StateId = 8 });
            Add(new City() { CityId = 803, CityName = "Charkhi Dadri", StateId = 8 });
            Add(new City() { CityId = 804, CityName = "Fatehabad", StateId = 8 });

            Add(new City() { CityId = 901, CityName = "Bilaspur", StateId = 9 });
            Add(new City() { CityId = 902, CityName = "Chamba", StateId = 9 });
            Add(new City() { CityId = 903, CityName = "Kangra", StateId = 9 });
            Add(new City() { CityId = 904, CityName = "Kullu", StateId = 9 });

            Add(new City() { CityId = 1001, CityName = "Bokaro", StateId = 10 });
            Add(new City() { CityId = 1002, CityName = "Chatra", StateId = 10 });
            Add(new City() { CityId = 1003, CityName = "Deoghar", StateId = 10 });
            Add(new City() { CityId = 1004, CityName = "Dhanbad", StateId = 10 });

            Add(new City() { CityId = 1101, CityName = "Bagalkot", StateId = 11 });
            Add(new City() { CityId = 1102, CityName = "Ballari ", StateId = 11 });
            Add(new City() { CityId = 1103, CityName = "Bengaluru ", StateId = 11 });
            Add(new City() { CityId = 1104, CityName = "Bidar", StateId = 11 });


            Add(new City() { CityId = 1201, CityName = "Kannur", StateId = 12 });
            Add(new City() { CityId = 1202, CityName = "Kollam ", StateId = 12 });
            Add(new City() { CityId = 1203, CityName = "Kottayam ", StateId = 12 });
            Add(new City() { CityId = 1204, CityName = "Palakkad", StateId = 12 });

            Add(new City() { CityId = 1301, CityName = "Pune", StateId = 13 });
            Add(new City() { CityId = 1302, CityName = "Thane ", StateId = 13 });
            Add(new City() { CityId = 1303, CityName = "Nashik ", StateId = 13 });
            Add(new City() { CityId = 1304, CityName = "Kolhapur", StateId = 13 });

        }
    }
}

Listing 1: The Model classes    

Step 2: In the Pages folder, add a new razor component. Name this component as DialogBoxComponent.razor. In this component file, we will use EditForm to show City details e.g. CityId, CityName, and list of States as shown in listing 2  


@page "/city"
@using Blaz_CascadeDropdown.Models;

<h3>City Master</h3>
<div class="container">
    <EditForm Model="@city">
        <div class="form-group">
            <label>City Id</label>
            <InputNumber class="form-control" 
            @bind-Value="city.CityId"></InputNumber>
        </div>
        <div class="form-group">
            <label>City Name</label>
            <InputText class="form-control" 
            @bind-Value="@city.CityName"></InputText>
        </div>
         <div class="form-group">
            <label>State Name</label>
            <InputSelect class="form-control" 
            @bind-Value="@city.StateId">
                @foreach(var state in lstStates)
                {
                 <option value="@state.StateId"> @state.StateName</option>   
                }
            </InputSelect>
        </div>
    </EditForm>
</div>

@code {
    [Parameter]
    public City city { get; set; }
    private States? lstStates;


    protected override void OnInitialized()
    {
        lstStates = new States();
        base.OnInitialized();
    }
}

Listing 2: The DialogBoxComponent

As shown in Listing 2, the component has the city parameter is declared. This parameter will be used to accept the City object from the parent component to show the current component in the dialog box.

Step 3: In the Pages folder, add a new razor component and name it as DetailsComponent.razor. In this component, the list of Cities will be displayed in the HTML table. This component will use the DialogBoxComponent.  The code of the DetailsComponent is shown in listing 3


@page "/details"
@using Blaz_CascadeDropdown.Models;

<h3>City Details Component</h3>

<div class="container">
    <table class="table table-bordered table-striped table-dark">
        <thead>
            <tr>
                <td>
                    City Id
                </td>
                <td>
                    City Name
                </td>
                <td>
                    State Id
                </td>
                <td></td>
            </tr>
        </thead>
        <tbody>
           @foreach (var city in cities)
           {
             <tr>
                 <td>@city.CityId</td>
                 <td>@city.CityName</td>
                 <td>@city.StateId</td>
                  <td>
                      <input type="button" value="Show" class="btn btn-warning"
                      @onclick="@(()=>showCityDialog(city))"/>
                  </td>
             </tr>    
           }
        </tbody>
    </table>
    <br/>

@if (ShowDialog)  
{  
  
<div class="modal fade show d-block" id="cityModal" tabindex="-1"
role="dialog">  
    <div class="modal-dialog">  
        <div class="modal-content">  
            <div class="modal-header">  
                <h5 class="modal-title" id="lbl">Add City</h5>  
                <button type="button" class="close" @onclick="hideCityDialog"  
                data-dismiss="modal" aria-label="Close">  
                    <span aria-hidden="true">X</span>  
                </button>  
            </div>  
            <div class="modal-body">  
                  <DialogBoxComponent city="city"></DialogBoxComponent>
            </div>  
             <div class="modal-footer">
                <button type="button" class="btn btn-primary">Update</button>
                <button type="button" class="btn btn-secondary" 
                @onclick="hideCityDialog" data-dismiss="modal">Close</button>
            </div>
        </div>  
    </div>  
</div>  
} 
</div>

@code {
    private Cities cities;
    private bool ShowDialog = false;
    private City city;
    protected override void OnInitialized()
    {
        cities = new Cities();
        city = new City();
        base.OnInitialized();
    }
    void showCityDialog(City c)
    {
        ShowDialog = true;
        city = c;
    }
    void hideCityDialog()
    {
        ShowDialog = false;    
    }
}

Listing 3: The DetailsComponent   

The code in Listing 3 shows that the Bootstrap modal class is used. The modal-dialog contains modal-content, modal-header, modal-body, model-footer, classes. The modal-header contains an HTML button, the model-body contains DialogboxComponent. The DialogboxComponent will be shown when the City is selected by clicking on the button added from each row of the HTML table. This button is bound with the showCityDialog() method. This method accepts the selected City as an input parameter and sets the ShowDialog property to true. Once the ShowDialog property is true, the DialogboxComponent will be displayed in the Bootstrap modal dialog. The modal-footer contains Update and Close buttons. The Close button is bound with the hodeCityDialog() method and this method sets the ShowDialog property to false to close the Dialog Box when the Close button is clicked.

Step 4: Modify the NavMenu.razor by adding the new Navigation to the DetailsComponent as shown in Listing 4


  <div class="nav-item px-3">
            <NavLink class="nav-link" href="details">
                <span class="oi oi-list-rich" aria-hidden="true">
                </span> City Details
            </NavLink>
  </div>

Listing 4: The NavMenu.razor 

Run the application and click on the City Details link to show the list of the Cities in the HTML table as shown in figure 1



Figure 1: HTML table with City Details             

Click on the Show button on any of the table rows, this will show the Dialog Box with City details as shown in figure 2



Figure 2: The Dialog Box

The code for this article can be downloaded from this link.

Conclusion: The Blazor WebAssembly with Bootstrap is used to deliver great UX to the End-User.

Popular posts from this blog

Uploading Excel File to ASP.NET Core 6 application to save data from Excel to SQL Server Database

-
Image
Recently, while conducting a session on ASP.NET Core 6, my client raised a query regarding uploading excel files to the ASP.NET Core MVC application and then further saving data from excel to the SQL Server Database table. I gave him the solution and then thought to write a post on it. As we all know, the Excel Workbook is one of the most heavily used files to save data. But to persist data it is recommended that it should be stored in an SQL Server database.  If the data is stored in an SQL Server database it can be queried easily.  Figure 1, explains an implementation of the application which we are going to discuss in the article. Figure 1: The ASP.NET Core That accepts Excel files and then further store data from Excel Files in SQL Server Database The   ExcelDataReader.DataSet Library To read excel files in ASP.NET Core applications, we need to use the ExcelDataReader.DataSet package. This is a lightweight and fast library for reading Excel files in .NET applications....
Read more

ASP.NET Core 6: Downloading Files from the Server

-
Image
In this article, we will implement the file downloading feature using ASP.NET Core 6 application. In real-world applications, we can have various files like reports, spreadsheets, images, PDF documents stored on the server. (Note that all cloud-hosted applications prefer to store these files on the storage services, e.g. Blob, S3, etc.). But what if the client prefers to store files on the separate file server mapped to the web application host server? Then, in that case, we may need to download these files from the file server. In this article, we will implement exactly the same thing.   Step 1: Open Visual Studio 2022 and create a new ASP.NET Core MVC Application targetted to .NET 6. Name this application as Core6_FileDownload. In this project add a new folder and name it as ServerFiles. In this file add some images. (You can add Excel, PDF, Word, Files). Step 2: Since we need to read the ServerFiles folder using the ASP.NET Core application, we need to add the IFi...
Read more

ASP.NET Core 6: Using Entity Framework Core with Oracle Database with Code-First Approach

-
Image
In this article, we will see how to use Oracle Database with Entity Framework Core with Code-First Approach. The reason behind writing a post on this is, recently while conducting training, one of my students raised the query regarding the EF Core with Oracle. Since Oracle is one of the most powerful databases, various enterprise applications are using it for the past several years and since the .NET Core is the most popular technology for building modern apps, the scenarios for accessing the Oracle database in .NET Core apps the use Entity Framework Core is common. Oracle Data Provider for .NET Entity Framework Core The Oracle Data Provider for .NET i.e. ODP.NET is used to access data from the Oracle database in the .NET Core apps using Entity Framework Core. This uses the Oracle.EntityFrameworkCore.dll, a managed library. This data provider allows using Code-First and Database-First approaches to perform Read/Write Operations with Oracle database.    Implementation To implem...
Read more