nor*_*ist 8 javascript asp.net jquery blazor
我正在研究一些 Blazor 示例，在尝试使用一些 JSInterop 解决方案时，我遇到了 jQuery UI 元素的问题。我不是一个精通 Javascript 程序员，但我对 .NET 足够精通，所以我可能会遗漏一些简单的东西。我尝试使用的第一个 jQuery UI 组件是“可调整大小”组件，可在此处找到：https : //jqueryui.com/resizable/
这是我当前的代码的样子：
索引.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width">
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/site.css" rel="stylesheet" />
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<app>Loading...</app>
<script src="_framework/blazor.server.js"></script>
<script>
$( function() {
$( "#resizable" ).resizable();
});
</script>
</body>
</html>
我确定问题不在于加载库，并且我在加载blazor.server.js.
现在，我的Index.cshtml在 html 部分有以下内容：
<body>
<div class="container-fluid">
<div id="resizable" class="ui-widget-content">
<div class="row row-no-gutters" style="width: 100%; height: 50%">
<h3 class="ui-widget-header">Resizable</h3>
</div>
</div>
</div>
</body>
理想情况下，这会产生一个可调整大小的 div，但生成的 html 元素不可调整大小。据我了解，Blazor JSInterop 不再需要注册 JS 函数。我究竟做错了什么？
Sip*_*tra 11
问题在于时间：您的 jQuery 函数在您的 Blazor 应用程序呈现之前执行。
我解决这个问题的方法是$(...)用一个命名函数（例如onBlazorReady）替换“onready”（）函数，然后我MainLayout在正确的时间从我的 Blazor 的组件中调用它。
正是时候OnAfterRender。
例如：
MainLayout.razor：
@code {
[Inject]
protected IJSRuntime JsRuntime { get; set; }
protected override void OnAfterRender(bool firstRender)
{
if (firstRender)
JsRuntime.InvokeVoidAsync("onBlazorReady");
}
}
索引.html：
@code {
[Inject]
protected IJSRuntime JsRuntime { get; set; }
protected override void OnAfterRender(bool firstRender)
{
if (firstRender)
JsRuntime.InvokeVoidAsync("onBlazorReady");
}
}
如您所见，我正在注入，IJSInterop以便onBlazorReady在 LayoutComponent 呈现后调用我的JS 函数。
Sge*_*dda 10
像这样对我来说很好用，从 jquery ui 添加日期选择器：
Razor 组件文件。
@code {
protected override async void OnAfterRender(bool firstRender)
{
await jsRuntime.InvokeVoidAsync("addDatePicker");
base.OnAfterRender(firstRender);
}
}
全局剃刀文件：
@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>Magiro.Blazor</title>
<base href="~/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<app>
@(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
</app>
<script src="_framework/blazor.server.js"></script>
<script>
window.addDatePicker = () => {
$(".datepicker").datepicker();
}
</script>
</body>
</html>
不再需要在全局索引页（_Hosts.cshtml在 ASP.NET Core 5.0 中）中添加方法，该方法将使用特定于视图的逻辑和依赖项填充这些文件。至少在 v5 中，我们允许直接从文件中IJSObjectReference调用，如下所示：$('table').DataTable().razor
<table>
<thead>
<tr>
<td>Id</td>
<td>Name</td>
</tr>
</thead>
<tbody>
<!-- your data -->
</tbody>
</table>
@code {
[Inject]
protected IJSRuntime JSRuntime { get; set; }
protected override async Task OnAfterRenderAsync(bool firstRender) {
if (firstRender) {
var jQuery = await JSRuntime.InvokeAsync<IJSObjectReference>("$", "table");
await jQuery.InvokeVoidAsync("DataTable");
}
}
}
还可以使用匿名类型将选项传递给插件。例如，要禁用搜索，我们可以在 JS 中调用
$('#example').dataTable({
"searching": false
});
在 Blazor 中，我们创建一个具有相同结构的匿名类型并将其作为参数传递给调用DataTable：
var options = new {
searching = false
};
await jQuery.InvokeVoidAsync("DataTable", options);
| 归档时间： |
|
| 查看次数： |
17334 次 |
| 最近记录： |