Отправка данных и список сериализации Json для веб-браузера в WPF C # - PullRequest
0 голосов
/ 17 июня 2019

Я хочу достичь как этот цикл:

  • Сохранить много данных в списке <>
  • Отправить список <> в WebBrowser Html
  • Преобразовать список <> Json Serialize
  • Использовать элементы списка в JavaScript (ChartJs)

Я достиг этого цикла в Asp.Net Core. Я отправлял данные @Model в Html и отлично отображал график. Вот пример моего приложения WPF C #:

My MainWindow.xaml.cs:

using System.IO;
using System.Windows;

namespace DrakiSlow
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            int[] x_axes = { 1997, 2003, 2005, 2009, 2014, 2018, 2019, 2011, 2016 };
            int[] y_axes = { 1, 3, 5, 3, 1, 18, 9, 11, 4 };

            string curDir = Directory.GetCurrentDirectory();
            string myFile = System.IO.Path.Combine(curDir, "My.html");
            MyWeb.Navigate("file:///" + myFile);
        }
    }
}

My MainWindow.xaml:

<Window x:Class="DrakiSlow.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:DrakiSlow"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <WebBrowser x:Name="MyWeb" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
    </Grid>
</Window>

Мой добавленный файл My.Html:

<!DOCTYPE html>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<meta http-equiv="X-UA-Compatible" content="IE=11; IE=EmulateIE11; IE=9; IE=8; IE=7; IE=EDGE" />
<link rel="stylesheet" type="text/css" href="style.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css"></style>
<html>
<head>
    @section Scripts{
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

    <script>
        var ctx = document.getElementById('myChart').getContext('2d');

        // Here is My Problem Can not To Get My Arrays To Here. I want to get x_axes array and y_axes array to here.

        var modelx = @Html.Raw(Json.Serialize(x_axes));
        var modely = @Html.Raw(Json.Serialize(y_axes));

        var mydata = [];
        for (var i = 0; i < modelx.length; i++) {
            var obj = { x: modelx[i], y: modely[i] };
            mydata.push(obj);
        }

        var myChart = new Chart(ctx, {
            type: 'scatter',
            data: {
                labels: xAxis,
                datasets: [{
                    label: '# of Votes',
                    data: mydata,
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                }
            }
        });
    </script>
    }
</head>
<body>
    <div><canvas id="myChart" width="400" height="400"></canvas></div>
</body>
</html>

Моя цель, массивы [] x_axes и [] y_axes отправлять из MainWindow.xaml.cs в My.html и использовать в My.html javascript.

Теперь я хочу достичь в WPF C #, потому что я хочу использовать ChartJS Пожалуйста, помогите мне. *

...