Blazor 开发

原创已于 2023-03-30 16:04:41 修改 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Blazor

于 2022-06-17 22:06:41 首次发布

Blazor 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在Razor页面中通过`@injectNavigationManager`进行页面跳转，使用`bind-Field`动态插入Progress控件，根据数据操作按钮的显示与隐藏，实现类似Ajax的异步更新，并展示了如何在表格中嵌入Timeline组件以及动态附件下载的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.跳转页面

在视图razor页面头部增加

@inject NavigationManager NavigationManager

在OnInitializedAsync()内增加

NavigationManager.NavigateTo("http://baidu.com");

2.表字段内部增加控件

3.数据表格操作按钮，根据行数据信息显示和隐藏按钮，关键为IsShow="context.btn_claim_state"

<TableCellButton Size="Size.ExtraSmall" IsShow="context.btn_claim_state" Color="Color.Danger" Text="认领" OnClick="() => CreateReply(context)" />

4.类似ajax功能

前端：

Model.Entity.responsible = responsible;//赋值
Model.Entity.Time_complete = date2.Replace("完成日期:", "");
var obj = await WtmBlazor.Api.CallAPI("/api/Task_dl/CreateReply_tj", HttpMethodEnum.POST, Model);
var DataJson = JObject.Parse(obj.Data);
//await ToastService.Success("信息", DataJson["msg"].ToString(), autoHide: true);
await ShowMessage(DataJson["msg"].ToString());
if (DataJson["code"].ToString() == "1")
{
OnClose();
var rv = await WtmBlazor.Api.CallAPI<Task_dlVM>($"/api/Task_dl/{id}");
Model = rv.Data;
}

后端：

[ActionDescription("CreateReply_tj")]
[HttpPost("CreateReply_tj")]
public IActionResult CreateReply_tj(Task_dlVM vm)
{
string code = "";
string msg = "";
string res = vm.Entity.responsible.Trim();
string time_c = vm.Entity.Time_complete;
string userid= Wtm.LoginUserInfo.ITCode;
var t5 = _fsql.Update<Model.Task_dl>()
.Set(a => new Model.Task_dl {
responsible=res,Time_complete=time_c
,btn_claim_state=false,btn_reply_state=true

})//多个字段信息修改
.Where(a => a.ID==vm.Entity.ID).ExecuteAffrows();
if (t5 > 0)
{
code = "1";
msg = "认领成功！";
}
else
{
code = "0";
msg = "认领失败！";
}
return Ok(new { code=code,msg=msg });// 用 OK JsonResult 都可以
}

5.表字段内加控件，如timeline

6.时间轴

调用采取一下点击事件

private async Task OnCreateClick1(IEnumerable<TimeLine1_View> items)
{
if (await OpenDialog<Show>("时间轴",null,Size.Small) == DialogResult.Yes)
{
await dataTable.QueryAsync();
}
}

（1）创建展示页面 Show.razor

@page "/_Admin/TimeLine1/Show"
@using Base.ViewModel._Admin.TimeLine1VMs;
@inherits BasePage

@inject IStringLocalizer<BootstrapBlazor.Components.Timeline> Localizer

<div style="height:500px;max-height:500px;overflow:auto;">
<Timeline Items="TimelineItems1"></Timeline>
</div>
@code {
private List<TimelineItem> TimelineItems1 = new List<TimelineItem>();
protected override async Task OnInitializedAsync()
{
for(int i = 0; i < 21; i++)
{
IDictionary<string, object> parameters = new Dictionary<string, object> { { "id", i.ToString() } };
TimelineItem t = new TimelineItem();
if (i == 0)
{
t.Color = Color.Success;
}
t.Component = BootstrapDynamicComponent.CreateComponent<Cs>(parameters);
TimelineItems1.Add(t);
}
await base.OnInitializedAsync();
}
}
（2）创建单个时间点显示内容页面 Cs.razor

@page "/_Admin/TimeLine1/Cs/{id}"
@using Base.ViewModel._Admin.TimeLine1VMs;
@using System.IO;
@inherits BasePage
@inject DownloadService DownloadService

<div class="div1" >
<span >@d.ToString("yyyy-MM-dd HH:mm:ss") </span>
<span>发布</span>
<span>创建部门：***</span>
<span>创建人：***</span>
</div>
<div>
测试1111
</div>
<div style="display:@isshow">
测试
</div>
<div>
<Button IsAsync="true" Icon="fa-solid fa-download" Text="下载全部文档" OnClickWithoutRender="DownloadPhysicalFileAsync"></Button>
</div>
<style type="text/css">
.div1 span{
margin-right:40px;
}
</style>
@code {
private DateTime d = DateTime.Now;
private string isshow = "none";
private TimeLine1VM Model = new TimeLine1VM();
private ValidateForm vform { get; set; }
[Parameter]
public string id { get; set; }

protected override async Task OnInitializedAsync()
{
int id1 = 0;
int.TryParse(id, out id1);
d = d.AddDays(id1);
if (id1 % 2 != 0)
{
isshow = "block";
}
await base.OnInitializedAsync();
}
public void OnClose()
{
CloseDialog();
}
/// <summary>
/// 下载文件
/// </summary>
/// <returns></returns>
private async Task DownloadPhysicalFileAsync()
{
try
{

//多文件下载
for(int i = 0; i < 3; i++)
{
string i1 = "";
if (i != 0) i1 = i.ToString();
string filePath = System.Environment.CurrentDirectory + "\\..\\Base.Shared\\wwwroot\\images\\logo"+i1+".png";
await using var stream = File.OpenRead(filePath);
await DownloadService.DownloadFromStreamAsync(filePath, stream);
}
}
catch (FileNotFoundException msg)
{

}
}
}
7.时间轴中动态附件下载

div下

<div>
@{
for(int i1 = 0; i1 < files.Count; i1++)
{
string t = files[i1].name;
string id = files[i1].id;
string icon = files[i1].icon;
<Button ButtonStyle="ButtonStyle.Round" Color="Color.Light" Icon="@icon" Text="@t" OnClick="@(() => DownloadPhysicalFileAsync1(id))" style="margin-right:10px;color:black;"></Button>
}
}
</div>

code下：

class file
{
public string file_type { get; set; }
public string name { get; set; }
public string icon{ get; set; }
public string id { get; set; }
}
List<file> files = new List<file>();

OnInitializedAsync方法下

///追加下载文件的集合
file f1 = new file();
f1.file_type = "xls";
f1.icon = "fas fa-file-excel";
f1.name = "测试1.xls";
f1.id = "0";
files.Add(f1);

f1 = new file();
f1.file_type = "doc";
f1.icon = "fas fa-file-word";
f1.name = "测试1.doc";
f1.id = "1";
files.Add(f1);

f1 = new file();
f1.file_type = "zip";
f1.icon = "fas fa-file-zipper";
f1.name = "测试1.zip";
f1.id = "2";
files.Add(f1);

/// <summary>
/// 动态参数下载
/// </summary>
/// <param name="id"></param>
/// <returns></returns>
private async Task DownloadPhysicalFileAsync1(string id)
{
try
{
string i1 = "";
if(id=="" || id=="0"){
}
else
{
i1 = id.ToString();
}
string filePath = System.Environment.CurrentDirectory + "\\..\\Base.Shared\\wwwroot\\images\\logo" + i1 + ".png";
await using var stream = File.OpenRead(filePath);
await DownloadService.DownloadFromStreamAsync(filePath, stream);
}
catch (FileNotFoundException msg)
{
}
}