表格的每一行的渲染上下文菜单

时间:2019-01-29 10:37:32

标签: c# mouseevent blazor

我想为表的每一行附加一个事件处理程序。 当用户右键单击row时,我想在该行旁边打开一个小模式。 现在,要执行此操作,我不知道如何获取选定的行。文档显示要使用的UIMouseEventArgs。我看到它只有一个参数Type,我假设它是{{1} }或mousedown ... etc(鼠标事件的类型)。

如何获得用户右键单击的行?

表格

mouseover

模式

    @inherits DashboardBase
    @foreach (var ca in this.campaigns) {
                    <tr id="@ca.Id" onmousedown="@(async(ev)=>await OnClick(ev,ca))">
                        <td >@ca.Id</td>
                        <td>@ca.Name</td>
                        <td>@ca.State.Tag</td>
                        <td>@ca.CreatedAtUtc</td>
                        <td>@ca.IsPaused</td>
                        @if (this.SelectedId == ca.Id) {
                            <td><ModalHelper info="@ca"></ModalHelper></td>
                            @"test string"
                        }

                    </tr>
                }

 public class DashboardBase : BlazorComponent {

        protected long SelectedId = -1;
        [Parameter]
        protected Campaign.Dto.CampaignInfo[] campaigns { get; set; }
        protected  void OnClick(UIMouseEventArgs args,CampaignInfo campaign) {
            if (args.Button != 2) {

                return;
            }
            Console.WriteLine("You pressed right on campaignID:" + campaign.Id);
            this.SelectedId = campaign.Id;
            this.StateHasChanged();


        }


    }

使用上面的代码,我可以打印文本,但是如果我尝试渲染组件,则会出现错误:

@inherits ModalHelperBase
<div>
    <button onclick="@(async()=>await OnDeletePressedAsync())">Delete</button>
</div>


public class ModalHelperBase:BlazorComponent {
        [Inject]
        private CampaignService campaignService { get; set; }
        [Parameter] protected CampaignInfo info { get; set; }

    }

1 个答案:

答案 0 :(得分:2)

尝试一下:

在OnMousePressed方法中,检查单击了哪个按钮。

npm run start : env.development

关于发现单击了哪一行,您可以将ca.Id的值传递给OnMousePressed方法,并对其进行处理。