从 Blazor Server 中的 Javascript 文件调用 .NET 函数

Calling .NET Function from Javascript File in Blazor Server

提问人:Ahsan Raza 提问时间:10/28/2023 更新时间:10/28/2023 访问量:11

问:

我正在尝试在 blazer 应用程序中的父 div 中动态添加一个 div 元素。该 div 中还有一个按钮,它适用于在页面加载时渲染的所有元素。但是对于动态添加的 Div,它们不起作用。这是因为我们不能使用 JavaScript 从按钮直接调用 .NET 方法。因此,我在互联网上搜索了一些解决方案,但没有一个有效。这是我为该 div 动态添加的代码。

private async Task AddDivtoTheBoard(VwTicketsAssignList card)
    {
        var TicketName = "";
        if(card.TicketName.Length > 50)
        {
            TicketName = card.TicketName.Substring(0, 50)+"...";
        }
        else
        {
            TicketName = card.TicketName;
        }

        var Description = "";
        if (card.TicketName.Length > 50)
        {
            Description = card.Description.Substring(0, 50) + "...";
        }
        else
        {
            Description = card.Description;
        }
        string htmlContent = @"
        <div class='kanban-item' style='border-top:5px solid '"+card.StatusColor+";' id='Board_" +Convert.ToString(card.TicketId) + @"' draggable='true' ondragstart='drag(event)'>
            <div class='kanban-item-title'>
                <RadzenImage Path='"+card.ProfileImage+@"' class='rounded-circle float-start me-3' Style='width: 40px; height: 40px;' />
                <h6 class='title'> Ticket # "+card.TicketNo+@"</h6>
            </div>
            <div class='kanban-item-title'>
                <h6 class='title'>
                        " + TicketName + @"
                </h6>
            </div>
            <div class='kanban-item-text'>
                <p> 
                        " + Description+ @"

                </p>
                <ul class='kanban-item-tags'>
                    <li><span class='badge "+card.TypeIcon+"' style='color:white;font-family:Calibri;'>"+card.TypeName+@"</span></li>
                </ul>
                <div class='kanban-item-meta'>
                    <ul class='kanban-item-meta-list'>
                        <li class='text-danger'><span>"+card.TimeLine?.ToString("dd-MMM-yyyy")+@"</span></li>
                        <li><em class='icon ni ni-notes'></em><span>"+card.StaffName+@"</span></li>
                    </ul>
                    <ul class='kanban-item-meta-list'>
                        <li><em class='icon ni ni-clip'></em><span></span></li>
                        <li><em class='icon ni ni-comments'></em><span></span></li>
                    </ul>
                </div>
                <div class='btn-group'>
                     <button class='kanban-add-task btn btn-block'  onclick='callShowAssignToComponentByID(" + card.TicketId + @")'>Actions </button>
                </div>
            </div>
        </div>
    ";
        var StageID = "Stage_"+Convert.ToString(GetStageIDForTickets(card));
        var script = $"addDivToTopOfStage('{StageID}', `{htmlContent}`);";
        await _JsRuntime.InvokeVoidAsync("eval", script);

    }

Div 已添加到页面上,但按钮功能 onclick 不起作用 我尝试使用 JSInvokable 属性,但没有运气,这里是 JSInvokable 方法

[JSInvokable("ShowAssignToComponentByID")]
    public  async Task ShowAssignToComponentByID(string _ticketID)
    {
        int ticketID = Convert.ToInt32(_ticketID);
        SelectedTicket =  _VwAssignedTicketsList.Where(ticket => ticket.TicketId != ticketID).FirstOrDefault() ;
        _ShowAssignToComponent = true;
        StateHasChanged();
    }

这是我调用此方法的 Javascript 代码

let JsRuntime; // Global variable to store the IJSRuntime

function setJSRuntime(runtime) {
    JsRuntime = runtime;
}

window.callShowAssignToComponentByID = function (ticketID) {
    JsRuntime.invokeMethodAsync('SagErpBlazor','SagErpBlazor.AdminDashboardNew.ShowAssignToComponentByID', ticketID.toString());
};

请帮我解决这个问题,我错了?

JavaScript .NET 西装外套

评论

0赞 Ahsan Raza 10/28/2023
类型“RemoteJSRuntime”不包含具有 [JSInvokableAttribute(“ShowAssignToComponentByID”)] 的公共不可调用方法。这是我收到的控制台错误

答: 暂无答案