Question

我试图在Bootstrap Modal Popup中显示条形图。但是当它在UpdatePanel之外调用时一切都很好。

如果我在UpdatePanel内调用购物车，它什么也没显示。请帮帮我：

我的jQuery：

<script type="text/javascript">

    var randomScalingFactor = function () { return Math.round(Math.random() * 100) };
    var lineChartData =
        {
        //labels: ["January", "February", "March", "April", "May", "June", "July"],
        labels: <% =this.ChartLabels %>,
            datasets: 
                [
                    {
                        label: "Query Count",
                        fillColor: "rgba(220,220,220,0.2)",
                        strokeColor: "rgba(220,220,220,1)",
                        pointColor: "rgba(220,220,220,1)",
                        pointStrokeColor: "#fff",
                        pointHighlightFill: "#fff",
                        pointHighlightStroke: "rgba(220,220,220,1)",
                        //data: [0, 1, 4, 6, 10, 8, 6]
                        data: <% =this.ChartData1 %>
                    },
                    {
                        label: "My Second dataset",
                        fillColor: "rgba(151,187,205,0.2)",
                        strokeColor: "rgba(151,187,205,1)",
                        pointColor: "rgba(151,187,205,1)",
                        pointStrokeColor: "#fff",
                        pointHighlightFill: "#fff",
                        pointHighlightStroke: "rgba(151,187,205,1)",
                        //data: [28, 48, 40, 19, 86, 27, 90]
                        data: <% =this.ChartData2 %>
                    }
            ]
    }
    //Sys.WebForms.PageRequestManager.getInstance().add_endRequest(RunThisAfterEachAsyncPostback);
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
    function EndRequestHandler(sender, args) {
        if (args.get_error() == undefined) {
            DrawChart();
        }
    }
    function DrawChart() 
    {
        //Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

        //Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);

        var ctx = document.getElementById("canvas").getContext("2d");
        window.myLine = new Chart(ctx).Bar(lineChartData, {
            responsive: true
        });
    }
    $('#modChart').modal('show')
    DrawChart();
</script>

我从CodeBehind调用Jquery：

protected void Button1_Click(object sender, EventArgs e)
    {
 public string ChartLabels = null;
    public string ChartData1 = null;
    public string ChartData2 = null;
        this.ChartLabels = "['January', 'February', 'March', 'April', 'May', 'June', 'July']";
        this.ChartData1 = "[65, 59, 80, 81, 56, 55, 40]";
        this.ChartData2 = "[28, 48, 40, 19, 86, 27, 90]";
        ScriptManager.RegisterStartupScript(this, this.GetType(), "CallMyFunction", "DrawChart()", true);


    }

UpdatePanel中的我的ASPX按钮：

      <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
    <ContentTemplate>              
    <div class="modal fade" id="modChart" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                    </button>
                    <h4 class="modal-title" id="exampleModalLabel">Linechart</h4>
                </div>
                <div class="modal-body">
                    <div>
                        <canvas id="canvas" width="568" height="300"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />        
</ContentTemplate>          
</asp:UpdatePanel>

使用Bootstrap Modal在UpdatePanel中的Chart.js

0 个答案: