c# - JQuery 数据表在我的 Blazor 和 .NET 核心项目中不起作用
问题描述
我正在尝试在我的 blazor 项目中使用 JQuery 数据表。我正在使用 CDN 文件来加载框架。这是我的_Host.cshtml文件:
@page "/"
@namespace Blazor.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Blazor</title>
<base href="~/" />
<environment include="Development">
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
asp-fallback-href="css/bootstrap/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"
crossorigin="anonymous"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" />
</environment>
<link href="css/site.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/jq-3.3.1/dt-1.10.18/datatables.min.css" />
</head>
<body>
<app>
@(await Html.RenderComponentAsync<App>
())
</App>
<script src="_framework/blazor.server.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/jq-3.3.1/dt-1.10.18/datatables.min.js"></script>
<script>
$(document).ready(function () {
$('#carTable').DataTable();
});
</script>
</body>
</html>
在我的CarData.razor文件中,我像这样连接 ID:
<table id="carTable" class="display" style="width:100%">
当我运行应用程序时,它不会加载框架。我的控制台没有错误。
我在本文档中阅读了有关 Javascript 互操作的信息:
https://docs.microsoft.com/en-us/aspnet/core/blazor/javascript-interop?view=aspnetcore-3.0
不知何故,它不会从 JQuery 数据表中读取我的 CDN 文件。
有人可以指出我正确的方向吗?
解决方案
我已经想通了:
在我的_Host.cshtml 中,我有以下代码:
<script>
function DataTable() {
$(document).ready(function () {
$('#carTable').DataTable();
});
}
</script>
然后在我的CarData.razor我这样调用这个方法:
protected override async Task OnInitAsync()
{
await JSRuntime.InvokeAsync<object>("DataTable");
}
不要忘记在页面中注入库:
@inject IJSRuntime JSRuntime
推荐阅读
- angular - 设置 mat-select 的默认值
- scala - 如何更改 SBT 依赖关系解析中的超时阈值?
- multithreading - 多线程引用计数
- c++ - 对复制 ctor 和 ctor 的未定义引用
- google-classroom - Google 课堂成绩册 API 代码 var。细绳
- javascript - 饼图未在扩展面板上呈现(EXT JS)
- python - 将 Ajax 添加到 Django
- api - 嘿,有人可以给我看一些关于 discord.py API 的代码吗?使用来自网站的 api
- python - 为开发设置沙盒容器环境的好方法是什么?
- python - 解包字典