与 Blazor 进行 JS 互操作时找不到 window 的 属性
Could not find property of window when doing JS interop with Blazor
您好,我正在尝试从 Blazor
的 js
文件中调用一个方法。
我的文件结构是这样的:
-root
-JSInterop.cs
-js(folder)
-meth.js (file containing the js method)
我不断收到以下错误:
Could not find 'methods' in 'window'.
**调用js的cs class **
public class JSInterop {
public static async Task<string> ChangeText() {
try {
var data = await JSRuntime.Current.InvokeAsync<string>("./js/meth/methods.print","mymessage");
Console.WriteLine($"ReturnedFromJS:{data}");
return data;
} catch (Exception ex) {
return ex.Message;
}
}
}
js文件
function print(message){
return "fromJs"+message;
}
window.methods = {
print: function (message) {
return "from js" + message;
}
}
我试过只把方法和把它作为 属性 放在 window
中。我不确定在第一种情况下你如何从 js 中的文件引用方法.
"[path to file]/[containingfile]/[methodname]" ?
or i have also tried "[path to file] / window.[methodname]"
无果(第二种情况)
Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width">
<title>Sms.Studio.Web</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/site.css" rel="stylesheet" />
</head>
<body>
<app>Loading...</app>
<!-- browser -->
<script src="_framework/blazor.webassembly.js"></script>
<script src="../interop/js/meth.js"></script>
</body>
</html>
// Try this:
// Don't call your class JSInterop
public class MyJSInterop {
public static async Task<string> ChangeText() {
try {
var data = await JSRuntime.Current.InvokeAsync<string>("methods.print","mymessage");
Console.WriteLine($"ReturnedFromJS:{data}");
return data;
} catch (Exception ex) {
return ex.Message;
}
}
}
// Js file
window.methods = {
print: function (message) {
return "from js" + message;
}
};
JSRuntime.Current.InvokeAsync 将相对于全局 window 范围的 js 函数标识符作为其第一个参数。所以在你的 js 文件中你可能有:
window.methods = {
print: function (message) {
return "from js" + message
}
在index.html中添加你的js文件
<script src="css/bootstrap/bootstrap-native.min.js"></script>
<script src="_framework/blazor.webassembly.js"></script>
<script src="js/meth.js"></script>
并从 .Net 中调用它,如下所示
await JSRuntime.Current.InvokeAsync<string>("methods.print","mymessage");
下面是编写 cookie 的端到端示例。
第 1 步 - 添加 MatButton
并将其 onClick
属性设置为 delegate
.
<MatButton TrailingIcon="favorite" @onclick="@(async () => await AddItemtoShoppingCart(@item))" Label="add"></MatButton>
第 2 步
@code{
public async Task AddItemtoShoppingCart(FoodItem selectedItem)
{
var test = await JSRuntime.InvokeAsync<object>("blazorExtensions.WriteCookie", "cookieName", "cookieValue", "cookieExpiryDate");
}
}
第 3 步 - 在 _Host.cshtml
中添加以下 javasceipt
<script>
window.blazorExtensions = {
WriteCookie: function (name, value, days) {
var expires;
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toGMTString();
}
else {
expires = "";
}
document.cookie = name + "=" + value + expires + "; path=/";
}
}
</script>
您好,我正在尝试从 Blazor
的 js
文件中调用一个方法。
我的文件结构是这样的:
-root
-JSInterop.cs
-js(folder)
-meth.js (file containing the js method)
我不断收到以下错误:
Could not find 'methods' in 'window'.
**调用js的cs class **
public class JSInterop {
public static async Task<string> ChangeText() {
try {
var data = await JSRuntime.Current.InvokeAsync<string>("./js/meth/methods.print","mymessage");
Console.WriteLine($"ReturnedFromJS:{data}");
return data;
} catch (Exception ex) {
return ex.Message;
}
}
}
js文件
function print(message){
return "fromJs"+message;
}
window.methods = {
print: function (message) {
return "from js" + message;
}
}
我试过只把方法和把它作为 属性 放在 window
中。我不确定在第一种情况下你如何从 js 中的文件引用方法.
"[path to file]/[containingfile]/[methodname]" ?
or i have also tried "[path to file] / window.[methodname]"
无果(第二种情况)
Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width">
<title>Sms.Studio.Web</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/site.css" rel="stylesheet" />
</head>
<body>
<app>Loading...</app>
<!-- browser -->
<script src="_framework/blazor.webassembly.js"></script>
<script src="../interop/js/meth.js"></script>
</body>
</html>
// Try this:
// Don't call your class JSInterop
public class MyJSInterop {
public static async Task<string> ChangeText() {
try {
var data = await JSRuntime.Current.InvokeAsync<string>("methods.print","mymessage");
Console.WriteLine($"ReturnedFromJS:{data}");
return data;
} catch (Exception ex) {
return ex.Message;
}
}
}
// Js file
window.methods = {
print: function (message) {
return "from js" + message;
}
};
JSRuntime.Current.InvokeAsync 将相对于全局 window 范围的 js 函数标识符作为其第一个参数。所以在你的 js 文件中你可能有:
window.methods = {
print: function (message) {
return "from js" + message
}
在index.html中添加你的js文件
<script src="css/bootstrap/bootstrap-native.min.js"></script>
<script src="_framework/blazor.webassembly.js"></script>
<script src="js/meth.js"></script>
并从 .Net 中调用它,如下所示
await JSRuntime.Current.InvokeAsync<string>("methods.print","mymessage");
下面是编写 cookie 的端到端示例。
第 1 步 - 添加 MatButton
并将其 onClick
属性设置为 delegate
.
<MatButton TrailingIcon="favorite" @onclick="@(async () => await AddItemtoShoppingCart(@item))" Label="add"></MatButton>
第 2 步
@code{
public async Task AddItemtoShoppingCart(FoodItem selectedItem)
{
var test = await JSRuntime.InvokeAsync<object>("blazorExtensions.WriteCookie", "cookieName", "cookieValue", "cookieExpiryDate");
}
}
第 3 步 - 在 _Host.cshtml
<script>
window.blazorExtensions = {
WriteCookie: function (name, value, days) {
var expires;
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toGMTString();
}
else {
expires = "";
}
document.cookie = name + "=" + value + expires + "; path=/";
}
}
</script>