version:asp .net core 3.x
blazor server Modal
Table of Contents
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: create ModalPromptComponent_KLine.razor
\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
div>
<QuickGrid Class="table" Items="characters" Pagination="pagination">
<PropertyColumn Property="BaseData => BaseData.StockCode" Title="股票代码" Sortable="true" />
<PropertyColumn Property="BaseData => BaseData.m_datebegin" Title="上市日期" Sortable="true" />
<PropertyColumn Property="BaseData => BaseData.m_dataupdate" Title="数据更新日期" Sortable="true" />
<PropertyColumn Property="BaseData => BaseData.m_datedownload" Title="下载日期" />
<PropertyColumn Property="BaseData => BaseData.m_fShare_count_a" Title="流通股数" />
<TemplateColumn Context="BaseData">
<button class="btn btn-default" @onclick="@(async () => await displayKlineAsync(BaseData.StockCode))">详情（异步调用）</button>
<button class="btn btn-default" @onclick="@(() => displayKline(BaseData.StockCode))">详情(同步调用)</button>
<a href="@($"movies/edit?id={BaseData.StockCode}")">Edit</a> |
<a href="@($"movies/details?id={BaseData.StockCode}")">Details</a> |
<a href="@($"movies/delete?id={BaseData.StockCode}")">Delete</a>
</TemplateColumn>
</QuickGrid>
</div>点击按钮，对应的函数处理
@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