ASP.NET Core içindeki JavaScript işlevlerinden .NET yöntemlerini çağırın Blazor

Bu makalede JavaScript () ' den .NET yöntemleri çağırma ele alınmaktadır JS . .NET ' ten işlevleri çağırma hakkında daha fazla bilgi için JS bkz .NET yöntemlerinden JavaScript işlevlerini ASP.NET Core Blazor ..

Statik bir .NET yöntemi çağırma

JavaScript () içinden statik bir .NET yöntemi çağırmak için JS , JS veya fonksiyonlarını kullanın DotNet.invokeMethod DotNet.invokeMethodAsync . Yöntemi içeren derlemenin adını, statik .NET yönteminin tanımlayıcısını ve tüm bağımsız değişkenleri geçirin.

Aşağıdaki örnekte:

• {ASSEMBLY NAME}Yer tutucu, uygulamanın derleme adıdır.
• {.NET METHOD ID}Yer tutucu, .NET yöntemi tanımlayıcısıdır.
• {ARGUMENTS}Yer tutucu, her birinin seri hale getirilebilir olması gereken, yöntemine geçirilecek, virgülle ayrılmış bağımsız değişkenlerdir JS .

DotNet.invokeMethodAsync('{ASSEMBLY NAME}', '{.NET METHOD ID}', {ARGUMENTS});

DotNet.invokeMethod işlemin sonucunu döndürür. DotNet.invokeMethodAsyncişlemin sonucunu JS Promise temsil eden bir döndürür.

Zaman uyumsuz işlev (), invokeMethodAsync invokeMethod senaryoları desteklemek için zaman uyumlu sürüm () üzerinden tercih edilir Blazor Server .

.NET yöntemi genel, statik ve [JSInvokable] özniteliğiolmalıdır.

Aşağıdaki örnekte:

• {<T>}Yer tutucu, yalnızca bir değer döndüren yöntemler için gerekli olan dönüş türünü gösterir.
• {.NET METHOD ID}Yer tutucu Yöntem tanımlayıcısıdır.

@code {
    [JSInvokable]
    public static Task{<T>} {.NET METHOD ID}()
    {
        ...
    }
}

Açık genel yöntemlerin çağrılması statik .NET yöntemleriyle desteklenmez, ancak bu makalede daha sonra açıklanan örnek yöntemleriyledesteklenir.

Aşağıdaki CallDotNetExample1 bileşende ReturnArrayAsync C# yöntemi bir int dizi döndürür. [JSInvokable] Özniteliği yöntemine uygulanır, bu da yöntemi tarafından çağrılır JS .

Pages/CallDotNetExample1.razor:

@page "/call-dotnet-example-1"

<h1>Call .NET Example 1</h1>

<p>
    <button onclick="returnArrayAsync()">
        Trigger .NET static method
    </button>
</p>

@code {
    [JSInvokable]
    public static Task<int[]> ReturnArrayAsync()
    {
        return Task.FromResult(new int[] { 1, 2, 3 });
    }
}

<button>Öğenin onclick HTML özniteliği, onclick click , Blazor yönerge özniteliği değil, olayları işlemek için JavaScript 'in olay işleyicisi atamasıdır @onclick . returnArrayAsync JS İşlev işleyici olarak atanır.

Aşağıdaki returnArrayAsync JS işlev, ReturnArrayAsync önceki bileşenin .net yöntemini çağırır CallDotNetExample1 ve sonucu tarayıcının Web geliştirici araçları konsoluna kaydeder. BlazorSample uygulamanın derleme adıdır.

</body> wwwroot/index.html ( Blazor WebAssembly ) Veya Pages/_Layout.cshtml () kapanış etiketinin içinde Blazor Server :

<script>
  window.returnArrayAsync = () => {
    DotNet.invokeMethodAsync('BlazorSample', 'ReturnArrayAsync')
      .then(data => {
        console.log(data);
      });
    };
</script>

Trigger .NET static method Düğme seçildiğinde, tarayıcının geliştirici araçları konsol çıktısı dizi verilerini görüntüler. Çıktının biçimi tarayıcılar arasında biraz farklılık gösterir. Aşağıdaki çıkışta Microsoft Edge tarafından kullanılan biçim gösterilmektedir:

Array(3) [ 1, 2, 3 ]

Varsayılan olarak, çağrının .NET yöntem tanımlayıcısı JS .net yöntem adıdır, ancak [JSInvokable] öznitelik oluşturucusunu kullanarak farklı bir tanımlayıcı belirtebilirsiniz. Aşağıdaki örnekte, DifferentMethodName yöntemi için atanan Yöntem tanımlayıcısıdır ReturnArrayAsync :

[JSInvokable("DifferentMethodName")]

DotNet.invokeMethodVeya çağrısında DotNet.invokeMethodAsync , DifferentMethodName .net metodunu yürütmek için çağırın ReturnArrayAsync :

• DotNet.invokeMethod('BlazorSample', 'DifferentMethodName');
• DotNet.invokeMethodAsync('BlazorSample', 'DifferentMethodName');

[JSInvokable]
public static async Task<int[]> ReturnArrayAsync()
{
    return await Task.FromResult(new int[] { 1, 2, 3 });
}

Örnek .NET metodunu çağırma

JavaScript () öğesinden bir örnek .NET yöntemi çağırmak için JS :

• JSÖrneği bir içinde sarmalayarak DotNetObjectReference ve üzerinde arayarak .net örneğini başvuruya göre geçirin Create .
• JS invokeMethod Geçilen veya geçirilen içinden bir .NET örnek yöntemi çağırın invokeMethodAsync DotNetObjectReference . .NET örneği, ' den başka .NET yöntemleri çağrılırken bir bağımsız değişken olarak da geçirilebilir JS .
• Öğesini atılamadı DotNetObjectReference .

Bileşen örneği örnekleri

Aşağıdaki sayHello1 JS işlev bir DotNetObjectReference invokeMethodAsync bileşenin .net metodunu çağırmak için bir ve çağırır GetHelloMethod .

</body> wwwroot/index.html ( Blazor WebAssembly ) Veya Pages/_Layout.cshtml () kapanış etiketinin içinde Blazor Server :

<script>
  window.sayHello1 = (dotNetHelper) => {
    return dotNetHelper.invokeMethodAsync('GetHelloMessage');
  };
</script>

Aşağıdaki bileşen için CallDotNetExample2 :

• Bileşen JS adlı bir .net metoduna sahiptir GetHelloMessage .
• Trigger .NET instance method Düğme seçildiğinde, JS işlevi sayHello1 ile çağrılır DotNetObjectReference .
• sayHello1:
  • GetHelloMessageİleti sonucunu çağırır ve alır.
  • Çağıran yönteme ileti sonucunu döndürür TriggerDotNetInstanceMethod .
• İçindeki döndürülen ileti sayHello1 result kullanıcıya gösterilir.
• Bir bellek sızıntısını önlemek ve çöp toplamaya izin vermek için, tarafından oluşturulan .NET nesne başvurusu DotNetObjectReference Dispose yöntemine atıldı.

Pages/CallDotNetExample2.razor:

@page "/call-dotnet-example-2"
@implements IDisposable
@inject IJSRuntime JS

<h1>Call .NET Example 2</h1>

<p>
    <label>
        Name: <input @bind="name" />
    </label>
</p>

<p>
    <button @onclick="TriggerDotNetInstanceMethod">
        Trigger .NET instance method
    </button>
</p>

<p>
    @result
</p>

@code {
    private string? name;
    private string? result;
    private DotNetObjectReference<CallDotNetExample2>? objRef;

    public async Task TriggerDotNetInstanceMethod()
    {
        objRef = DotNetObjectReference.Create(this);
        result = await JS.InvokeAsync<string>("sayHello1", objRef);
    }

    [JSInvokable]
    public string GetHelloMessage() => $"Hello, {name}!";

    public void Dispose()
    {
        objRef?.Dispose();
    }
}

Bağımsız değişkenleri bir örnek yöntemine geçirmek için:

1. .NET yöntemi çağrısına parametreler ekleyin. Aşağıdaki örnekte yöntemine bir ad geçirilir. Gerektiğinde listeye ek parametreler ekleyin.

   <script>
     window.sayHello2 = (dotNetHelper, name) => {
       return dotNetHelper.invokeMethodAsync('GetHelloMessage', name);
     };
   </script>
   

2. .NET metoduna parametre listesini sağlayın.

   Pages/CallDotNetExample3.razor:

   @page "/call-dotnet-example-3"
   @implements IDisposable
   @inject IJSRuntime JS
   
   <h1>Call .NET Example 3</h1>
   
   <p>
       <label>
           Name: <input @bind="name" />
       </label>
   </p>
   
   <p>
       <button @onclick="TriggerDotNetInstanceMethod">
           Trigger .NET instance method
       </button>
   </p>
   
   <p>
       @result
   </p>
   
   @code {
       private string? name;
       private string? result;
       private DotNetObjectReference<CallDotNetExample3>? objRef;
   
       public async Task TriggerDotNetInstanceMethod()
       {
           objRef = DotNetObjectReference.Create(this);
           result = await JS.InvokeAsync<string>("sayHello2", objRef, name);
       }
   
       [JSInvokable]
       public string GetHelloMessage(string passedName) => $"Hello, {passedName}!";
   
       public void Dispose()
       {
           objRef?.Dispose();
       }
   }
   

Sınıf örneği örnekleri

Aşağıdaki sayHello1 JS işlev:

• GetHelloMessageGeçilen .net yöntemini çağırır DotNetObjectReference .
• Öğesinden çağırana ileti döndürür GetHelloMessage sayHello1 .

</body> wwwroot/index.html ( Blazor WebAssembly ) Veya Pages/_Layout.cshtml () kapanış etiketinin içinde Blazor Server :

<script>
  window.sayHello1 = (dotNetHelper) => {
    return dotNetHelper.invokeMethodAsync('GetHelloMessage');
  };
</script>

Aşağıdaki HelloHelper sınıfta JS adlı bir .NET yöntemi vardır GetHelloMessage . HelloHelperOluşturulduğunda, özelliğindeki ad, Name öğesinden bir ileti döndürmek için kullanılır GetHelloMessage .

HelloHelper.cs:

using Microsoft.JSInterop;

public class HelloHelper
{
    public HelloHelper(string? name)
    {
        Name = name ?? "No Name";
    }

    public string? Name { get; set; }

    [JSInvokable]
    public string GetHelloMessage() => $"Hello, {Name}!";
}

CallHelloHelperGetHelloMessageAşağıdaki sınıftaki yöntemi, JsInteropClasses3 JS işlevini sayHello1 Yeni bir örneğiyle çağırır HelloHelper .

JsInteropClasses3.cs:

using System;
using System.Threading.Tasks;
using Microsoft.JSInterop;

public class JsInteropClasses3 : IDisposable
{
    private readonly IJSRuntime js;
    private DotNetObjectReference<HelloHelper>? objRef;

    public JsInteropClasses3(IJSRuntime js)
    {
        this.js = js;
    }

    public ValueTask<string> CallHelloHelperGetHelloMessage(string? name)
    {
        objRef = DotNetObjectReference.Create(new HelloHelper(name));

        return js.InvokeAsync<string>("sayHello1", objRef);
    }

    public void Dispose()
    {
        objRef?.Dispose();
    }
}

Bir bellek sızıntısını önlemek ve çöp toplamaya izin vermek için, tarafından oluşturulan .NET nesne başvurusu DotNetObjectReference Dispose yöntemine atıldı.

Trigger .NET instance method Aşağıdaki bileşende düğme seçildiğinde CallDotNetExample4 , JsInteropClasses3.CallHelloHelperGetHelloMessage değeriyle çağrılır name .

Pages/CallDotNetExample4.razor:

@page "/call-dotnet-example-4"
@implements IDisposable
@inject IJSRuntime JS

<h1>Call .NET Example 4</h1>

<p>
    <label>
        Name: <input @bind="name" />
    </label>
</p>

<p>
    <button @onclick="TriggerDotNetInstanceMethod">
        Trigger .NET instance method
    </button>
</p>

<p>
    @result
</p>

@code {
    private string? name;
    private string? result;
    private JsInteropClasses3? jsInteropClasses;

    private async Task TriggerDotNetInstanceMethod()
    {
        jsInteropClasses = new JsInteropClasses3(JS);
        result = await jsInteropClasses.CallHelloHelperGetHelloMessage(name);
    }

    public void Dispose()
    {
        jsInteropClasses?.Dispose();
    }
}

Aşağıdaki görüntüde, alanında adı bulunan işlenmiş bileşen gösterilmektedir Amy Pond Name . Düğme seçildikten sonra, Hello, Amy Pond! Kullanıcı arabiriminde görüntülenir:

Sınıfında gösterilen önceki model JsInteropClasses3 de tamamen bir bileşende uygulanabilir.

Pages/CallDotNetExample5.razor:

@page "/call-dotnet-example-5"
@implements IDisposable
@inject IJSRuntime JS

<h1>Call .NET Example 5</h1>

<p>
    <label>
        Name: <input @bind="name" />
    </label>
</p>

<p>
    <button @onclick="TriggerDotNetInstanceMethod">
        Trigger .NET instance method
    </button>
</p>

<p>
    @result
</p>

@code {
    private string? name;
    private string? result;
    private DotNetObjectReference<HelloHelper>? objRef;

    public async Task TriggerDotNetInstanceMethod()
    {
        objRef = DotNetObjectReference.Create(new HelloHelper(name));
        result = await JS.InvokeAsync<string>("sayHello1", objRef);
    }

    public void Dispose()
    {
        objRef?.Dispose();
    }
}

Bir bellek sızıntısını önlemek ve çöp toplamaya izin vermek için, tarafından oluşturulan .NET nesne başvurusu DotNetObjectReference Dispose yöntemine atıldı.

Bileşen tarafından gösterilecek çıkış, bu CallDotNetExample5 Hello, Amy Pond! ad Amy Pond Name alanında verilmiştir.

Önceki CallDotNetExample5 bileşende .NET nesne başvurusu atılmış olur. Bir sınıf veya bileşen öğesini atmazsa DotNetObjectReference , geçilen öğesine çağırarak istemciden bu uygulamayı atın dispose DotNetObjectReference :

window.jsFunction = (dotnetHelper) => {
  dotnetHelper.invokeMethodAsync('{ASSEMBLY NAME}', '{.NET METHOD ID}');
  dotnetHelper.dispose();
}

Yukarıdaki örnekte:

• {ASSEMBLY NAME}Yer tutucu, uygulamanın derleme adıdır.
• {.NET METHOD ID}Yer tutucu, .NET yöntemi tanımlayıcısıdır.

Bileşen örneği .NET yöntemi yardımcı sınıfı

Yardımcı sınıfı, .NET örnek yöntemini bir olarak çağırabilir Action . Yardımcı sınıflar aşağıdaki senaryolarda faydalıdır:

• Aynı türde birden çok bileşen aynı sayfada işlendiğinde.
• Blazor ServerBirden çok kullanıcının eşzamanlı olarak aynı bileşeni kullandığı bir uygulamalarda.

Aşağıdaki örnekte:

• CallDotNetExample6Bileşeni ListItem , uygulamanın klasöründe paylaşılan bir bileşen olan birkaç bileşen içerir Shared .
• Her ListItem bileşen bir ileti ve bir düğmeden oluşur.
• Bir ListItem bileşen düğmesi seçildiğinde, bu ListItem UpdateMessage Yöntem liste öğesi metnini değiştirir ve düğmeyi gizler.

Aşağıdaki MessageUpdateInvokeHelper sınıf, JS UpdateMessageCaller Action sınıfı örneği oluşturulurken belirtilen çağırma yöntemini çağırmak için,-Invokable .NET yöntemi sağlar. BlazorSample uygulamanın derleme adıdır.

MessageUpdateInvokeHelper.cs:

using System;
using Microsoft.JSInterop;

public class MessageUpdateInvokeHelper
{
    private Action action;

    public MessageUpdateInvokeHelper(Action action)
    {
        this.action = action;
    }

    [JSInvokable("BlazorSample")]
    public void UpdateMessageCaller()
    {
        action.Invoke();
    }
}

Aşağıdaki updateMessageCaller JS işlev UpdateMessageCaller .net metodunu çağırır. BlazorSample uygulamanın derleme adıdır.

</body> wwwroot/index.html ( Blazor WebAssembly ) Veya Pages/_Layout.cshtml () kapanış etiketinin içinde Blazor Server :

<script>
  window.updateMessageCaller = (dotnetHelper) => {
    dotnetHelper.invokeMethodAsync('BlazorSample', 'UpdateMessageCaller');
    dotnetHelper.dispose();
  }
</script>

Aşağıdaki ListItem Bileşen, bir üst bileşende herhangi bir sayıda kez kullanılabilecek ve <li>...</li> bir HTML listesi (veya) için liste öğeleri () oluşturan paylaşılan bir bileşendir <ul>...</ul> <ol>...</ol> . Her ListItem bileşen örneği, MessageUpdateInvokeHelper Action kendi yöntemine ayarlanmış bir örneği oluşturur UpdateMessage .

Bir ListItem bileşenin InteropCall düğmesi seçildiğinde, updateMessageCaller örnek için oluşturulan ile çağrılır DotNetObjectReference MessageUpdateInvokeHelper . Bu, çerçevenin bu örneğe çağrı sağlamasına izin verir UpdateMessageCaller ListItem MessageUpdateInvokeHelper . Geçilen DotNetObjectReference () içinde atıldı JS dotnetHelper.dispose() .

Shared/ListItem.razor:

@inject IJSRuntime JS

<li>
    @message
    <button @onclick="InteropCall" style="display:@display">InteropCall</button>
</li>

@code {
    private string message = "Select one of these list item buttons.";
    private string display = "inline-block";
    private MessageUpdateInvokeHelper? messageUpdateInvokeHelper;

    protected override void OnInitialized()
    {
        messageUpdateInvokeHelper = new MessageUpdateInvokeHelper(UpdateMessage);
    }

    protected async Task InteropCall()
    {
        if (messageUpdateInvokeHelper is not null)
        {
            await JS.InvokeVoidAsync("updateMessageCaller",
                DotNetObjectReference.Create(messageUpdateInvokeHelper));
        }
    }

    private void UpdateMessage()
    {
        message = "UpdateMessage Called!";
        display = "none";
        StateHasChanged();
    }
}

StateHasChanged , ' de ayarlandığında Kullanıcı arabirimini güncelleştirmek için çağırılır message UpdateMessage . StateHasChangedÇağrılmadıysa, Blazor çağrıldığında UI 'nin güncelleştirilmesini gerektiğini bilmenin bir yolu yoktur Action .

Aşağıdaki üst CallDotNetExample6 bileşen, her biri bileşenin bir örneği olan dört liste öğesi ListItem içerir.

Pages/CallDotNetExample6.razor:

@page "/call-dotnet-example-6"

<h1>Call .NET Example 6</h1>

<ul>
    <ListItem />
    <ListItem />
    <ListItem />
    <ListItem />
</ul>

Aşağıdaki görüntüde, ikinci düğme CallDotNetExample6 seçildikten sonra işlenmiş üst InteropCall bileşen görüntülenir:

• İkinci ListItem bileşen iletiyi UpdateMessage Called! görüntüledi.
• Düğmenin InteropCall CSS ListItem özelliği olarak ayarlanmış olduğundan ikinci bileşene ait display düğme görünür durumda none değildir.

JavaScipt'nin konumu

Birlikte çalışmaya genel bakış makalesinde açıklanan yaklaşımlardan herhangi birini kullanarak JavaScript ( JS ) JS kodunu yükleme:

• Bir betiği <head> işaretlemeye yükleme ( Genel olarak önerilmez)
• İşaretlemede betik <body> yükleme
• Dış dosyadan betik JS yükleme ( .js )
• Başladıktan sonra betik Blazor ekleme

Modüllerde betikleri JS yalıtma hakkında bilgi için JavaScript modüllerde JavaScript yalıtımı bölümüne bakın.

Döngüsel nesne başvurularından kaçının

Döngüsel başvurular içeren nesneler istemcide şu iki için seri hale getirilemiyor:

• .NET yöntem çağrıları.
• Dönüş türünde döngüsel başvurular olduğunda JavaScript yöntemi C# çağrısında bulundu.

Byte dizisi desteği

Blazor , byte dizilerini JS Base64'e kodlamayı/kodunu çözmeyi önleyip iyileştirilmiş byte dizisi birlikte çalışabilirliği destekler. Aşağıdaki örnek, JS bir bayt dizisini .NET'e geçmek için birlikte çalışma kullanır.

</body>( ) veya ( ) kapanış wwwroot/index.html Blazor WebAssembly Pages/_Layout.cshtml etiketinin içinde bir işlev Blazor Server sendByteArray JS girin. İşlev, bileşende bir düğmeyle çağrılır ve bir değer dönmez:

<script>
  window.sendByteArray = () => {
    const data = new Uint8Array([0x45,0x76,0x65,0x72,0x79,0x74,0x68,0x69,
      0x6e,0x67,0x27,0x73,0x20,0x73,0x68,0x69,0x6e,0x79,0x2c,
      0x20,0x43,0x61,0x70,0x74,0x69,0x61,0x6e,0x2e,0x20,0x4e,
      0x6f,0x74,0x20,0x74,0x6f,0x20,0x66,0x72,0x65,0x74,0x2e]);
    DotNet.invokeMethodAsync('BlazorSample', 'ReceiveByteArray', data)
      .then(str => {
        alert(str);
      });
  };
</script>

Pages/CallDotNetExample7.razor:

@page "/call-dotnet-example-7"
@using System.Text

<h1>Call .NET Example 7</h1>

<p>
    <button onclick="sendByteArray()">Send Bytes</button>
</p>

<p>
    Quote &copy;2005 <a href="https://www.uphe.com">Universal Pictures</a>:
    <a href="https://www.uphe.com/movies/serenity">Serenity</a><br>
    <a href="https://www.imdb.com/name/nm0821612/">Jewel Staite on IMDB</a>
</p>

@code {
    [JSInvokable]
    public static Task<string> ReceiveByteArray(byte[] receivedBytes)
    {
        return Task.FromResult(
            Encoding.UTF8.GetString(receivedBytes, 0, receivedBytes.Length));
    }
}

.NET'den JavaScript çağrılırken bir byte dizisi kullanma hakkında bilgi için bkz. .NET yöntemlerinden JavaScript işlevlerini ASP.NET Core Blazor .

JavaScript'den .NET'e akış

Blazor doğrudan JavaScript'den .NET'e veri akışını destekler. Akışlar arabirimi kullanılarak Microsoft.JSInterop.IJSStreamReference istekte bulundurabilirsiniz.

Microsoft.JSInterop.IJSStreamReference.OpenReadStreamAsync bir döndürür Stream ve aşağıdaki parametreleri kullanır:

• maxAllowedSize: JavaScript'te okuma işlemi için izin verilen en fazla bayt sayısıdır ve belirtilmezse varsayılan değer 512.000 bayttır.
• cancellationToken: Okuma CancellationToken iptali için bir.

JavaScript'te:

function streamToDotNet() {
  return new Uint8Array(10000000);
}

C# kodunda:

var dataReference = 
    await JS.InvokeAsync<IJSStreamReference>("streamToDotNet");
using var dataReferenceStream = 
    await dataReference.OpenReadStreamAsync(maxAllowedSize: 10_000_000);

var outputPath = Path.Combine(Path.GetTempPath(), "file.txt");
using var outputFileStream = File.OpenWrite(outputPath);
await dataReferenceStream.CopyToAsync(outputFileStream);

Yukarıdaki örnekte:

• JS , bir IJSRuntime örnektir.
• dataReferenceStream, geçerli kullanıcının geçici klasör yolundaki file.txt diske ( ) GetTempPath yazılır.

.NET yöntemlerinden JavaScript işlevlerini ASP.NET Core Blazor , kullanarak .NET'den JavaScript'e akış yapmak için ters işlemi DotNetStreamReference kapsar.

BlazorASP.NET Core dosya karşıya yüklemeleri , içinde bir dosyanın nasıl karşıya yükllr olduğunu Blazor kapsar.

JavaScript birlikte çalışma çağrılarını boyut sınırları

Bu bölüm yalnızca uygulamalar için Blazor Server geçerlidir. içinde, çerçeve JavaScript (JS) birlikte çalışma giriş Blazor WebAssembly ve çıkışlarının boyutuna bir sınır uygulamaz.

'de, JS birlikte çalışma çağrıları, hub yöntemleri için izin verilen en büyük gelen ileti boyutuyla sınırlıdır ve bu da Blazor Server SignalR tarafından HubOptions.MaximumReceiveMessageSize zorlanır (varsayılan olarak: 32 KB). JS'den SignalR .NET'e iletiler MaximumReceiveMessageSize hata verir. Çerçeve, hub'dan istemciye ileti SignalR boyutuna bir sınır dayatmaz.

Günlüğe SignalR kaydetme Hata Ayıklama veya İzleme olarak ayarlanmasa, yalnızca tarayıcının geliştirici araçları konsolunda bir ileti boyutu hatası görüntülenir:

Hata: Bağlantı şu hatayla kesildi: 'Hata: Sunucu kapatılırken bir hata döndürüldü: Bağlantı bir hatayla kapatıldı.'.

Sunucu SignalR tarafı günlüğe kaydetme Hata Ayıklama veya İzleme olarak ayarlanırsa, sunucu tarafı günlük kaydı ileti boyutu hatası için bir InvalidDataException gösterir.

appsettings.Development.json:

{
  "DetailedErrors": true,
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information",
      "Microsoft.AspNetCore.SignalR": "Debug"
    }
  }
}

Hata:

System.IO.InvalidDataException: İleti boyutu üst sınırı 32768B aşıldı. İleti boyutu AddHubOptions içinde yalıtabilirsiniz.

içinde ayarını kullanarak sınırı MaximumReceiveMessageSize Program.cs artırabilirsiniz. Aşağıdaki örnek, en fazla alma iletisi boyutunu 64 KB (64 * 1024) olarak ayarlar:

builder.Services.AddServerSideBlazor()
    .AddHubOptions(options => options.MaximumReceiveMessageSize = 64 * 1024);

Gelen ileti boyutu sınırının artırılması, daha fazla sunucu kaynağı gerektirmenin maliyetine neden olur ve kötü amaçlı bir kullanıcının artan risklerine SignalR karşı sunucuyu ortaya çıkarır. Buna ek olarak, bellekte dize veya byte dizileri olarak büyük miktarda içeriğin okunması atık toplayıcı ile kötü şekilde çalışarak ek performans cezalarına neden olan ayırmalara da neden olabilir.

JS ile uygulamalar arasında büyük miktarda veri aktaran kod geliştirme konusunda aşağıdaki kılavuzu Blazor göz önünde Blazor Server bulundurabilirsiniz:

• Gelen ileti boyutu sınırına göre daha büyük verileri aktarımı için yerel akış SignalR birlikte çalışma desteğini kullanın:
  • .NET yöntemlerinden JavaScript işlevlerini ASP.NET Core Blazor
  • ASP.NET Core içindeki JavaScript işlevlerinden .NET yöntemlerini çağırın Blazor
• Genel ipuçları:
  • JS ve C# kodunda büyük nesneleri ayırmayın.
  • İşlem tamamlandığında veya iptal edilirken tüketilen belleği serbest bırak.
  • Güvenlik amacıyla aşağıdaki ek gereksinimleri zorunlu kılın:
    • Geçir konan en büyük dosya veya veri boyutunu bildirebilirsiniz.
    • İstemciden sunucuya en düşük karşıya yükleme oranını bildirin.
  • Veriler sunucu tarafından alındıktan sonra şu veriler olabilir:
    • Tüm segmentler toplanana kadar geçici olarak bir bellek arabelleğinde depolanır.
    • Hemen tüketilir. Örneğin, veriler hemen bir veritabanında depolanmış veya diske yazıldığı için her kesim alınmıştır.

JavaScript modüllerde JavaScript yalıtımı

Blazorstandart JavaScript JS modüllerde JavaScript ( ) yalıtımını(ECMAScript belirtimi) sağlar.

JS yalıtım aşağıdaki avantajları sağlar:

• İçeri JS aktarıldı artık genel ad alanını etkilemeyecek.
• Bir kitaplığın ve bileşenlerin tüketicilerinin ilgili 'i içeri aktarması JS gerekmez.

Daha fazla bilgi için bkz. .NET yöntemlerinden JavaScript işlevlerini ASP.NET Core Blazor.

Ek kaynaklar

• .NET yöntemlerinden JavaScript işlevlerini ASP.NET Core Blazor
• InteropComponent.razor örnek (dotnet/AspNetCore GitHub depo main dalı): Dal, ürün biriminin bir sonraki sürümü için geçerli main geliştirmeyi ASP.NET Core. Farklı bir sürümün dallarını (örneğin, ) seçmek için Dalları veya etiketleri değiştir açılan listesini kullanarak release/5.0 dalı seçin.
• Belge Nesne Modeli (DOM) ile etkileşim

Bu makale, JavaScript ' den .NET yöntemlerinin ( ) nasıl yazılmasıyla ilgili bilgi JS sağlar. .NET'den işlevleri çağırma JS hakkında bilgi için bkz. .NET yöntemlerinden JavaScript işlevlerini ASP.NET Core Blazor .

Statik bir .NET yöntemi çağırma

JavaScript () ile statik bir .NET yöntemi çağırmak JS için veya JS işlevlerini DotNet.invokeMethod DotNet.invokeMethodAsync kullanın. yöntemini içeren derlemenin adını, statik .NET yönteminin tanımlayıcısını ve tüm bağımsız değişkenleri iletin.

Aşağıdaki örnekte:

• Yer {ASSEMBLY NAME} tutucu, uygulamanın derleme adıdır.
• Yer {.NET METHOD ID} tutucu, .NET yöntem tanımlayıcısıdır.
• Yer tutucu, yöntemine geçiş için isteğe bağlı, virgülle ayrılmış bağımsız değişkenlerdir ve bunların her {ARGUMENTS} biri JS ON-serializable olması gerekir.

DotNet.invokeMethodAsync('{ASSEMBLY NAME}', '{.NET METHOD ID}', {ARGUMENTS});

DotNet.invokeMethod , işlemi sonucu döndürür. DotNet.invokeMethodAsync, JS Promise işlemi sonucu temsil eden bir döndürür.

Senaryoları desteklemek için zaman uyumlu sürüme ( ) göre zaman uyumsuz işlev invokeMethodAsync ( invokeMethod ) tercih Blazor Server edilir.

.NET yöntemi genel, statik olmalı ve özniteliğine sahip [JSInvokable] olmalıdır.

Aşağıdaki örnekte:

• Yer {<T>} tutucu, dönüş türünü gösterir ve bu yalnızca bir değer dönüş yöntemi için gereklidir.
• Yer {.NET METHOD ID} tutucu, yöntem tanımlayıcısıdır.

@code {
    [JSInvokable]
    public static Task{<T>} {.NET METHOD ID}()
    {
        ...
    }
}

Açık genel yöntemlerin çağrılmış olması statik .NET yöntemleriyle desteklenese de, bu makalenin devamlarında açıklanmıştır.

Aşağıdaki CallDotNetExample1 bileşende, ReturnArrayAsync C# yöntemi bir dizi int döndürür. [JSInvokable] özniteliği yöntemine uygulanır ve bu da yöntemi tarafından faturalamaya neden JS olur.

Pages/CallDotNetExample1.razor:

@page "/call-dotnet-example-1"

<h1>Call .NET Example 1</h1>

<p>
    <button onclick="returnArrayAsync()">
        Trigger .NET static method
    </button>
</p>

@code {
    [JSInvokable]
    public static Task<int[]> ReturnArrayAsync()
    {
        return Task.FromResult(new int[] { 1, 2, 3 });
    }
}

Öğesinin HTML özniteliği, JavaScript'in olayları işlemeye <button> onclick onclick (yönerge özniteliğine click değil) için olay işleyici Blazor @onclick atamasıdır. İşlev, returnArrayAsync JS işleyici olarak atanır.

Aşağıdaki returnArrayAsync JS işlev, önceki ReturnArrayAsync bileşenin .NET yöntemini CallDotNetExample1 çağırarak sonucu tarayıcının web geliştirici araçları konsoluna kaydeder. BlazorSample , uygulamanın derleme adıdır.

</body>kapanış etiketinin içinde wwwroot/index.html ( ) veya ( Blazor WebAssembly Pages/_Host.cshtml Blazor Server ):

<script>
  window.returnArrayAsync = () => {
    DotNet.invokeMethodAsync('BlazorSample', 'ReturnArrayAsync')
      .then(data => {
        console.log(data);
      });
    };
</script>

Düğme Trigger .NET static method seçildiğinde, tarayıcının geliştirici araçları konsol çıkışı dizi verilerini görüntüler. Çıkışın biçimi tarayıcılar arasında biraz farklılık gösterir. Aşağıdaki çıkışta, aşağıdaki komutlar tarafından Microsoft Edge:

Array(3) [ 1, 2, 3 ]

Varsayılan olarak, çağrı için .NET yöntem tanımlayıcısı .NET yöntem adıdır, ancak öznitelik oluşturucusu kullanarak JS farklı bir tanımlayıcı [JSInvokable] belirtebilirsiniz. Aşağıdaki örnekte, DifferentMethodName yöntemi için atanan yöntem ReturnArrayAsync tanımlayıcısıdır:

[JSInvokable("DifferentMethodName")]

veya çağrısında DotNet.invokeMethod DotNet.invokeMethodAsync çağrısıyla DifferentMethodName ReturnArrayAsync .NET yöntemini yürütün:

• DotNet.invokeMethod('BlazorSample', 'DifferentMethodName');
• DotNet.invokeMethodAsync('BlazorSample', 'DifferentMethodName');

[JSInvokable]
public static async Task<int[]> ReturnArrayAsync()
{
    return await Task.FromResult(new int[] { 1, 2, 3 });
}

Örnek .NET yöntemini çağırma

JavaScript'den örnek bir .NET yöntemi çağırmak için ( JS ):

• Örneği içine sarmalar ve üzerinde çağırarak .NET örneğini JS DotNetObjectReference Create başvurusuyla iletin.
• kullanarak veya geçirilen 'den bir .NET JS invokeMethod örneği yöntemi invokeMethodAsync DotNetObjectReference çağırma. .NET örneği, 'den diğer .NET yöntemleri için de bir bağımsız değişken olarak JS geçirebilirsiniz.
• atarak DotNetObjectReference .

Bileşen örneği örnekleri

Aşağıdaki sayHello1 JS işlev, bir DotNetObjectReference bileşenin invokeMethodAsync .NET yöntemini GetHelloMethod çağıran bir ve çağrısı alır.

</body>kapanış etiketinin içinde wwwroot/index.html ( ) veya ( Blazor WebAssembly Pages/_Host.cshtml Blazor Server ):

<script>
  window.sayHello1 = (dotNetHelper) => {
    return dotNetHelper.invokeMethodAsync('GetHelloMessage');
  };
</script>

Aşağıdaki bileşen CallDotNetExample2 için:

• Bileşenin adlı JS bir -invokable .NET yöntemi GetHelloMessage vardır.
• Düğme Trigger .NET instance method seçildiğinde işlevi JS ile sayHello1 çağrılır. DotNetObjectReference
• sayHello1:
  • çağrısında GetHelloMessage bulundu ve ileti sonucu alır.
  • çağırma yöntemine ileti sonucu TriggerDotNetInstanceMethod döndürür.
• içinde döndürülen ileti sayHello1 result kullanıcıya görüntülenir.
• Bellek sızıntısını önlemek ve çöp toplamaya izin vermek için, tarafından oluşturulan .NET DotNetObjectReference nesne başvurusu yönteminde Dispose atılmış olur.

Pages/CallDotNetExample2.razor:

@page "/call-dotnet-example-2"
@implements IDisposable
@inject IJSRuntime JS

<h1>Call .NET Example 2</h1>

<p>
    <label>
        Name: <input @bind="name" />
    </label>
</p>

<p>
    <button @onclick="TriggerDotNetInstanceMethod">
        Trigger .NET instance method
    </button>
</p>

<p>
    @result
</p>

@code {
    private string name;
    private string result;
    private DotNetObjectReference<CallDotNetExample2> objRef;

    public async Task TriggerDotNetInstanceMethod()
    {
        objRef = DotNetObjectReference.Create(this);
        result = await JS.InvokeAsync<string>("sayHello1", objRef);
    }

    [JSInvokable]
    public string GetHelloMessage() => $"Hello, {name}!";

    public void Dispose()
    {
        objRef?.Dispose();
    }
}

Bağımsız değişkenleri bir örnek yöntemine geçmek için:

1. .NET yöntem çağırmaya parametreler ekleyin. Aşağıdaki örnekte yöntemine bir ad geçirildi. Gerektiğinde listeye ek parametreler ekleyin.

   <script>
     window.sayHello2 = (dotNetHelper, name) => {
       return dotNetHelper.invokeMethodAsync('GetHelloMessage', name);
     };
   </script>
   

2. .NET yöntemine parametre listesini girin.

   Pages/CallDotNetExample3.razor:

   @page "/call-dotnet-example-3"
   @implements IDisposable
   @inject IJSRuntime JS
   
   <h1>Call .NET Example 3</h1>
   
   <p>
       <label>
           Name: <input @bind="name" />
       </label>
   </p>
   
   <p>
       <button @onclick="TriggerDotNetInstanceMethod">
           Trigger .NET instance method
       </button>
   </p>
   
   <p>
       @result
   </p>
   
   @code {
       private string name;
       private string result;
       private DotNetObjectReference<CallDotNetExample3> objRef;
   
       public async Task TriggerDotNetInstanceMethod()
       {
           objRef = DotNetObjectReference.Create(this);
           result = await JS.InvokeAsync<string>("sayHello2", objRef, name);
       }
   
       [JSInvokable]
       public string GetHelloMessage(string passedName) => $"Hello, {passedName}!";
   
       public void Dispose()
       {
           objRef?.Dispose();
       }
   }
   

Sınıf örneği örnekleri

Aşağıdaki sayHello1 JS işlev:

• Geçirilen GetHelloMessage üzerinde .NET yöntemini DotNetObjectReference çağıran.
• gelen iletiyi GetHelloMessage sayHello1 çağıranın iletisine döndürür.

</body>kapanış etiketinin wwwroot/index.html içinde ( Blazor WebAssembly ) veya Pages/_Host.cshtml ( Blazor Server ):

<script>
  window.sayHello1 = (dotNetHelper) => {
    return dotNetHelper.invokeMethodAsync('GetHelloMessage');
  };
</script>

Aşağıdaki sınıfta HelloHelper adlı JS bir -invokable .NET yöntemi GetHelloMessage vardır. HelloHelperOluşturulduğunda, özelliğinden Name bir ileti dönmek için özelliğinde adı GetHelloMessage kullanılır.

HelloHelper.cs:

using Microsoft.JSInterop;

public class HelloHelper
{
    public HelloHelper(string name)
    {
        Name = name;
    }

    public string Name { get; set; }

    [JSInvokable]
    public string GetHelloMessage() => $"Hello, {Name}!";
}

Aşağıdaki CallHelloHelperGetHelloMessage sınıftaki JsInteropClasses3 yöntemi, yeni JS bir sayHello1 örneğiyle işlevini HelloHelper çağırır.

JsInteropClasses3.cs:

using System;
using System.Threading.Tasks;
using Microsoft.JSInterop;

public class JsInteropClasses3 : IDisposable
{
    private readonly IJSRuntime js;
    private DotNetObjectReference<HelloHelper> objRef;

    public JsInteropClasses3(IJSRuntime js)
    {
        this.js = js;
    }

    public ValueTask<string> CallHelloHelperGetHelloMessage(string name)
    {
        objRef = DotNetObjectReference.Create(new HelloHelper(name));

        return js.InvokeAsync<string>("sayHello1", objRef);
    }

    public void Dispose()
    {
        objRef?.Dispose();
    }
}

Bellek sızıntısını önlemek ve çöp toplamaya izin vermek için, tarafından oluşturulan .NET DotNetObjectReference nesne başvurusu yönteminde Dispose atılmış olur.

Aşağıdaki Trigger .NET instance method bileşende düğme seçildiğinde CallDotNetExample4 JsInteropClasses3.CallHelloHelperGetHelloMessage değeriyle çağrılır. name

Pages/CallDotNetExample4.razor:

@page "/call-dotnet-example-4"
@implements IDisposable
@inject IJSRuntime JS

<h1>Call .NET Example 4</h1>

<p>
    <label>
        Name: <input @bind="name" />
    </label>
</p>

<p>
    <button @onclick="TriggerDotNetInstanceMethod">
        Trigger .NET instance method
    </button>
</p>

<p>
    @result
</p>

@code {
    private string name;
    private string result;
    private JsInteropClasses3 jsInteropClasses;

    private async Task TriggerDotNetInstanceMethod()
    {
        jsInteropClasses = new JsInteropClasses3(JS);
        result = await jsInteropClasses.CallHelloHelperGetHelloMessage(name);
    }

    public void Dispose()
    {
        jsInteropClasses?.Dispose();
    }
}

Aşağıdaki görüntüde, alanında adıyla işlenmiş Amy Pond bileşen Name yer a gösterir. Düğme seçildikten sonra Hello, Amy Pond! kullanıcı arabiriminde görüntülenir:

Sınıfında gösterilen yukarıdaki JsInteropClasses3 desen, tamamen bir bileşende de gerçek olabilir.

Pages/CallDotNetExample5.razor:

@page "/call-dotnet-example-5"
@implements IDisposable
@inject IJSRuntime JS

<h1>Call .NET Example 5</h1>

<p>
    <label>
        Name: <input @bind="name" />
    </label>
</p>

<p>
    <button @onclick="TriggerDotNetInstanceMethod">
        Trigger .NET instance method
    </button>
</p>

<p>
    @result
</p>

@code {
    private string name;
    private string result;
    private DotNetObjectReference<HelloHelper> objRef;

    public async Task TriggerDotNetInstanceMethod()
    {
        objRef = DotNetObjectReference.Create(new HelloHelper(name));
        result = await JS.InvokeAsync<string>("sayHello1", objRef);
    }

    public void Dispose()
    {
        objRef?.Dispose();
    }
}

Bellek sızıntısını önlemek ve çöp toplamaya izin vermek için, tarafından oluşturulan .NET DotNetObjectReference nesne başvurusu yönteminde Dispose atılmış olur.

Bileşen tarafından görüntülenen CallDotNetExample5 Hello, Amy Pond! çıkış, alanda ad Amy Pond sağlanıyor Name olduğunda görüntülenir.

Önceki CallDotNetExample5 bileşende. NET nesne başvurusu atıldı. Bir sınıf veya bileşen atmazsa, DotNetObjectReference geçirilen üzerinde çağırarak dispose istemciden at: DotNetObjectReference

window.jsFunction = (dotnetHelper) => {
  dotnetHelper.invokeMethodAsync('{ASSEMBLY NAME}', '{.NET METHOD ID}');
  dotnetHelper.dispose();
}

Yukarıdaki örnekte:

• Yer {ASSEMBLY NAME} tutucu, uygulamanın derleme adıdır.
• Yer {.NET METHOD ID} tutucu, .NET yöntem tanımlayıcısıdır.

Bileşen örneği .NET yöntem yardımcı sınıfı

Yardımcı sınıf bir .NET örneği yöntemini olarak Action çağırarak. Yardımcı sınıflar aşağıdaki senaryolarda yararlıdır:

• Aynı türde çeşitli bileşenler aynı sayfada işlenecek olduğunda.
• Birden çok Blazor Server kullanıcının aynı bileşeni eşzamanlı olarak kullanmakta olduğu uygulamalarda.

Aşağıdaki örnekte:

• Bileşen, CallDotNetExample6 ListItem uygulamanın klasöründe paylaşılan bir bileşen olan birkaç bileşen Shared içerir.
• Her ListItem bileşen bir iletiden ve bir düğmeden oluşur.
• Bir ListItem bileşen düğmesi seçildiğinde, ListItem bu yöntemi liste öğesi metnini değiştirir ve UpdateMessage düğmeyi gizler.

Aşağıdaki sınıf, sınıf örneği çağrıldığında belirtilen 'yi çağırmak için bir MessageUpdateInvokeHelper JS -invokable .NET UpdateMessageCaller Action yöntemini sürdürür. BlazorSample , uygulamanın derleme adıdır.

MessageUpdateInvokeHelper.cs:

using System;
using Microsoft.JSInterop;

public class MessageUpdateInvokeHelper
{
    private Action action;

    public MessageUpdateInvokeHelper(Action action)
    {
        this.action = action;
    }

    [JSInvokable("BlazorSample")]
    public void UpdateMessageCaller()
    {
        action.Invoke();
    }
}

Aşağıdaki işlev updateMessageCaller JS UpdateMessageCaller .NET yöntemini çağırır. BlazorSample , uygulamanın derleme adıdır.

</body>kapanış etiketinin wwwroot/index.html içinde ( Blazor WebAssembly ) veya Pages/_Host.cshtml ( Blazor Server ):

<script>
  window.updateMessageCaller = (dotnetHelper) => {
    dotnetHelper.invokeMethodAsync('BlazorSample', 'UpdateMessageCaller');
    dotnetHelper.dispose();
  }
</script>

Aşağıdaki bileşen, bir üst bileşende herhangi bir sayıda kullanılmaktadır ve bir HTML listesi ( veya ) için liste öğeleri ListItem <li>...</li> ( ) <ul>...</ul> <ol>...</ol> oluşturur. Her ListItem bileşen örneği, yöntemine ayarlanmış MessageUpdateInvokeHelper bir örneği Action UpdateMessage sağlar.

Bir ListItem bileşenin InteropCall düğmesi seçildiğinde, updateMessageCaller örnek için oluşturulmuş bir ile DotNetObjectReference MessageUpdateInvokeHelper çağrılır. Bu, çerçevenin bu UpdateMessageCaller örneğinde ListItem çağrısına izin MessageUpdateInvokeHelper sağlar. Geçirilen DotNetObjectReference , () içinde JS dotnetHelper.dispose() atıldı.

Shared/ListItem.razor:

@inject IJSRuntime JS

<li>
    @message
    <button @onclick="InteropCall" style="display:@display">InteropCall</button>
</li>

@code {
    private string message = "Select one of these list item buttons.";
    private string display = "inline-block";
    private MessageUpdateInvokeHelper messageUpdateInvokeHelper;

    protected override void OnInitialized()
    {
        messageUpdateInvokeHelper = new MessageUpdateInvokeHelper(UpdateMessage);
    }

    protected async Task InteropCall()
    {
        await JS.InvokeVoidAsync("updateMessageCaller",
            DotNetObjectReference.Create(messageUpdateInvokeHelper));
    }

    private void UpdateMessage()
    {
        message = "UpdateMessage Called!";
        display = "none";
        StateHasChanged();
    }
}

StateHasChangediçinde ayarlanırken kullanıcı arabirimini güncelleştirmek message için çağrılır. UpdateMessage StateHasChangedçağrılmasa, Blazor çağrıldığında kullanıcı arabiriminin güncelleştirilmiş olması gerektiğini bilmenin Action bir yolu yoktur.

Aşağıdaki üst CallDotNetExample6 bileşen, her biri bileşenin bir örneği olan dört liste öğesi ListItem içerir.

Pages/CallDotNetExample6.razor:

@page "/call-dotnet-example-6"

<h1>Call .NET Example 6</h1>

<ul>
    <ListItem />
    <ListItem />
    <ListItem />
    <ListItem />
</ul>

Aşağıdaki görüntüde, ikinci düğme CallDotNetExample6 seçildikten sonra işlenmiş üst InteropCall bileşen görüntülenir:

• İkinci ListItem bileşen iletiyi UpdateMessage Called! görüntüledi.
• Düğmenin InteropCall CSS ListItem özelliği olarak ayarlanmış olduğundan ikinci bileşene ait display düğme görünür durumda none değildir.

JavaScipt'nin konumu

Birlikte çalışmaya genel bakış makalesinde açıklanan yaklaşımlardan herhangi birini kullanarak JavaScript ( JS ) JS kodunu yükleme:

• Bir betiği <head> işaretlemeye yükleme ( Genel olarak önerilmez)
• İşaretlemede betik <body> yükleme
• Dış dosyadan betik JS yükleme ( .js )
• Başladıktan sonra betik Blazor ekleme

Modüllerde betikleri JS yalıtma hakkında bilgi için JavaScript modüllerde JavaScript yalıtımı bölümüne bakın.

Döngüsel nesne başvurularından kaçının

Döngüsel başvurular içeren nesneler istemcide şu iki için seri hale getirilemiyor:

• .NET yöntem çağrıları.
• Dönüş türünde döngüsel başvurular olduğunda JavaScript yöntemi C# çağrısında bulundu.

JavaScript birlikte çalışma çağrılarını boyut sınırları

Bu bölüm yalnızca uygulamalar için Blazor Server geçerlidir. içinde, çerçeve JavaScript (JS) birlikte çalışma giriş Blazor WebAssembly ve çıkışlarının boyutuna bir sınır uygulamaz.

'de, JS birlikte çalışma çağrıları, hub yöntemleri için izin verilen en büyük gelen ileti boyutuyla sınırlıdır ve bu da Blazor Server SignalR tarafından HubOptions.MaximumReceiveMessageSize zorlanır (varsayılan olarak: 32 KB). JS'den SignalR .NET'e iletiler MaximumReceiveMessageSize hata verir. Çerçeve, hub'dan istemciye ileti SignalR boyutuna bir sınır dayatmaz.

Günlüğe SignalR kaydetme Hata Ayıklama veya İzleme olarak ayarlanmasa, yalnızca tarayıcının geliştirici araçları konsolunda ileti boyutu hatası görüntülenir:

Hata: Bağlantı şu hatayla kesildi: 'Hata: Sunucu kapatılırken bir hata döndürüldü: Bağlantı bir hatayla kapatıldı.'.

Sunucu SignalR tarafı günlüğe kaydetme Hata Ayıklama veya İzleme olarak ayarlanırsa,sunucu tarafı günlük kaydı ileti boyutu hatası için bir ortaya InvalidDataException çıkar.

appsettings.Development.json:

{
  "DetailedErrors": true,
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information",
      "Microsoft.AspNetCore.SignalR": "Debug"
    }
  }
}

Hata:

System.IO.InvalidDataException: İleti boyutu üst sınırı 32768B aşıldı. İleti boyutu AddHubOptions içinde yalıtabilirsiniz.

içinde ayarını kullanarak sınırı MaximumReceiveMessageSize Startup.ConfigureServices artırabilirsiniz:

services.AddServerSideBlazor()
    .AddHubOptions(options => options.MaximumReceiveMessageSize = 64 * 1024);

Gelen ileti boyutu sınırının artırılması, daha fazla sunucu kaynağı gerektirmenin maliyetine neden olur ve kötü amaçlı bir kullanıcının artan risklerine SignalR karşı sunucuyu ortaya çıkarır. Buna ek olarak, bellekte dize veya byte dizileri olarak büyük miktarda içeriğin okunması atık toplayıcı ile kötü şekilde çalışarak ek performans cezalarına neden olan ayırmalara da neden olabilir.

Büyük yüklerin okunması için bir seçenek, içeriği daha küçük öbekler halinde göndermek ve yükü olarak Stream işlemektir. Bu, büyük JSON yüklerini okurken veya veriler JS'de ham bayt olarak kullanılabilir durumda olduğunda kullanılabilir. bileşenine benzer teknikler kullanan içinde büyük ikili yük göndermeyi gösteren bir örnek Blazor Server InputFile içinbkz. İkili Gönderme örnek uygulaması.

JS ile uygulamalar arasında büyük miktarda veri aktaran kod geliştirme konusunda aşağıdaki kılavuzu Blazor göz önünde Blazor Server bulundurabilirsiniz:

• Verileri daha küçük parçalara dilimler ve tüm veriler sunucu tarafından alınana kadar veri kesimlerini sırayla gönderin.
• JS ve C# kodunda büyük nesneleri ayırmayın.
• Veri gönderirken veya alırken ana kullanıcı arabirimi iş parçacığını uzun süre engellemeyebilirsiniz.
• İşlem tamamlandığında veya iptal edilirken tüketilen belleği serbest bırak.
• Güvenlik amacıyla aşağıdaki ek gereksinimleri zorunlu kılın:
  • Geçir konan en büyük dosya veya veri boyutunu bildirebilirsiniz.
  • İstemciden sunucuya en düşük karşıya yükleme oranını bildirebilirsiniz.
• Veriler sunucu tarafından alındıktan sonra şu veriler olabilir:
  • Tüm segmentler toplanana kadar geçici olarak bir bellek arabelleğinde depolanır.
  • Hemen tüketilir. Örneğin, veriler hemen bir veritabanında depolanmış veya diske yazıldığı için her kesim alınmıştır.

JavaScript modüllerde JavaScript yalıtımı

Blazorstandart JavaScript JS modüllerde JavaScript ( ) yalıtımını(ECMAScript belirtimi) sağlar.

JS yalıtım aşağıdaki avantajları sağlar:

• İçeri JS aktarılan dosya artık genel ad alanını etkilemeyecek.
• Bir kitaplığın ve bileşenlerin tüketicilerinin ilgili 'i içeri aktarması JS gerekmez.

Daha fazla bilgi için bkz. .NET yöntemlerinden JavaScript işlevlerini ASP.NET Core Blazor.

Ek kaynaklar

• .NET yöntemlerinden JavaScript işlevlerini ASP.NET Core Blazor
• InteropComponent.razor örnek (dotnet/AspNetCore GitHub depo main dalı): Dal, ürün biriminin bir sonraki sürümü için geçerli geliştirmeyi main ASP.NET Core. Farklı bir sürümün dallarını (örneğin, ) seçmek için Dalları veya etiketleri değiştir açılan listesini kullanarak release/5.0 dalı seçin.
• Belge Nesne Modeli (DOM) ile etkileşim

Bu makale JavaScript ' den .NET yöntemlerinin ( ) nasıl yazılmasıyla ilgili bilgi JS sağlar. .NET'den işlevleri çağırma JS hakkında bilgi için bkz. .NET yöntemlerinden JavaScript işlevlerini ASP.NET Core Blazor .

Statik bir .NET yöntemi çağırma

JavaScript () ile statik bir .NET yöntemi çağırmak JS için veya JS işlevlerini DotNet.invokeMethod DotNet.invokeMethodAsync kullanın. yöntemini içeren derlemenin adını, statik .NET yönteminin tanımlayıcısını ve tüm bağımsız değişkenleri iletin.

Aşağıdaki örnekte:

• Yer {ASSEMBLY NAME} tutucu, uygulamanın derleme adıdır.
• Yer {.NET METHOD ID} tutucu, .NET yöntem tanımlayıcısıdır.
• Yer tutucu, yöntemine geçiş için isteğe bağlı, virgülle ayrılmış bağımsız değişkenlerdir ve bunların her {ARGUMENTS} biri JS ON-serializable olması gerekir.

DotNet.invokeMethodAsync('{ASSEMBLY NAME}', '{.NET METHOD ID}', {ARGUMENTS});

DotNet.invokeMethod , işlemi sonucu döndürür. DotNet.invokeMethodAsync, JS Promise işlemi sonucu temsil eden bir döndürür.

Zaman uyumsuz işlev ( invokeMethodAsync ) senaryoları desteklemek için zaman uyumlu sürüme ( invokeMethod ) göre tercih Blazor Server edilir.

.NET yöntemi genel, statik olmalı ve özniteliğine sahip [JSInvokable] olmalıdır.

Aşağıdaki örnekte:

• Yer {<T>} tutucu, dönüş türünü gösterir ve bu yalnızca bir değer dönüş yöntemi için gereklidir.
• Yer {.NET METHOD ID} tutucu, yöntem tanımlayıcısıdır.

@code {
    [JSInvokable]
    public static Task{<T>} {.NET METHOD ID}()
    {
        ...
    }
}

Açık genel yöntemlerin çağrılmış olması statik .NET yöntemleriyle desteklenese de, bu makalenin devamlarında açıklanmıştır.

Aşağıdaki CallDotNetExample1 bileşende, ReturnArrayAsync C# yöntemi bir dizi int döndürür. [JSInvokable] özniteliği yöntemine uygulanır ve bu da yöntemini tarafından faturalamak için JS yapılır.

Pages/CallDotNetExample1.razor:

@page "/call-dotnet-example-1"

<h1>Call .NET Example 1</h1>

<p>
    <button onclick="returnArrayAsync()">
        Trigger .NET static method
    </button>
</p>

@code {
    [JSInvokable]
    public static Task<int[]> ReturnArrayAsync()
    {
        return Task.FromResult(new int[] { 1, 2, 3 });
    }
}

Öğesinin <button> onclick HTML özniteliği, JavaScript'in olayları onclick işlemeye (yönerge özniteliğine click değil) için olay işleyici Blazor @onclick atamasıdır. İşlev, returnArrayAsync JS işleyici olarak atanır.

Aşağıdaki returnArrayAsync JS işlev, önceki ReturnArrayAsync bileşenin .NET yöntemini CallDotNetExample1 çağırarak sonucu tarayıcının web geliştirici araçları konsoluna kaydeder. BlazorSample , uygulamanın derleme adıdır.

</body>kapanış etiketinin wwwroot/index.html içinde ( Blazor WebAssembly ) veya Pages/_Host.cshtml ( Blazor Server ):

<script>
  window.returnArrayAsync = () => {
    DotNet.invokeMethodAsync('BlazorSample', 'ReturnArrayAsync')
      .then(data => {
        console.log(data);
      });
    };
</script>

Düğme Trigger .NET static method seçildiğinde, tarayıcının geliştirici araçları konsol çıkışı dizi verilerini görüntüler. Çıkışın biçimi tarayıcılar arasında biraz farklılık gösterir. Aşağıdaki çıkışta, aşağıdaki komutlar tarafından Microsoft Edge:

Array(3) [ 1, 2, 3 ]

Varsayılan olarak, çağrı için .NET yöntem tanımlayıcısı .NET yöntem adıdır, ancak öznitelik oluşturucusu kullanarak JS farklı bir tanımlayıcı [JSInvokable] belirtebilirsiniz. Aşağıdaki örnekte, DifferentMethodName yöntemi için atanan Yöntem tanımlayıcısıdır ReturnArrayAsync :

[JSInvokable("DifferentMethodName")]

DotNet.invokeMethodVeya çağrısında DotNet.invokeMethodAsync , DifferentMethodName .net metodunu yürütmek için çağırın ReturnArrayAsync :

• DotNet.invokeMethod('BlazorSample', 'DifferentMethodName');
• DotNet.invokeMethodAsync('BlazorSample', 'DifferentMethodName');

[JSInvokable]
public static async Task<int[]> ReturnArrayAsync()
{
    return await Task.FromResult(new int[] { 1, 2, 3 });
}

Örnek .NET metodunu çağırma

JavaScript () öğesinden bir örnek .NET yöntemi çağırmak için JS :

• JSÖrneği bir içinde sarmalayarak DotNetObjectReference ve üzerinde arayarak .net örneğini başvuruya göre geçirin Create .
• JS invokeMethod Geçilen veya geçirilen içinden bir .NET örnek yöntemi çağırın invokeMethodAsync DotNetObjectReference . .NET örneği, ' den başka .NET yöntemleri çağrılırken bir bağımsız değişken olarak da geçirilebilir JS .
• Öğesini atılamadı DotNetObjectReference .

Bileşen örneği örnekleri

Aşağıdaki sayHello1 JS işlev bir DotNetObjectReference invokeMethodAsync bileşenin .net metodunu çağırmak için bir ve çağırır GetHelloMethod .

</body> wwwroot/index.html ( Blazor WebAssembly ) Veya Pages/_Host.cshtml () kapanış etiketinin içinde Blazor Server :

<script>
  window.sayHello1 = (dotNetHelper) => {
    return dotNetHelper.invokeMethodAsync('GetHelloMessage');
  };
</script>

Aşağıdaki bileşen için CallDotNetExample2 :

• Bileşen JS adlı bir .net metoduna sahiptir GetHelloMessage .
• Trigger .NET instance method Düğme seçildiğinde, JS işlevi sayHello1 ile çağrılır DotNetObjectReference .
• sayHello1:
  • GetHelloMessageİleti sonucunu çağırır ve alır.
  • Çağıran yönteme ileti sonucunu döndürür TriggerDotNetInstanceMethod .
• İçindeki döndürülen ileti sayHello1 result kullanıcıya gösterilir.
• Bir bellek sızıntısını önlemek ve çöp toplamaya izin vermek için, tarafından oluşturulan .NET nesne başvurusu DotNetObjectReference Dispose yöntemine atıldı.

Pages/CallDotNetExample2.razor:

@page "/call-dotnet-example-2"
@implements IDisposable
@inject IJSRuntime JS

<h1>Call .NET Example 2</h1>

<p>
    <label>
        Name: <input @bind="name" />
    </label>
</p>

<p>
    <button @onclick="TriggerDotNetInstanceMethod">
        Trigger .NET instance method
    </button>
</p>

<p>
    @result
</p>

@code {
    private string name;
    private string result;
    private DotNetObjectReference<CallDotNetExample2> objRef;

    public async Task TriggerDotNetInstanceMethod()
    {
        objRef = DotNetObjectReference.Create(this);
        result = await JS.InvokeAsync<string>("sayHello1", objRef);
    }

    [JSInvokable]
    public string GetHelloMessage() => $"Hello, {name}!";

    public void Dispose()
    {
        objRef?.Dispose();
    }
}

Bağımsız değişkenleri bir örnek yöntemine geçirmek için:

1. .NET yöntemi çağrısına parametreler ekleyin. Aşağıdaki örnekte yöntemine bir ad geçirilir. Gerektiğinde listeye ek parametreler ekleyin.

   <script>
     window.sayHello2 = (dotNetHelper, name) => {
       return dotNetHelper.invokeMethodAsync('GetHelloMessage', name);
     };
   </script>
   

2. .NET metoduna parametre listesini sağlayın.

   Pages/CallDotNetExample3.razor:

   @page "/call-dotnet-example-3"
   @implements IDisposable
   @inject IJSRuntime JS
   
   <h1>Call .NET Example 3</h1>
   
   <p>
       <label>
           Name: <input @bind="name" />
       </label>
   </p>
   
   <p>
       <button @onclick="TriggerDotNetInstanceMethod">
           Trigger .NET instance method
       </button>
   </p>
   
   <p>
       @result
   </p>
   
   @code {
       private string name;
       private string result;
       private DotNetObjectReference<CallDotNetExample3> objRef;
   
       public async Task TriggerDotNetInstanceMethod()
       {
           objRef = DotNetObjectReference.Create(this);
           result = await JS.InvokeAsync<string>("sayHello2", objRef, name);
       }
   
       [JSInvokable]
       public string GetHelloMessage(string passedName) => $"Hello, {passedName}!";
   
       public void Dispose()
       {
           objRef?.Dispose();
       }
   }
   

Sınıf örneği örnekleri

Aşağıdaki sayHello1 JS işlev:

• GetHelloMessageGeçilen .net yöntemini çağırır DotNetObjectReference .
• Öğesinden çağırana ileti döndürür GetHelloMessage sayHello1 .

</body> wwwroot/index.html ( Blazor WebAssembly ) Veya Pages/_Host.cshtml () kapanış etiketinin içinde Blazor Server :

<script>
  window.sayHello1 = (dotNetHelper) => {
    return dotNetHelper.invokeMethodAsync('GetHelloMessage');
  };
</script>

Aşağıdaki HelloHelper sınıfta JS adlı bir .NET yöntemi vardır GetHelloMessage . HelloHelperOluşturulduğunda, özelliğindeki ad, Name öğesinden bir ileti döndürmek için kullanılır GetHelloMessage .

HelloHelper.cs:

using Microsoft.JSInterop;

public class HelloHelper
{
    public HelloHelper(string name)
    {
        Name = name;
    }

    public string Name { get; set; }

    [JSInvokable]
    public string GetHelloMessage() => $"Hello, {Name}!";
}

CallHelloHelperGetHelloMessageAşağıdaki sınıftaki yöntemi, JsInteropClasses3 JS işlevini sayHello1 Yeni bir örneğiyle çağırır HelloHelper .

JsInteropClasses3.cs:

using System;
using System.Threading.Tasks;
using Microsoft.JSInterop;

public class JsInteropClasses3 : IDisposable
{
    private readonly IJSRuntime js;
    private DotNetObjectReference<HelloHelper> objRef;

    public JsInteropClasses3(IJSRuntime js)
    {
        this.js = js;
    }

    public ValueTask<string> CallHelloHelperGetHelloMessage(string name)
    {
        objRef = DotNetObjectReference.Create(new HelloHelper(name));

        return js.InvokeAsync<string>("sayHello1", objRef);
    }

    public void Dispose()
    {
        objRef?.Dispose();
    }
}

Bir bellek sızıntısını önlemek ve çöp toplamaya izin vermek için, tarafından oluşturulan .NET nesne başvurusu DotNetObjectReference Dispose yöntemine atıldı.

Trigger .NET instance method Aşağıdaki bileşende düğme seçildiğinde CallDotNetExample4 , JsInteropClasses3.CallHelloHelperGetHelloMessage değeriyle çağrılır name .

Pages/CallDotNetExample4.razor:

@page "/call-dotnet-example-4"
@implements IDisposable
@inject IJSRuntime JS

<h1>Call .NET Example 4</h1>

<p>
    <label>
        Name: <input @bind="name" />
    </label>
</p>

<p>
    <button @onclick="TriggerDotNetInstanceMethod">
        Trigger .NET instance method
    </button>
</p>

<p>
    @result
</p>

@code {
    private string name;
    private string result;
    private JsInteropClasses3 jsInteropClasses;

    private async Task TriggerDotNetInstanceMethod()
    {
        jsInteropClasses = new JsInteropClasses3(JS);
        result = await jsInteropClasses.CallHelloHelperGetHelloMessage(name);
    }

    public void Dispose()
    {
        jsInteropClasses?.Dispose();
    }
}

Aşağıdaki görüntüde, alanında adı bulunan işlenmiş bileşen gösterilmektedir Amy Pond Name . Düğme seçildikten sonra, Hello, Amy Pond! Kullanıcı arabiriminde görüntülenir:

Sınıfında gösterilen önceki model JsInteropClasses3 de tamamen bir bileşende uygulanabilir.

Pages/CallDotNetExample5.razor:

@page "/call-dotnet-example-5"
@implements IDisposable
@inject IJSRuntime JS

<h1>Call .NET Example 5</h1>

<p>
    <label>
        Name: <input @bind="name" />
    </label>
</p>

<p>
    <button @onclick="TriggerDotNetInstanceMethod">
        Trigger .NET instance method
    </button>
</p>

<p>
    @result
</p>

@code {
    private string name;
    private string result;
    private DotNetObjectReference<HelloHelper> objRef;

    public async Task TriggerDotNetInstanceMethod()
    {
        objRef = DotNetObjectReference.Create(new HelloHelper(name));
        result = await JS.InvokeAsync<string>("sayHello1", objRef);
    }

    public void Dispose()
    {
        objRef?.Dispose();
    }
}

Bir bellek sızıntısını önlemek ve çöp toplamaya izin vermek için, tarafından oluşturulan .NET nesne başvurusu DotNetObjectReference Dispose yöntemine atıldı.

Bileşen tarafından gösterilecek çıkış, bu CallDotNetExample5 Hello, Amy Pond! ad Amy Pond Name alanında verilmiştir.

Önceki CallDotNetExample5 bileşende .NET nesne başvurusu atılmış olur. Bir sınıf veya bileşen öğesini atmazsa DotNetObjectReference , geçilen öğesine çağırarak istemciden bu uygulamayı atın dispose DotNetObjectReference :

window.jsFunction = (dotnetHelper) => {
  dotnetHelper.invokeMethodAsync('{ASSEMBLY NAME}', '{.NET METHOD ID}');
  dotnetHelper.dispose();
}

Yukarıdaki örnekte:

• {ASSEMBLY NAME}Yer tutucu, uygulamanın derleme adıdır.
• {.NET METHOD ID}Yer tutucu, .NET yöntemi tanımlayıcısıdır.

Bileşen örneği .NET yöntemi yardımcı sınıfı

Yardımcı sınıfı, .NET örnek yöntemini bir olarak çağırabilir Action . Yardımcı sınıflar aşağıdaki senaryolarda faydalıdır:

• Aynı türde birden çok bileşen aynı sayfada işlendiğinde.
• Blazor ServerBirden çok kullanıcının eşzamanlı olarak aynı bileşeni kullandığı bir uygulamalarda.

Aşağıdaki örnekte:

• CallDotNetExample6Bileşeni ListItem , uygulamanın klasöründe paylaşılan bir bileşen olan birkaç bileşen içerir Shared .
• Her ListItem bileşen bir ileti ve bir düğmeden oluşur.
• Bir ListItem bileşen düğmesi seçildiğinde, bu ListItem UpdateMessage Yöntem liste öğesi metnini değiştirir ve düğmeyi gizler.

Aşağıdaki MessageUpdateInvokeHelper sınıf, JS UpdateMessageCaller Action sınıfı örneği oluşturulurken belirtilen çağırma yöntemini çağırmak için,-Invokable .NET yöntemi sağlar. BlazorSample uygulamanın derleme adıdır.

MessageUpdateInvokeHelper.cs:

using System;
using Microsoft.JSInterop;

public class MessageUpdateInvokeHelper
{
    private Action action;

    public MessageUpdateInvokeHelper(Action action)
    {
        this.action = action;
    }

    [JSInvokable("BlazorSample")]
    public void UpdateMessageCaller()
    {
        action.Invoke();
    }
}

Aşağıdaki updateMessageCaller JS işlev UpdateMessageCaller .net metodunu çağırır. BlazorSample uygulamanın derleme adıdır.

</body> wwwroot/index.html ( Blazor WebAssembly ) Veya Pages/_Host.cshtml () kapanış etiketinin içinde Blazor Server :

<script>
  window.updateMessageCaller = (dotnetHelper) => {
    dotnetHelper.invokeMethodAsync('BlazorSample', 'UpdateMessageCaller');
    dotnetHelper.dispose();
  }
</script>

Aşağıdaki ListItem Bileşen, bir üst bileşende herhangi bir sayıda kez kullanılabilecek ve <li>...</li> bir HTML listesi (veya) için liste öğeleri () oluşturan paylaşılan bir bileşendir <ul>...</ul> <ol>...</ol> . Her ListItem bileşen örneği, MessageUpdateInvokeHelper Action kendi yöntemine ayarlanmış bir örneği oluşturur UpdateMessage .

Bir ListItem bileşenin InteropCall düğmesi seçildiğinde, updateMessageCaller örnek için oluşturulan ile çağrılır DotNetObjectReference MessageUpdateInvokeHelper . Bu, çerçevenin bu örneğe çağrı sağlamasına izin verir UpdateMessageCaller ListItem MessageUpdateInvokeHelper . Geçilen DotNetObjectReference () içinde atıldı JS dotnetHelper.dispose() .

Shared/ListItem.razor:

@inject IJSRuntime JS

<li>
    @message
    <button @onclick="InteropCall" style="display:@display">InteropCall</button>
</li>

@code {
    private string message = "Select one of these list item buttons.";
    private string display = "inline-block";
    private MessageUpdateInvokeHelper messageUpdateInvokeHelper;

    protected override void OnInitialized()
    {
        messageUpdateInvokeHelper = new MessageUpdateInvokeHelper(UpdateMessage);
    }

    protected async Task InteropCall()
    {
        await JS.InvokeVoidAsync("updateMessageCaller",
            DotNetObjectReference.Create(messageUpdateInvokeHelper));
    }

    private void UpdateMessage()
    {
        message = "UpdateMessage Called!";
        display = "none";
        StateHasChanged();
    }
}

StateHasChanged , ' de ayarlandığında Kullanıcı arabirimini güncelleştirmek için çağırılır message UpdateMessage . StateHasChangedÇağrılmadıysa, Blazor çağrıldığında UI 'nin güncelleştirilmesini gerektiğini bilmenin bir yolu yoktur Action .

Aşağıdaki CallDotNetExample6 üst bileşen, bileşenin her bir örneği olan dört liste öğesi içerir ListItem .

Pages/CallDotNetExample6.razor:

@page "/call-dotnet-example-6"

<h1>Call .NET Example 6</h1>

<ul>
    <ListItem />
    <ListItem />
    <ListItem />
    <ListItem />
</ul>

Aşağıdaki görüntüde CallDotNetExample6 ikinci düğme seçildikten sonra işlenmiş üst bileşen gösterilmektedir InteropCall :

• İkinci ListItem bileşen UpdateMessage Called! iletiyi görüntülendi.
• InteropCall ListItem Düğmenin CSS display özelliği olarak ayarlandığı için ikinci bileşen düğmesi görünür değil none .

JavaScipt konumu

JS JS Birlikte çalışabilirlik genel bakış makalesindeaçıklanan yaklaşımlardan birini kullanarak JavaScript () kodunu yükleyin:

• <head> İşaretlemede bir betiği yükle (genellikle önerilmez)
• İşaretlemede bir betiği yükleme <body>
• Dış JS dosyadan () bir betik Yükle .js
• Başlatıldıktan sonra bir betik Ekle Blazor

Döngüsel nesne başvurularından kaçının

Döngüsel başvurular içeren nesneler, her biri için istemcide serileştirilemiyor:

• .NET yöntemi çağrıları.
• Dönüş türünün döngüsel başvuruları olduğunda C# ' den JavaScript Yöntem çağrıları.

JavaScript birlikte çalışma çağrılarında boyut sınırları

Bu bölüm yalnızca uygulamalar için Blazor Server geçerlidir. içinde, çerçeve JavaScript (JS) birlikte çalışma giriş Blazor WebAssembly ve çıkışlarının boyutuna bir sınır uygulamaz.

'de, JS birlikte çalışma çağrıları, hub yöntemleri için izin verilen en büyük gelen ileti boyutuyla sınırlıdır ve bu da Blazor Server SignalR tarafından HubOptions.MaximumReceiveMessageSize zorlanır (varsayılan olarak: 32 KB). JS'den SignalR .NET'e iletiler MaximumReceiveMessageSize hata verir. Çerçeve, hub'dan istemciye ileti SignalR boyutuna bir sınır dayatmaz.

Günlüğe SignalR kaydetme Hata Ayıklama veya İzleme olarak ayarlanmasa, yalnızca tarayıcının geliştirici araçları konsolunda ileti boyutu hatası görüntülenir:

Hata: Bağlantı şu hatayla kesildi: 'Hata: Sunucu kapatılırken bir hata döndürüldü: Bağlantı bir hatayla kapatıldı.'.

Sunucu SignalR tarafı günlüğe kaydetme Hata Ayıklama veya İzleme olarak ayarlanırsa,sunucu tarafı günlük kaydı ileti boyutu hatası için bir ortaya InvalidDataException çıkar.

appsettings.Development.json:

{
  "DetailedErrors": true,
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information",
      "Microsoft.AspNetCore.SignalR": "Debug"
    }
  }
}

Hata:

System.IO.InvalidDataException: İleti boyutu üst sınırı 32768B aşıldı. İleti boyutu AddHubOptions içinde yalıtabilirsiniz.

içinde ayarını kullanarak sınırı MaximumReceiveMessageSize Startup.ConfigureServices artırabilirsiniz:

services.AddServerSideBlazor()
    .AddHubOptions(options => options.MaximumReceiveMessageSize = 64 * 1024);

Gelen ileti boyutu sınırının artırılması, daha fazla sunucu kaynağı gerektirmenin maliyetine neden olur ve kötü amaçlı bir kullanıcının artan risklerine SignalR karşı sunucuyu ortaya çıkarır. Buna ek olarak, bellekte dize veya byte dizileri olarak büyük miktarda içeriğin okunması atık toplayıcı ile kötü şekilde çalışarak ek performans cezalarına neden olan ayırmalara da neden olabilir.

Büyük yüklerin okunması için bir seçenek, içeriği daha küçük öbekler halinde göndermek ve yükü olarak Stream işlemektir. Bu, büyük JSON yüklerini okurken veya veriler JS'de ham bayt olarak kullanılabilir durumda olduğunda kullanılabilir. bileşenine benzer teknikler kullanan içinde büyük ikili yük göndermeyi gösteren bir örnek Blazor Server InputFile içinbkz. İkili Gönderme örnek uygulaması.

JS ile uygulamalar arasında büyük miktarda veri aktaran kod geliştirme konusunda aşağıdaki kılavuzu Blazor göz önünde Blazor Server bulundurabilirsiniz:

• Verileri daha küçük parçalara dilimler ve tüm veriler sunucu tarafından alınana kadar veri kesimlerini sırayla gönderin.
• JS ve C# kodunda büyük nesneleri ayırmayın.
• Veri gönderirken veya alırken ana kullanıcı arabirimi iş parçacığını uzun süre engellemeyebilirsiniz.
• İşlem tamamlandığında veya iptal edilirken tüketilen belleği serbest bırak.
• Güvenlik amacıyla aşağıdaki ek gereksinimleri zorunlu kılın:
  • Geçir konan en büyük dosya veya veri boyutunu bildirebilirsiniz.
  • İstemciden sunucuya en düşük karşıya yükleme oranını bildirin.
• Veriler sunucu tarafından alındıktan sonra şu veriler olabilir:
  • Tüm segmentler toplanana kadar geçici olarak bir bellek arabelleğinde depolanır.
  • Hemen tüketilir. Örneğin, veriler hemen bir veritabanında depolanmış veya diske yazıldığı için her kesim alınmıştır.

Ek kaynaklar

• .NET yöntemlerinden JavaScript işlevlerini ASP.NET Core Blazor
• InteropComponent.razor örnek (dotnet/aspnetcore GitHub depo main dalı): main dal, bir sonraki ASP.NET Core sürümü için ürün biriminin güncel gelişimini temsil eder. Farklı bir sürümün dalını seçmek için (örneğin, release/5.0 ) dalı seçmek için dalları veya etiketleri Değiştir açılan listesini kullanın.
• Belge Nesne Modeli etkileşimi (DOM)