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.

Comments

Popular posts from this blog

ASP.NET Core 6: Adding Custom Middleware and Logging the Error Message in Database

Uploading File to Azure BLOB using Node.js and Express-FileUpload

Passing Data Across Blazor Components