c# - 如何在jquery对话框窗口弹出之前将数据绑定(bind)到图表？

Question

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

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

我的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

最简单的方法是在回发期间使用 Page 对象上的 ClientSriptManager 将脚本添加到页面。

删除现有的 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")。页面加载后，对话框(“打开”)；。