提问人:Ahsan Raza 提问时间:10/28/2023 更新时间:10/28/2023 访问量:11
从 Blazor Server 中的 Javascript 文件调用 .NET 函数
Calling .NET Function from Javascript File in Blazor Server
问:
我正在尝试在 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());
};
请帮我解决这个问题,我错了?
答: 暂无答案
评论