3
votes

Impossible de trouver la propriété de la fenêtre lors de l'interopérabilité JS avec Blazor

Bonjour, j'essaie d'appeler une méthode à partir d'un fichier js de Blazor . Ma structure de fichier est comme ceci:

<!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>

J'obtiens toujours l'erreur suivante:

 "[path to file]/[containingfile]/[methodname]" ?
  or i have also tried "[path to file] / window.[methodname]"

** Classe Cs qui appelle le js **

function print(message){
 return "fromJs"+message;
}

window.methods = {
    print: function (message) {
        return "from js" + message;
    }
}

Fichier Js

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;
            }

        }
    }

J'ai essayé à la fois de mettre simplement la méthode et de la mettre en tant que propriété dans la fenêtre .Je ne sais pas dans le premier cas comment faire référence à une méthode à partir d'un fichier dans js.

 Could not find 'methods' in 'window'.

à aucun résultat (dans le second cas)

Index.html

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

javascript c# blazor interop

0 commentaires

3 Réponses :

2
votes

// 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;
    }
};

4 commentaires

J'ai d'abord essayé d'utiliser le JSRuntime.Current.InvokeAsync directement dans mon fichier cshtml et cette erreur avec window est apparue.Lorsque je délègue le < code> JS appelle une autre classe comme vous l'avez fait ici MyJSInterop J'obtiens une erreur de console Uncaught SyntaxError: Uncaught token < dans le fichier js.

Un point-virgule manquait dans l'instruction de retour JavaScript, ce qui peut entraîner une erreur de syntaxe ...

Vous avez également besoin d'un point-virgule comme celui-ci: window.methods = {} ***; ***

Je ne comprends pas. J'ai placé un point-virgule à la fois après le return et j'ai également essayé après la déclaration window ..... = ...; . cette erreur.

6
votes

JSRuntime.Current.InvokeAsync prend un identifiant de fonction js par rapport à la portée globale window comme premier argument. Donc, dans votre fichier js, vous pouvez avoir:

await JSRuntime.Current.InvokeAsync<string>("methods.print","mymessage");

Ajoutez votre fichier js dans index.html

<script src="css/bootstrap/bootstrap-native.min.js"></script>
<script src="_framework/blazor.webassembly.js"></script>
<script src="js/meth.js"></script>

et appelez-le depuis .Net comme suit

window.methods = {
    print: function (message) {
    return "from js" + message
}

1 commentaires

J'ai mis à jour ma réponse, j'ai déjà ajouté le chemin dans le index.html aidé par le Intellisense .

2
votes

Voici un exemple de bout en bout d'écriture de cookie.

étape 1 - Ajoutez MatButton et définissez l'attribut onClick sur delegate .

<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>

Étape 2

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

}

Étape 3 - Ajoutez ci-dessous javasceipt dans _Host.cshtml

<MatButton TrailingIcon="favorite" @onclick="@(async () => await AddItemtoShoppingCart(@item))" Label="add"></MatButton>

0 commentaires