javascript - 如果我将 Div 设置为 runat ="server"，则不显示 Jqwidgets 图表

Question

<div id="host" class="graph-container divsub" runat="server" style="padding: 0px;margin-left: 30px;">
        <div id="jqxChartApvilla" style="width: 610px; height: 370px;" runat="server">
        </div>
</div>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />

放置此 div runat="server" 的原因是我想将图表导出到 excel 并且单击按钮我正在将图表导出到 excel 。以下是将div数据导出到excel的代码

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs)
    Response.Clear()
    Response.AddHeader("content-disposition", "attachment;filename=FileName.xls")
    Response.Charset = ""
    Response.ContentType = "application/vnd.xls"
    Dim stringWrite As New System.IO.StringWriter()
    Dim htmlWrite As System.Web.UI.HtmlTextWriter = New HtmlTextWriter(stringWrite)
    host.RenderControl(htmlWrite)
    Response.Write(stringWrite.ToString())
    Response.[End]()
End Sub

下面是生成 Jqwidgets 图表的 java 脚本...图表工作正常

    $(document).ready(function() {

        $.ajax({
            type: 'GET',
            dataType: 'json',
            async: false,
            url: 'http://localhost:53807/UI/WebService1.asmx/Apvilladata',
            cache: false,
            contentType: 'application/json; charset=utf-8',
            success: function(data) {
                source = $.parseJSON(data.d);
            },
            error: function(err) {
                alert('Error');
            }
        });


        // prepare jqxChart settings
        var settings = {
            title: "Age Wise Population @Lavasa",
            description: "",

            showLegend: true,
            padding: { left: 15, top: 15, right: 5, bottom: 5 },
            titlePadding: { left: 0, top: 10, right: 20, bottom: 10 },
            source: source,
            enableAnimations: true,
            //   description: "Time spent in vigorous exercise by activity",

            categoryAxis:
                {
                    dataField: 'Age',
                    description: '',
                    showGridLines: false,
                    showTickMarks: true

                },
            colorScheme: 'scheme02',
            seriesGroups:
                [
                    {

                        type: 'column',
                        columnsGapPercent: 50,
                        seriesGapPercent: 0,


                        valueAxis: {
                            description: 'Age Wise Count',

                            unitInterval: 10,
                            minValue: 0,
                            maxValue: 150,
                            displayValueAxis: true,
                            description: 'Visitors Count',
                            axisSize: 'auto',
                            tickMarksColor: '#888888',






                        },
                        click: myEventHandler,
                        series: [
                                { dataField: 'Rent', displayText: 'Rent' },
                                { dataField: 'Owned', displayText: 'Owned' }
                            ]
                    }
                    ]
        };
        function myEventHandler(e) {

            var eventData = '<div><b>Last Event: </b>' + e.event + '<b>, DataField: </b>' + e.serie.dataField + '<b>, Value: </b>' + e.elementValue + '<b>, X-Axis: </b>' + e.elementIndex + "</div>"; //
            document.getElementById("<%=hfdatafield.ClientID %>").value = e.serie.dataField;
            document.getElementById("<%=hfvalue.ClientID %>").value = e.serie.elementValue;
            document.getElementById("<%=hfMonth.ClientID %>").value = e.elementIndex;

            // alert(document.getElementById("<%=hfMonth.ClientID %>").value);

            $('#dvmonth').html(document.getElementById("<%=hfMonth.ClientID %>").value);
            $('#eventText').html(eventData);
            document.getElementById('<%= btnshowgrid.ClientID%>').click();
         };

           $('#jqxChartApvilla').jqxChart(settings);




    });

Answer 1

尝试将此属性添加到您的 DIV ( ClientIDMode="Static")。

<div id="host" class="graph-container divsub" ClientIDMode="Static" runat="server" style="padding: 0px;margin-left: 30px;">
        <div id="jqxChartApvilla" style="width: 610px; height: 370px;" runat="server">
        </div>
</div>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />