Month: March 2022

How to refresh Child component from Parent in Blazor

ChandradevLeave a comment

Step 1: Create the child component like thiss

<h3>HelloWorld</h3>
<p>Current Datetime :@CurrentDate</p>

@code {
    public string? CurrentDate { get; set; } = System.DateTime.Now.ToString();
    public void RefreshMe()
    {
        CurrentDate= System.DateTime.Now.ToString();
        StateHasChanged();
    }

}

Step 2: Call this refresh method in parent component like this

@page "/"

<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />

<HelloWorld @ref="helloWorld"></HelloWorld>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

<p role="status">Current count: @currentCount</p>

@code {
    private int currentCount = 0;
    protected HelloWorld helloWorld;

    private void IncrementCount()
    {
        currentCount++;
        helloWorld.RefreshMe();
    }
}

Syntax for Blazor basic dropdown and Entry Screen with Validation

ChandradevLeave a comment

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;
    }

}

AutoComplete with Blazorised Textbox

Chandradev3 Comments

Currently i have used this control in one of my client blazor project. It is very handy and completely free to use.
@page "/"
@using Blazorise.Components

<Autocomplete TItem="Countries"
              TValue="string"
              Data="@LocalData"
              TextField="@(( item ) => item.Name)"
              ValueField="@(( item ) => item.Code)"
              Placeholder="Search..."
              Filter="AutocompleteFilter.StartsWith"
              @bind-SelectedValue="@selectedSearchValue"
              @bind-SelectedText="selectedAutoCompleteText"
              FreeTyping
              CustomFilter="@(( item, searchValue ) => item.Name.IndexOf( searchValue, 0, StringComparison.CurrentCultureIgnoreCase ) >= 0 )">
    <NotFoundContent> Sorry... @context was not found! :( </NotFoundContent>
</Autocomplete>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Clear Text</button>

@code
{
    public string? selectedSearchValue { get; set; }
    public string? selectedAutoCompleteText { get; set; }

    public class Countries
    {
        public string Name { get; set; }
        public string Code { get; set; }
    }

    List<Countries> LocalData = new List<Countries> {
        new Countries() { Name = "Australia", Code = "AU" },
        new Countries() { Name = "Bermuda", Code = "BM" },
        new Countries() { Name = "Canada", Code = "CA" },
        new Countries() { Name = "Cameroon", Code = "CM" },
        new Countries() { Name = "Denmark", Code = "DK" }
    };

    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
        this.selectedAutoCompleteText = string.Empty;
    }
}