如何在弹出 jquery 对话框窗口之前将数据绑定到图形？

Question

我正在开发一个连接到 Azure 数据库的 Web 应用程序。我正在尝试根据用户从无线电列表和两个输入的时间参数中选择来生成图表。当用户单击请求图按钮时，我想在弹出的 jquery 对话框中显示此图。

我的问题是点击请求图按钮以及调用jquery对话框时绑定了数据，所以弹出jquery对话框但没有显示图。有什么方法可以在执行 jquery 之前将数据绑定到图表，从而在弹出框中显示图表。

我的aspx代码：

<script>
    $(function () {
        $("#Chart1").dialog({
            autoOpen: false
        });
        $("#RequestGraph_Btn").on("click", function () {
            $("#Chart1").dialog("open");

            return false;
        });

    });
</script>


<asp:Button ID="RequestGraph_Btn" runat="server" Text="Request Graph" style="height:114px;width:147px;" OnClick="RequestGraph_Btn_Click" />


<asp:Chart ID="Chart1" runat="server" Height ="300px" Width ="700">
    <series>
        <asp:Series ChartType="Line" Name="Series1" ToolTip ="Value of Time:#VALX Value of AP:#VALY">
        </asp:Series>
    </series>
    <chartAreas>
        <asp:ChartArea Name="ChartArea1">
            <AxisY Title ="Atmosphere">
            </AxisY>
            <AxisX Title ="Time">
            </AxisX>
        </asp:ChartArea>
    </chartAreas>
</asp:Chart>

还有我的 aspx.cs 代码：

protected void RequestGraph_Btn_Click(object sender, EventArgs e)
    {
        radioSelection = RadioButtonList1.SelectedValue;

        bindGraph();
    }


    private void bindGraph()
    {
        // retrieve connection from configuration settings 
        connection = new SqlConnection(RoleEnvironment.GetConfigurationSettingValue("DataConnectionString").ToString());

        // Calling SQL query 
        command = new SqlCommand("SELECT time, "+radioSelection+" FROM Buoy3v3 WHERE time > '"+TextBox1_fromDate.Text+"' AND time < '"+TextBox2_toDate.Text+"';", connection);
        command.CommandType = CommandType.Text;

        ds = new DataSet();

        //connection open
        connection.Open();
        adapter = new SqlDataAdapter();
        adapter.SelectCommand = command;

        // fill data set
        adapter.Fill(ds);

        //connection close
        connection.Close();

        //add the data to the Chart and select x and y axis 

        Chart1.DataSource = ds;
        Chart1.Series["Series1"].XValueMember = "time";
        Chart1.Series["Series1"].YValueMembers = radioSelection;

    }

感谢任何可以提供任何帮助的人。

Answer 1

执行此操作的最简单方法是在回发期间使用ClientSriptManager 将脚本添加到页面中，该Page 对象上。

删除您现有的 Javascript 代码块并尝试以这样的方式构建它。

protected void RequestGraph_Btn_Click(object sender, EventArgs e)
{
    radioSelection = RadioButtonList1.SelectedValue;

    bindGraph();

    String csname1 = "PopupScript";
    Type cstype = this.GetType();

    // Get a ClientScriptManager reference from the Page class.
    ClientScriptManager cs = Page.ClientScript;

    // Check to see if the startup script is already registered.
    if (!cs.IsStartupScriptRegistered(cstype, csname1))
    {
        string script = @"$(document).ready(function() {
                $("#Chart1").dialog("open");
        });";

        StringBuilder cstext1 = new StringBuilder();
        cstext1.Append("<script type=text/javascript>");
        cstext1.Append(script);
        cstext1.Append("</script>");

        // add script to page
        cs.RegisterStartupScript(cstype, csname1, cstext1.ToString());
    }
}

这将导致 Javascript 附加到页面并在加载而不是点击时执行。

基本上，一旦您的 *Button_Click* 事件触发，它将在 bindGraph() 内完成工作，然后在页面加载后附加一小段 Javascript 以调用 $("#Chart1").dialog("open");。