Chandradev's Blog

Here is the basic syntax for dropdown databinding and validation logic in Blazor

@page "/contact"
@inject IContactUs ContactUsService

<div class="container">
    <fieldset class="border p-2">
        <legend class="float-none w-auto">Let's build your own insurance company.</legend>
        <div class="row p-3">
            <div class="col">
                <select id="SearchId" name="CategoryId" @onchange="CategoryChangeEvent" class="form-control">
                    <option>@InitialCategoryText</option>
                    @foreach (var item in LocalData)
                    {
                        <option value="@item.CategoryName">@item.CategoryName</option>
                    }
                </select>
            </div>
        </div>

        <div hidden="@VisibleSubcategory" class="row p-3">
            <div class="col">
                <select id="SubCategoryId" name="SubCategoryName" @onchange="SubCategoryChangeEvent" class="form-control">
                    <option>@InitialSubCateText</option>
                    @foreach (var item in LocalSubCatData)
                    {
                        <option value="@item.SubCategoryName">@item.SubCategoryName</option>
                    }
                </select>
            </div>
        </div>
        <div class="p-3">
            <button class="btn btn-info" type="submit">START BUILDING</button>
        </div>

    </fieldset>
    <br />
    <div hidden="@VisibleContactUs">
        <fieldset class="border p-2">
            <legend class="float-none w-auto">Contact Us</legend>
            <div>
                <EditForm Model="objContactUs" OnValidSubmit="SaveData">
                    <DataAnnotationsValidator />
                    <div class="container">
                        <div class="row my-3">
                            <div class="col">
                                <InputText class="form-control" @bind-Value="@objContactUs.Name" placeholder="Your Name" />
                                <ValidationMessage For="@(() => objContactUs.Name)" />
                            </div>
                            <div class="col">
                                <InputText class="form-control" @bind-Value="@objContactUs.PhoneNum" placeholder="Your Phone" />
                                <ValidationMessage For="@(() => objContactUs.PhoneNum)" />
                            </div>
                            <div class="col">
                                <InputText class="form-control" @bind-Value="@objContactUs.EmailId" placeholder="Your Email" />
                                <ValidationMessage For="@(() => objContactUs.EmailId)" />
                            </div>
                        </div>
                        <div class="row p-2">
                            <InputTextArea class="form-control" @bind-Value="@objContactUs.Message" placeholder="Your Message" />
                            <ValidationMessage For="@(() => objContactUs.Message)" />
                        </div>
                        <div class="row my-3">
                            <div class="col">
                                <InputText class="form-control" @bind-Value="@objContactUs.Category" placeholder="Your Industry" />
                                <ValidationMessage For="@(() => objContactUs.Category)" />
                            </div>
                            <div class="col">
                                <InputText class="form-control" @bind-Value="@objContactUs.SubCategory" placeholder="Your Profession" />
                                <ValidationMessage For="@(() => objContactUs.SubCategory)" />
                            </div>
                        </div>

                        <div class="text-center">
                            <button class="btn btn-info" type="submit">Send Message</button>
                        </div>
                    </div>
                </EditForm>
            </div>
        </fieldset>
    </div>
    <br />
</div>

@code {
    private TblContactUs objContactUs = new TblContactUs();
    public string InitialCategoryText { get; set; } = "Search Industry";
    public string InitialSubCateText { get; set; } = "Search Profession";

    public bool VisibleSubcategory { get; set; } = true;
    public bool VisibleContactUs { get; set; } = true;

    private void CategoryChangeEvent(ChangeEventArgs e)
    {
        objContactUs.Category = e.Value.ToString();
    }
    private void SubCategoryChangeEvent(ChangeEventArgs e)
    {
        objContactUs.SubCategory = e.Value.ToString();
    }

    List<TblCategory> LocalData = new List<TblCategory> {
    new TblCategory() { CategoryId= "1", CategoryName= "Aerospace" },
    new TblCategory() { CategoryId= "2", CategoryName= "Automotive" },
    };

    List<TblSubCategory> LocalSubCatData = new List<TblSubCategory> {
    new TblSubCategory() { SubCategoryId= "1", SubCategoryName= "Motor Vehicle Parts Manufacturing" },
    new TblSubCategory() { SubCategoryId= "2", SubCategoryName= "Oilseed and Grain Farming" },
    };

    private void SaveData()
    {
        var msg = ContactUsService.SaveContactUs(objContactUs);
        objContactUs.Category = string.Empty;
        objContactUs.EmailId = string.Empty;
        objContactUs.PhoneNum = string.Empty;
        objContactUs.SubCategory = string.Empty;
        objContactUs.Name = string.Empty;
        objContactUs.Message = string.Empty;
    }

}