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

【问题标题】：Rendering contextmenu for each row of a table为表格的每一行渲染上下文菜单
【发布时间】：2019-01-29 10:37:31
【问题描述】：

我想为表格的每一行附加一个事件处理程序。当用户右键单击 row 时，我想在该行旁边打开一个小模式。现在为了做到这一点，我不知道如何获取选定的行。文档显示要使用UIMouseEventArgs。我看到它只有一个参数Type，我假设它是mousedown 或mouseover。 ..etc（鼠标事件的类型）。

如何获取用户右键单击的行？

表格

    @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; }

    }

使用上面的代码我可以打印一个文本，但是如果我尝试渲染组件我会得到错误：

blazor.server.js:23 Uncaught (in promise) Error: System.ArgumentException: There is no event handler with ID 7
   at Microsoft.JSInterop.DotNetDispatcher.InvokeSynchronously(String assemblyName, String methodIdentifier, Object targetInstance, String argsJson)
   at Microsoft.JSInterop.DotNetDispatcher.BeginInvoke(String callId, String assemblyName, String methodIdentifier, Int64 dotNetObjectId, String argsJson)
    at endInvokeDotNetFromJS (blazor.server.js:23)

【问题讨论】：

您可以将您的任务更改为接受“活动”并将其传递给 var ca.. 但您还需要能够定位模态 - 所以您如何实现这将取决于如何你设计你的模态，但我个人可能会将一个模态组件放在行尾的另一个 td 中，并在 OnMousePressed 中更改它的可见性。

标签： c# mouseevent blazor

【解决方案1】：

试试这个：

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

if ( args.Button == 2) // right button clicked
{ 
   // Code to display your dialogbox
}

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

【讨论】：

我已经编辑了我的帖子。看来我仍然无法使用条件渲染子组件。
这个问题你解决了吗？如果没有，请告诉我您有多少广告系列？顺便说一句，你不应该使用 this.StateHasChanged();在您的 OnClick 事件处理程序中。此方法在 DOM 事件后由 Blazor 自动调用。
是的，我解决了我的问题。我知道我不应该调用它，但有时在 @if(condition){ //render a component//} 并且参数更改其值时，blazor 不会重新评估条件。我看到我可以绕过这个问题首先调用StateHasChanged，然后改变我的条件。（完全随机）比如：void methodThatChangesCondition(){ this.StateHasChanged(); condition=true;}