JavaScript диаграмма не отображается внутри AJAX UpdatePanel - PullRequest
Новая
       55

JavaScript диаграмма не отображается внутри AJAX UpdatePanel

0 голосов
/ 06 апреля 2020

У меня есть JavaScript диаграмма (Диаграмма. js) в моем приложении C# для веб-форм. Диаграмма будет отлично отображаться за пределами AJAX UpdatePanel, но когда я помещу ее в UpdatePanel, она вообще не появится. Я прочитал несколько связанных тем и знаю, как заставить JavaScript работать внутри UpdatePanel, но Chart. js просто не будет работать. В чем может быть причина и как я могу исправить эту проблему?

Любая помощь будет в значительной степени востребована. Ниже мой код: 

<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <asp:UpdatePanel runat="server" id="UpdatePanel1" UpdateMode="Conditional" >
        <ContentTemplate>
          <asp:Button ID="btnShowData" runat="server" Text="Show Data" OnClick="btnShowData_Click" />
          <br/>
          <canvas id="myChart" width="400" height="250"></canvas>                    
        </ContentTemplate>
    </asp:UpdatePanel>
</form>

protected void btnShowData_Click(object sender, EventArgs e)
{
    //Run method to get data from SQL database, which is converted to string and passed to JavaScript to create the chart.

    string X = stringArrayromDatabase;
    string scriptText = "<script type=text/javascript> chartFunction(" + stringArrayFromDatabase + ") </script>";

    //This code will work, meaning I've done things correctly with the RegisterStartupScriptmethod:
    ScriptManager.RegisterStartupScript(this, this.GetType(), "", "alert('Hello')", true);

    //Upon running this code, I expect my JavaScript chart will appear in the web page but it doesn't:
    ScriptManager.RegisterStartupScript(this, this.GetType(), "", scriptText, true);
}

РЕДАКТИРОВАТЬ: Ниже мой код JavaScript для chartFunction (). Это простой график, который я скопировал отсюда: https://jsfiddle.net/red_stapler/u5aanta8/1/. Эта диаграмма работает, когда я помещаю ее вне AJAX UpdatePanel.

Причина, по которой я использую UpdatePanel, заключается в том, что после нажатия кнопки btnShowData я запускаю метод для получения данных из SQL, которые затем преобразуются в строку & передается в JavaScript код, который генерирует отображение диаграммы. Из-за этого вся моя страница обновляется, когда я нажимаю btnShowData, что заставляет меня думать, что мне нужно использовать UpdatePanel. 

function chartFunction(stringArrayFromDatabase) {
    var canvas = document.getElementById('myChart');
    var data = {
        labels: ["January", "February", "March", "April", "May"],
        datasets: [
            {
                label: "My First dataset",
                borderColor: "rgba(75,192,192,1)",
                data: stringArrayFromDatabase,
            }
        ]
    };
    var option = {
        showLines: true
    };
    var myLineChart = new Chart(canvas,{
        type:'line',
        data:data,
      options:option
    }

1 Ответ

0 голосов
/ 06 апреля 2020

также важно, чтобы вы разделяли код метода chartFunction (), с другой стороны, анализируя ваш код, я думаю, вы пытаетесь нажать кнопку и показать информацию о графике, согласно этому посту: { ссылка } Это говорит о том, что вам не нужно использовать обновление панели при вызове функций.

Вы можете контролировать обновление диаграммы с помощью javascript, в соответствии с диаграммой js документация: https://www.chartjs.org/docs/latest/developers/updates.html

Хорошего дня!

...