Question

我正在开发一个连接到Azure数据库的Web应用程序。我试图根据来自radiolist的用户选择和两个输入的时间参数生成图表。我想在用户单击请求图形按钮时在弹出的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");。 / p>

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

1 个答案: