我正在开发一个连接到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;

    }


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

最佳答案

最简单的方法是在回发期间使用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");

10-05 20:49
查看更多