OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

passing data back from an event in javascript to Blazor WASM

  • Thread starter Thread starter user21415940
  • Start date Start date
U

user21415940

Guest
I've been struggling with this for some days now and need some help. Javascript is way out of my comfort zone.

My project is a Net 8 Blazor WASM application.

What I am trying to achieve is to create a custom wrapper around Apache ECharts 5.5.0 for a project. I have seen the options available on GitHub and the one I like doesn't do what I want to do, which is capture when a data point is clicked on the chart and allow that data to be used. Depending on what the user selects will depend on the next action taken by the user interface.

A lot of these Blazor Javascript wrappers on Github appear to be junk or not maintained regularly which makes me nervous if an upgrade is required which breaks the library. The actual ECharts interface is pretty simple so it is not taking much time to create a custom wrapper apart from this one issue.

Where I have got to so far is - if I do this in Javascript:

Code:
export function pieChart(element, options) {
    var myChart = echarts.init(document.getElementById(element));

    window.addEventListener('resize', function () {
        myChart.resize();
    });

    myChart.on("click", function (event) {
        const eventData  = event.data;

        console.log(eventData);
}

The console outputs:

console output

Which is perfect and exactly what I want but I also want to pass this back to Blazor so it can be actioned.

It seems that the onclick event will only map to MouseEventArgs:

The Div is:

Code:
<div id="@chartID" style="@divStyle" @onclick="@OnClick"></div>

and the on click that works is:

Code:
private void OnClick(MouseEventArgs args)
{
    Console.WriteLine(args);
}

So I've been trying to find a way to trigger a custom event from Javascript which allows me to pass back custom arguments and everything I try either doesn't work or doesn't compile. This is the latest state of affairs:

1 - A custom event args class:

Code:
public class ChartClickedEventArgs : EventArgs
{
    [JsonPropertyName("name")]
    public string? Name { get; set; }

    [JsonPropertyName("value")] 
    public double Value { get; set; }
}

2 - Updated my click event in Javascript:

Code:
myChart.on("click", function (event) {
    const eventData  = event.data;

    console.log(eventData);

    var newEvent = new CustomEvent('chartclicked', event.data);

    document.dispatchEvent(newEvent);
})

3 - Added this code to my index.html

Code:
<script src="_framework/blazor.webview.js" autostart="false"></script>
<script>
    Blazor.registerCustomEventType('chartclicked', {
        createEventArgs: event => {
            return { name: event.name, value: event.value };
        }
    });
</script>

4 - Updated the Div:

Code:
<div id="@chartID" style="@divStyle" @onclick="@OnClick" @chartclicked="@ChartClicked"></div>

5 - Created the event function:

Code:
private void ChartClicked(ChartClickedEventArgs args)
 {
     Console.WriteLine("Blazor reports: " + args);
 }

And VS shows this warning on the Div definition:

VS Error

And when I run the app it crashes with:

Blazor runtime error

I feel like I'm getting close but cannot get this to work. If anyone can help fix this or explain an alternative way of doing to then it would be very much appreciated.

<p>I've been struggling with this for some days now and need some help. Javascript is way out of my comfort zone.</p>
<p>My project is a Net 8 Blazor WASM application.</p>
<p>What I am trying to achieve is to create a custom wrapper around Apache ECharts 5.5.0 for a project. I have seen the options available on GitHub and the one I like doesn't do what I want to do, which is capture when a data point is clicked on the chart and allow that data to be used. Depending on what the user selects will depend on the next action taken by the user interface.</p>
<p>A lot of these Blazor Javascript wrappers on Github appear to be junk or not maintained regularly which makes me nervous if an upgrade is required which breaks the library. The actual ECharts interface is pretty simple so it is not taking much time to create a custom wrapper apart from this one issue.</p>
<p>Where I have got to so far is - if I do this in Javascript:</p>
<pre><code>export function pieChart(element, options) {
var myChart = echarts.init(document.getElementById(element));

window.addEventListener('resize', function () {
myChart.resize();
});

myChart.on("click", function (event) {
const eventData = event.data;

console.log(eventData);
}
</code></pre>
<p>The console outputs:</p>
<p><a href="https://i.sstatic.net/53zOEaHO.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/53zOEaHO.png" alt="console output" /></a></p>
<p>Which is perfect and exactly what I want but I also want to pass this back to Blazor so it can be actioned.</p>
<p>It seems that the onclick event will only map to MouseEventArgs:</p>
<p>The Div is:</p>
<pre><code><div id="@chartID" style="@divStyle" @onclick="@OnClick"></div>
</code></pre>
<p>and the on click that works is:</p>
<pre><code>private void OnClick(MouseEventArgs args)
{
Console.WriteLine(args);
}
</code></pre>
<p>So I've been trying to find a way to trigger a custom event from Javascript which allows me to pass back custom arguments and everything I try either doesn't work or doesn't compile. This is the latest state of affairs:</p>
<p>1 - A custom event args class:</p>
<pre><code>public class ChartClickedEventArgs : EventArgs
{
[JsonPropertyName("name")]
public string? Name { get; set; }

[JsonPropertyName("value")]
public double Value { get; set; }
}
</code></pre>
<p>2 - Updated my click event in Javascript:</p>
<pre><code>myChart.on("click", function (event) {
const eventData = event.data;

console.log(eventData);

var newEvent = new CustomEvent('chartclicked', event.data);

document.dispatchEvent(newEvent);
})
</code></pre>
<p>3 - Added this code to my index.html</p>
<pre><code><script src="_framework/blazor.webview.js" autostart="false"></script>
<script>
Blazor.registerCustomEventType('chartclicked', {
createEventArgs: event => {
return { name: event.name, value: event.value };
}
});
</script>
</code></pre>
<p>4 - Updated the Div:</p>
<pre><code><div id="@chartID" style="@divStyle" @onclick="@OnClick" @chartclicked="@ChartClicked"></div>
</code></pre>
<p>5 - Created the event function:</p>
<pre><code>private void ChartClicked(ChartClickedEventArgs args)
{
Console.WriteLine("Blazor reports: " + args);
}
</code></pre>
<p>And VS shows this warning on the Div definition:</p>
<p><a href="https://i.sstatic.net/QAAt36nZ.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/QAAt36nZ.png" alt="VS Error" /></a></p>
<p>And when I run the app it crashes with:</p>
<p><a href="https://i.sstatic.net/ob8nmuA4.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/ob8nmuA4.png" alt="Blazor runtime error" /></a></p>
<p>I feel like I'm getting close but cannot get this to work. If anyone can help fix this or explain an alternative way of doing to then it would be very much appreciated.</p>
 

Latest posts

Online statistics

Members online
0
Guests online
2
Total visitors
2
Ads by Eonads
Top