ASP.NET Core Razor Components- Build Custom Modal Prompt Razor Components step by step（stockso）

version:asp .net core 3.x

blazor server Modal

1.Build Custom Razor Components without event

create ModalPrompt.cshtml wthout ModalPrompt.cshtml.cs

\src\RazorComponent\Stockso.RazorComponent\Components\Shared\ModalPrompt.cshtml

@*
    ModalPrompt.cshtml
*@
<div class="alert alert-secondary mt-4" role="alert">
    <span class="oi oi-pencil mr-2" aria-hidden="true"></span>
    <strong>@Title</strong>

    <span class="text-nowrap">
        Please take our
        <a target="_blank" class="font-weight-bold" href="https://go.microsoft.com/fwlink/?linkid=2069004">brief survey</a>
    </span>
    and tell us what you think.
</div>

@functions {
    // Demonstrates how a parent component can supply parameters
    [Parameter] string Title { get; set; }
}

2.use

\src\RazorComponent\Stockso.RazorComponent\Components\Pages\StockDataDatabase\StockDataDatabaseStockInfo_Search.cshtml

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

2.Build Custom Razor Components with event

step 1:

\src\BlazorServer\Stockso.BlazorServer\Shared\ModalPromptComponent_KLine.razor

@*
    参考：https://github.com/SQL-MisterMagoo/BlazorBinding
    https://docs.microsoft.com/zh-cn/aspnet/core/razor-components/components?view=aspnetcore-3.0 2019/04/15

*@
@{
}
<div>ddd</div>



@if (isAdd)
{

    <div class="modal" tabindex="-1" style="display:block" role="dialog">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">@modalTitle</h3>

                    <ul class="nav">
                        <li class="nav-item">
                            <button type="button" class="nav-link" @onclick="Show1">
                                <span aria-hidden="true">日</span>
                            </button>
                        </li>
                        <li class="nav-item">
                            <button type="button" class="nav-link" @onclick="Show2">
                                <span aria-hidden="true">周</span>
                            </button>
                        </li>
                        <li class="nav-item">
                            <button type="button" class="nav-link" @onclick="Show3">
                                <span aria-hidden="true">月</span>
                            </button>
                        </li>
                        <li class="nav-item">
                            <button type="button" class="nav-link" @onclick="Show4">
                                <span aria-hidden="true">分时</span>
                            </button>
                        </li>
                    </ul>

                    <button type="button" class="close" @onclick="closeModal">
                        <span aria-hidden="true">X</span>
                    </button>



                </div>


                <div class="modal-body">
                    <img title="" alt="股搜网" src="@daykLine">

                </div>
                <div class="modal-footer">
                    @*<button class="btn btn-block btn-info" onclick="@(async () => await SaveEmployee())" data-dismiss="modal">Save</button>*@
                </div>
            </div>
        </div>
    </div>
}





@functions {

    protected string modalTitle { get; set; }
    protected Boolean isAdd = false;
    protected Boolean isDelete = false;
    protected Boolean isView = false;
    protected string stockCode = "";

    protected string daykLine { get; set; }


    public void Show(string stockCode)
    {
        this.modalTitle = "详情信息";
        this.isAdd = true;
        this.daykLine = "http://image.sinajs.cn/newchart/daily/n/" + stockCode.ToLower() + ".gif";
        this.stockCode = stockCode;
        StateHasChanged();
    }

    public void closeModal()
    {
        this.isAdd = false;
        this.isDelete = false;
        StateHasChanged();
    }

    public void Show1()
    {
        this.modalTitle = "详情信息";
        this.isAdd = true;

        this.daykLine = "http://image.sinajs.cn/newchart/daily/n/" + this.stockCode.ToLower() + ".gif";

        StateHasChanged();
    }

    public void Show2()
    {
        this.modalTitle = "详情信息";
        this.isAdd = true;

        this.daykLine = "http://image.sinajs.cn/newchart/weekly/n/" + this.stockCode.ToLower() + ".gif";

        StateHasChanged();
    }

    public void Show3()
    {
        this.modalTitle = "详情信息";
        this.isAdd = true;

        this.daykLine = "http://image.sinajs.cn/newchart/monthly/n/" + this.stockCode.ToLower() + ".gif";

        StateHasChanged();
    }

    public void Show4()
    {
        this.modalTitle = "详情信息";
        this.isAdd = true;

        this.daykLine = "http://image.sinajs.cn/newchart/min/n/" + this.stockCode.ToLower() + ".gif";

        StateHasChanged();
    }

}

step 2: UI

\src\BlazorServer\Stockso.BlazorServer\Pages\StockDataDatabase\StockDataDatabaseStockInfo_Search.razor

<!--显示股票数据的ref组件-->
<ModalPromptComponent_KLine @ref="modalPromptComponent_KLine" />

step 3: use

\src\BlazorServer\Stockso.BlazorServer\Pages\StockDataDatabase\StockDataDatabaseStockInfo_Search.razor

@code {

    List<StockInfo> forecasts;

    int currentCount = 0;
    int indexCount = 0;

    string ResultStockCodeTable = "";


    protected string modalTitle { get; set; }
    protected Boolean isAdd = false;
    protected Boolean isDelete = false;
    protected Boolean isView = false;

    protected string daykLine { get; set; }



    protected void closeModal()
    {
        this.isAdd = false;
        this.isDelete = false;
    }


    [Parameter] public string stockCode { get; set; }

    private ModalPromptComponent_KLine modalPromptComponent_KLine;

    private async Task OnSomething(string stockCode)
    {
        modalPromptComponent_KLine.Show(stockCode);
    }

    void displayKline(string stockCode)
    {
        modalPromptComponent_KLine.Show(stockCode);
    }

}

.Net 8.x

https://onexception.dev/news/1319949/manually-showing-bootstrap5-modal-in-blazor