question

Max-4629 avatar image
0 Votes"
Max-4629 asked ZhiLv-MSFT commented

Blazor is refreshing the page by JsInteropt call (Using Babylon)

I'm using Blazor with Babylon Js to use 3D objekts.
I'm trying to resize the 3D objekt by a user input (C# code). After the input i wanna call a JavaScript code by JsInteropt, it is called but not executed also the page is refreshing and after all the user input is gone.

Razor Page

 @page "/"
    
 @inject IJSRuntime m_jSRuntime
    
 <h1>Rotating Cube</h1>
 <form>
     <label>Kante A <input id="KanteA" type="text" size="8" @bind="kanteA" /></label>
 </form>
 <form>
     <label>Kante B <input id="KanteB" type="text" size="8" @bind="kanteB" /></label>
 </form>
 <form>
     <button id="btn Change" @onclick="click => ChangeSize()">Ändern</button>
 </form>
    
 @code
 {
     double kanteA; 
     double kanteB; 
    
     public async Task ChangeSize()
     {
         try
         {
           await m_jSRuntime.InvokeAsync<Objekt>("babylonInterop.resizeBox");
         }
         catch
         {
             Console.Write("Error");
         }
     }
 }

Resize Code

 babylonInterop.resizeBox = function (kanteA, kanteB) {
    
     mainscene.stopRenderLoop();
    
     console.trace("2");
    
     console.log(scene.getMeshByName("Box"))
     var box = scene.getMeshByName("Box").setEnabled(true);
    
     var kanteA = document.getElementById('KanteA').value
     var kanteB = document.getElementById('KanteB').value
        
     box = new BABYLON.Vector3(kanteA, kanteB, kanteA)
     engine.resize();
    
     return scene;
 };



dotnet-aspnet-core-blazor
· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi @Max-4629,

After the input i wanna call a JavaScript code by JsInteropt, it is called but not executed also the page is refreshing and after all the user input is gone.

In the ChangeSize method, you can store the user entered value to the Browser Storage (localStorage and sessionStorage), then after the page/component refresh, you can get the value from Browser Storage and bind value to the textbox.

Best regards,
Dillion

0 Votes 0 ·

0 Answers