Как реализовать взаимодействие JavaScript в Blazor

kak realizovat vzaimodejstvie javascript v blazor

Введение

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

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

Что такое взаимодействие JavaScript?

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

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

Предпосылки

  • Отсюда установите пакет SDK .NET Core 2.1 или более поздней версии.
  • Установите код Visual Studio об этом.

Исходный код

Получите исходный код из Github.

Создание программы Blazor

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

Шаг 1

Сначала мы установим шаблоны фреймворка Blazor на нашу машину.

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

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

dotnet new -i Microsoft.AspNetCore.Blazor.Templates

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

xyduFrvvobk8FKc3R4BRiAuZXmiJf6kNSv-0

Шаг 2

Введите такую ​​команду, чтобы создать программу Blazor:

dotnet new blazor -o BlazorJSDemo

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

oInrxVk6aoBMy6u9enSL3XjGiKUrSZy9augG

Добавление страницы Razor в нашу программу

Откройте BlazorJSDemo приложение с помощью кода VS. Вы можете наблюдать структуру папок в Solution Explorer, как показано на рисунке ниже.

yD2TqOZ31I3GFMavWBRJ5FeVs13NOe2xU0Di

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

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

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

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

7uGmB3024FB7kaSQo-ZLMEnikX4CbA-tjEWa

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

Сначала мы напишем наши функции JavaScript файл index.html. Откройте wwwroot/index.html файл и вставьте следующий код:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width">
    <title>BlazorJSDemo</title>
    <base href=" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/site.css" rel="stylesheet" />

    <script src="

</head>

<body>
    <app>Loading...</app>

    <script src="_framework/blazor.webassembly.js"></script>

    <script>
        function JSMethod() {
            $("#demop").text("JavaScript Method invoked");
        }
    </script>

</body>

</html>

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

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

с идентификатором «demop» на «Вызванный метод JavaScript».

Важное примечание

  1. Не пишите свой JS-код в файле .cshtml файл. Это запрещено Blazor, и компилятор выдаст ошибку. Всегда вставляйте свой JS-код в файл wwwroot/index.html файл.
  2. Всегда добавляйте свой собственный тэг ” в 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<bool>("JSMethod");
        }
    }
}

Метод Вызвать JSMethod будет вызывать нашу JS-функцию JSMethod с помощью метода JSRuntime.Current.InvokeAsync. Этот метод может принимать два параметра – имя функции JS и любой параметр, который необходимо предоставить функции JS. В этом случае мы не передаем ни один параметр функции JS.

ОТКРЫТО JSDemo.cshtml и вставьте следующий код:

@page "/demo"
@using BlazorJSDemo.Pages

@inherits JSDemoModel  

<h1>JavaScript Interop Demo</h1>

<hr />

<button class="btn btn-primary" onclick="@CallJSMethod">Call JS Method</button>

<br />
<p id="demop"></p>

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

После этого мы определили кнопку. Эта кнопка вызовет метод CallJSMethod при нажатии. Также определен элемент

с идентификатором "demop", его значение будет установлено функцией JS "JSMethod".

Вызов метода C#/.NET с JavaScript

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

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

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

Поэтому мы будем использовать такой же метод вызова синтаксиса. Откройте wwwroot/index.html файл и добавьте к нему следующий раздел сценария:

<script>
  function CSMethod() {
    DotNet.invokeMethodAsync('BlazorJSDemo', 'CSCallBackMethod');
  }
</script>

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

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

  1. Метод должен быть статическим.
  2. Он должен быть необщим.
  3. Метод не должен иметь перегрузки.
  4. Он имеет конкретные параметры, которые можно сериализировать в JSON.
  5. Его необходимо украсить [JSInvokable] атрибут.

ОТКРЫТО 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<bool>("CSMethod");
}

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

  1. CallCSmethod: Это вызовет нашу функцию JS «CSmethod»
  2. CSCallBackMethod: Это статический метод, и он будет вызван из функции JavaScript CSMethod. Поэтому он украшен[JSInvokable] атрибут. Этот метод устанавливает значение строчной переменной сообщениекоторый будет отображаться в пользовательском интерфейсе.

Откройте JSDemo.cshtml файл и добавьте к нему следующий код:

<button class="btn btn-primary" onclick="@CallCSMethod">Call C# Method</button>
<br />
<p>@message</p>

Здесь мы определили кнопку, которая будет вызывать метод CallCSmethod для события onclick. Значение переменного сообщения устанавливается при нажатии кнопки.

ОТКРЫТО \BlazorJSDemo\Shared\NavMenu.cshtml страницу и вставьте в нее следующий код. Это будет включать ссылку на наш JSDemo.cshtml страницу в меню навигации.

<div class="top-row pl-4 navbar navbar-dark">
    <a class="navbar-brand" href="">BlazorJSDemo</a>
    <button class="navbar-toggler" onclick=@ToggleNavMenu>
        <span class="navbar-toggler-icon"></span>
    </button>
</div>

<div class=@(collapseNavMenu ? "collapse" : null) onclick=@ToggleNavMenu>
    <ul class="nav flex-column">
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="" Match=NavLinkMatch.All>
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="counter">
                <span class="oi oi-plus" aria-hidden="true"></span> Counter
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="fetchdata">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
            </NavLink>
        </li>
         <li class="nav-item px-3">
            <NavLink class="nav-link" href="demo">
                <span class="oi oi-list-rich" aria-hidden="true"></span> JS Demo
            </NavLink>
        </li>
    </ul>
</div>

@functions {
    bool collapseNavMenu = true;

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

Демо исполнение

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

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

qPRwkQvalkfUx3ITH-tg6aG3TBMNscnWerVB

Вы можете заметить, что приложение прослушивает Откройте любой браузер на своем компьютере и перейдите по этому URL-адресу. Вы можете увидеть домашнюю страницу приложения. Нажмите на ссылку «JS Demo» в навигационном меню, чтобы открыть JSdemo просматривать. Обратите внимание, что в URL-адрес добавлен «/demo».

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

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

J1P95jKUa8BulGL6f1qvan-kmMqn6XorEnaH

Вывод

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

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

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

Вы можете просмотреть мои другие статьи о ASP .NET Core здесь.

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *