先要引用JQ库

<script src=”~/js/jquery.min.js”></script>
<script src=”~/js/common.js”></script>
<script type=”text/javascript”>
function setBodyFontSize() {
//$(‘.modal-content’).resizable({
// //alsoResize: “.modal-dialog”,
// minHeight: 300,
// minWidth: 300
//});
//$(‘.modal-dialog’).draggable();

var currentSize = parseInt($(“body”).css(“font-size”));
// 增加字体大小
$(“.increase-font-size”).click(function () {

currentSize += 2;
$(“body”).css(“font-size”, currentSize + “px”);
});
// 减小字体大小
$(“.decrease-font-size”).click(function () {
currentSize -= 2;
$(“body”).css(“font-size”, currentSize + “px”);
});
}

</script>

 

在MainLayout.cs分两种方式引入JQ:

1.页面加载时

protected override Task OnAfterRenderAsync(bool firstRender)
{

JSRuntime.InvokeVoidAsync(“setBodyFontSize”);
return base.OnAfterRenderAsync(firstRender);
}

 

2.点击事件载入

Blazor:

<div class=”layout-drawer” @onclick=”@setBodyFontSize”>JQ</div>

 

C#:

async Task setBodyFontSize()
{
await JSRuntime.InvokeVoidAsync(“setBodyFontSize”);
}

 

www.npspro.top互联侠客
软师傅 » Blazor使用调用JQ,JS,javascript 多个函数

最TOP的Docker,软路由,虚拟机等学习资料

立即查看 了解详情