Blazor 开发

1.跳转页面

在视图razor页面头部增加

@inject NavigationManager NavigationManager

在OnInitializedAsync()内增加

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

2.表字段内部增加控件


                                 
       

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

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($"/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()
               .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 items)
    {
        if (await OpenDialog("时间轴",null,Size.Small) == DialogResult.Yes)
        {
            await dataTable.QueryAsync();
        }
    }

(1)创建展示页面 Show.razor

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


 


   
 
 
@code {
    private List TimelineItems1 = new List();
    protected override async Task OnInitializedAsync()
    {
        for(int i = 0; i < 21; i++)
        {
            IDictionary parameters = new Dictionary { { "id", i.ToString() } };
            TimelineItem t = new TimelineItem();
            if (i == 0)
            {
                t.Color = Color.Success;
            }
            t.Component = BootstrapDynamicComponent.CreateComponent(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
 


    @d.ToString("yyyy-MM-dd HH:mm:ss")  
    发布 
    创建部门:*** 
    创建人:***


    测试1111


   测试


   


@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();
    }
    ///


    /// 下载文件
    ///

    ///
    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下


        @{
            for(int i1 = 0; i1 < files.Count; i1++)
            {
                string t = files[i1].name;
                string id = files[i1].id;
                string icon = files[i1].icon;
               
            }
        }
   
 

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 files = new List();

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

///


    /// 动态参数下载
    ///

    ///
    ///
    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)
        {
        }
    }

你可能感兴趣的:(Blazor,Blazor)