Я работаю с некоторыми примерами Blazor и, пытаясь работать с некоторыми решениями JSInterop, столкнулся с проблемой с элементами пользовательского интерфейса jQuery. Я не опытный программист Javascript, но я достаточно опытный в .NET, поэтому я могу упустить что-то простое. Первый компонент пользовательского интерфейса jQuery, с которым я пытался работать, это компонент «изменяемого размера», который можно найти здесь: https://jqueryui.com/resizable/
Вот как выглядит мой текущий код:
index.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. Что я делаю не так?