logo标签列表

在使用Blazor进行JS互操作时，找不到窗口属性

javascriptc#interopblazor
4

你好，我想从Blazor中调用一个js文件的方法。我的文件结构如下：

-root
  -JSInterop.cs
  -js(folder)
    -meth.js  (file containing the js method)

我一直收到以下错误消息：
 Could not find 'methods' in 'window'.

**调用 js 的 C# 类**

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 中，也尝试将其作为属性放置在其中。对于第一种情况，我不确定如何从 JavaScript 文件中引用该方法。

 "[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>
3个回答
9

JSRuntime.Current.InvokeAsync将相对于全局窗口作用域的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");
1
我更新了我的答案，已经通过“智能感知”在index.html中添加了路径。 - Bercovici Adrian
2
// 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;
    }
};
我最初尝试在我的cshtml文件中直接使用JSRuntime.Current.InvokeAsync，但出现了与window有关的错误。当我像您这样将JS调用委托给另一个类（MyJSInterop）时，我在js文件中遇到了控制台错误Uncaught SyntaxError: Unexpected token <。 - Bercovici Adrian
1
JavaScript 的 return 语句缺少分号，可能导致语法错误。 - enet
你还需要像这样使用分号：window.methods = {}; - enet
我不明白。我在“return”和“window.....=... ;”声明后都放了分号，但仍然出现错误。 - Bercovici Adrian
2
以下是编写cookie的端到端示例。
步骤1 - 添加MatButton并将其onClick属性设置为delegate。
<MatButton TrailingIcon="favorite" @onclick="@(async () => await AddItemtoShoppingCart(@item))" Label="add"></MatButton>

第二步
@code{
public async Task AddItemtoShoppingCart(FoodItem selectedItem)
    {
        var test = await JSRuntime.InvokeAsync<object>("blazorExtensions.WriteCookie", "cookieName", "cookieValue", "cookieExpiryDate");
       
    }

}

第三步 - 在_Host.cshtml中添加以下javascript：
<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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接