Автор оригинала: FreeCodeCamp Community Member.

Вступление

В этой статье мы узнаем о JavaScript Interop в Blazor. Мы поймем, какой javaScript Interop и как мы можем реализовать его в Blazor с помощью приложения пример.

Мы будем использовать код Visual Studio для нашей демонстрации.

Что такое JavaScript Interop?

Blazor использует JavaScript для загрузки .NET Runtime. Он способен использовать любую библиотеку JS. C # код может вызывать функцию JS/API и код JS, и код JS может вызывать любые методы C #. Это свойство вызова метода JS из кода C # и наоборот, называется JavaScript Interop. Blazor использует JavaScript Interop для обработки манипуляций DOM и вызовы API браузера.

JavaScript Interop – это функция, предоставляемая WebAssembly, так как Blazor работает на моно и моно, скомпилирован для webassembly. Следовательно, Blazor также может реализовать эту функцию.

Предпосылки

Установите .NET CORE 2.1 или выше SDK из здесь Отказ
Установить Visual Studio Code из здесь Отказ

Исходный код

Получить исходный код от Github Отказ

Создание приложения Blazor

Мы создадим приложение Blazor, используя Windows PowerShell.

Шаг 1

Во-первых, мы установим шаблоны Blazor Framework на нашей машине.

Откройте папку, в которой вы хотите создать свой проект. Откройте Windows PowerShell с Shift + Щелкните правой кнопкой мыши >> Откройте окно PowerShell здесь.

Введите следующую команду:

dotnet new -i Microsoft.AspNetCore.Blazor.Templates

Обратитесь к изображению ниже:

Шаг 2

Введите следующую команду для создания нашего приложения Blazor:

dotnet new blazor -o BlazorJSDemo

Это создаст приложение Blazor с именем Blazorjsdemo Отказ Обратитесь к изображению ниже.

Добавление страницы бритвы к вашему приложению

Открыть Blazorjsdemo Приложение с использованием VS-кода. Вы можете соблюдать структуру папки в исследовательском исследовании, как показано на изображении ниже.

Мы добавим нашу страницу бритвы в Страницы папка.

Создайте новый файл, щелкнув правой кнопкой мыши на папке «Страницы» и выберите «Новый файл». Назовите файл Jsdemo.cshtml Отказ Этот файл будет содержать HTML-код для обработки UI нашего приложения.

Аналогично добавь еще один файл Jsdemo.cshtml.cs Отказ Этот файл будет содержать код C # для обработки нашей бизнес-логики.

Теперь наш Страницы Папка будет иметь следующую структуру:

Вызов функции JavaScript из C #

Во-первых, мы напишем наши функции JavaScript в index.html Файл Отказ Открыть wwwroot/index.html Файл и положить в следующий код:






    
    
    BlazorJSDemo
    
    
    

    




    Loading...

Здесь мы включили ссылку CDN на библиотеку jQuery внутри раздела, чтобы мы могли обрабатывать манипулирование DOM.

Внутри раздела мы определили нашу функцию JS. Функция на я js Метод, и он не принимает никаких аргументов. При срабатывании он установит текст тега

, имеющего идентификатор «Демоп» на «Использование метода JavaScript».

Важная заметка

Не пишите свой код JS в .cshtml файл. Это не допускается в Blazor, и компилятор бросит ошибку. Всегда помещайте свой код JS в wwwroot/index.html файл.
Всегда добавляйте свой Custom ” в t; Раздел файла index.html. Это для того, чтобы ваш пользовательский скрипт выполнит после загрузки сценария «Blazor.Webassembly.js».

Открыть Jsdemo.cshtml.cs и положить в следующий код:

using Microsoft.AspNetCore.Blazor.Components;
using Microsoft.JSInterop;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace BlazorJSDemo.Pages
{
    public class JSDemoModel : BlazorComponent
    {
        protected static string message { get; set; }

        protected void CallJSMethod()
        {
            JSRuntime.Current.InvokeAsync("JSMethod");
        }
    }
}

Метод Calljsmethod Назовет нашу функцию JS «jsmethod» с помощью метода «jsruntime.current.invokeasync». Этот метод может принимать два параметра – имя функции JS и любой параметр, необходимый для поставляемой в функцию TheJS. В этом случае мы не передаем никакого параметра в функцию JS.

Открыть Jsdemo.cshtml и положить в следующий код:

@page "/demo" @using BlazorJSDemo.Pages @inherits JSDemoModel

JavaScript Interop Demo

Здесь мы определили маршрут страницы сверху. Итак, в данном приложении, если мы добавим «/демонстрируйте» на базовый URL, то мы будем перенаправлены на эту страницу. Мы также наследуем Jsdemomodel класс, который определяется в Jsdemo.cshtml.cs файл. Это позволит нам использовать методы, определенные в Jsdemomodel класс.

После этого мы определили кнопку. Эта кнопка будет вызывать метод «calljsmethod» при нажатии. Этот элемент

с идентификатором “demop” также определен, и его значение будет установлено функцией JS «jsmethod».

Вызов C #/. Чистый метод от JavaScript

Теперь мы определим наш метод JS в wwwroot/index.html Файл, который позвонит нашему методу C # в Jsdemo.cshtml.cs файл.

Синтаксис вызова метода C # из JavaScript выглядит следующим образом:

DotNet.invokeMethodAsync('C# method assembly name', 'C# Method Name');

Следовательно, мы будем следовать тому же методу, вызывающему синтаксис. Открыть wwwroot/index.html Файл и добавьте следующий раздел скрипта к нему:

Здесь мы определяем функцию JS «Csmethod». Эта функция позвонит обратно к нашему методу C # «CSCallbackmethod», который определен в Jsdemomodel класс.

Чтобы вызвать C #/. Сетчатый метод из JavaScript, метод цели .NET должен соответствовать следующим критериям:

Метод должен быть статичным.
Это должно быть неречебно.
Метод не должен иметь перегрузки.
Он имеет бетонные типы параметров JSON Serializable.
Это должно быть украшено атрибутом [jsinvobable].

Открыть Jsdemo.cshtml.cs Файл и добавьте следующий код внутри Jsdemomodel класс.

protected static string message { get; set; }

[JSInvokable]
public static void CSCallBackMethod()
{
  message = "C# Method invoked";
}

protected void CallCSMethod()
{
  JSRuntime.Current.InvokeAsync("CSMethod");
}

Здесь мы определили два метода:

Callcsmethod : Это позвонит нашему функции js “csmethod”
Cscallbackmethod : Это статический метод, и он будет вызываться из функции JavaScript «CSMethod». Следовательно, он украшен атрибутом [jsinvobobable]. Этот метод установит значение строковой переменной сообщение , который будет отображаться на UI.

Открыть Jsdemo.cshtml Файл и добавьте следующий код:

@message

Здесь мы определили кнопку, которая позвонит методу «CallCsmethod» на событии «OnClick». Значение сообщения переменной установлено на кнопке нажмите.

Добавление ссылки на меню навигации

Открыть \ Blazorjsdemo \ shared \ navmenu.cshtml Страница и поместите следующий код в него. Это будет включать ссылку на нашу Jsdemo.cshtml Страница в меню навигации.


    BlazorJSDemo
    



    
        
            
                 Home
            
        
        
            
                 Counter
            
        
        
            
                 Fetch data
            
        
         
            
                 JS Demo
            
        
    


@functions {
    bool collapseNavMenu = true;

    void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }
}

Исполнение демонстрации

Перейдите к просмотру >> Интегрированный терминал, чтобы открыть окно терминала.

Введите команду Dotnet Run Чтобы начать приложение. Обратитесь к изображению ниже:

Вы можете наблюдать, что приложение прослушивает http://localhost: 5000. Откройте любой браузер на вашем компьютере и перейдите к этому URL. Вы можете увидеть домашнюю страницу приложения. Нажмите на ссылку «JS DEMO» в меню навигации, чтобы открыть Jsdemo Посмотреть. Обратите внимание, что URL-адрес «/демонстрация» прилагается к нему.

Нажмите на кнопки, чтобы вызвать функции JS и метод C #.

Обратитесь к GIF ниже.

Заключение

В этой статье мы узнали о JavaScript Interop. Мы также создали пример приложения для демонстрации того, как JavaScript Interop работает с Flash Blazor Framework.

Пожалуйста, получите исходный код от Github и играть вокруг, чтобы получить лучшее понимание.

Получить мою книгу Blazor Quick Start Guide узнать больше о Blazor.

Вы можете проверить мои другие статьи на ядро ASP .NET здесь Отказ

Смотрите также

Первоначально опубликовано в ankitsharmablogs.com.