none
我用 C# 寫網頁 但裡面有插一些javascript 的語法,而C#裡面有一個gridview 是連mssql中的資料,想請問一下我能把gridview中某欄的值丟到javascript中要顯示的地方? RRS feed

  • 問題

  • 有個D3圖檔我引用的 http://bl.ocks.org/brattonc/5e5ce9beee483220e2f6:

    底下是C#前端的程式碼:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>MIS雨量測量</title>
        <link href="css/bootstrap.min.css" rel="stylesheet" />
        <script src="http://d3js.org/d3.v3.min.js"></script>
        <script src="liquidFillGauge.js"></script>
        <style type="text/css">
            .liquidFillGaugeText {
                font-family: Helvetica;
                font-weight: bold;
            }

            .auto-style6 {
                ;
                min-height: 1px;
                top: 0px;
                left: 0px;
                width: 50%;
                float: left;
                text-align: center;
                padding-left: 15px;
                padding-right: 15px;
            }

            .auto-style7 {
                ;
                min-height: 1px;
                top: 0px;
                left: 0px;
                width: 50%;
                float: left;
                font-size: x-large;
                padding-left: 15px;
                padding-right: 15px;
                text-align: center;
            }

            .auto-style8 {
                ;
                min-height: 1px;
                top: 0px;
                left: 0px;
                width: 50%;
                float: left;
                font-weight: normal;
                padding-left: 15px;
                padding-right: 15px;
                text-align: center;
            }

            .auto-style9 {
                font-size: 40px;
                font-weight: bold;
            }

            .auto-style10 {
                ;
                min-height: 1px;
                top: 0px;
                left: 0px;
                width: 25%;
                text-align: center;
                float: left;
                font-weight: bold;
                padding-left: 15px;
                padding-right: 15px;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <div class="container-fluid">
                    <div class="jumbotron" style="height: 280px;">
                        <h1 class="text-center" style="font-weight: bold;">雨量測量</h1>
                        <br />
                        <br />
                        <div class="auto-style10">
                            <h2 style="font-weight: bold;">所在位置:<asp:Label ID="location" runat="server" Text="Label"></asp:Label></h2>
                        </div>
                        <div class="col-md-3">
                            <h2 style="font-weight: bold;">目前時間:<asp:Label ID="time" runat="server" Text="Label"></asp:Label></h2>
                        </div>
                        <div class="col-md-3">
                            <h2 style="font-weight: bold;">溫度:<asp:Label ID="temp" runat="server" Text="Label"></asp:Label></h2>
                        </div>
                        <div class="col-md-3">
                            <h2 style="font-weight: bold;">濕度:<asp:Label ID="hum" runat="server" Text="Label"></asp:Label></h2>
                        </div>
                    </div>
                    <div class="container-fluid">
                        <div class="jumbotron">
                            <div class="auto-style6">
                                <h2 style="font-weight: bold; ; left: 200px; top: -20px">延遲時間:<asp:DropDownList ID="DropDownList1" AutoPostBack="True"
                                    runat="server">
                                    <asp:ListItem Selected="True" Value="White"> 5 </asp:ListItem>
                                    <asp:ListItem Value="10"> 10 </asp:ListItem>
                                    <asp:ListItem Value="15"> 15 </asp:ListItem>
                                    <asp:ListItem Value="20"> 20 </asp:ListItem>
                                    <asp:ListItem Value="25"> 25 </asp:ListItem>
                                    <asp:ListItem Value="30"> 30 </asp:ListItem>
                                    <asp:ListItem Value="35"> 35 </asp:ListItem>
                                    <asp:ListItem Value="40"> 40 </asp:ListItem>
                                    <asp:ListItem Value="45"> 45 </asp:ListItem>
                                    <asp:ListItem Value="50"> 50 </asp:ListItem>
                                    <asp:ListItem Value="55"> 55 </asp:ListItem>
                                    <asp:ListItem Value="60"> 60 </asp:ListItem>
                                </asp:DropDownList>
                                    秒
                                </h2>
                            </div>
                            <div class="auto-style6">
                                <h2 style="font-weight: bold; ; left: 250px; top: -20px" class="text-center">開始測量:<asp:Button ID="start" runat="server" Text="開始" /></h2>
                            </div>
                            </br>
                        </div>
                    </div>
                    <div class="container-fluid">
                        <div class="jumbotron" style="height: 550px;">
                            <div class="auto-style7"><span style="font-weight: bold" class="auto-style9">雨量筒模擬圖</span></div>
                            <div class="auto-style8"><span style="font-weight: bold; ; top: -10px; right: 175px;" class="auto-style9">歷史資料</span></div>
                            </br>
                            </br>
                            </br>
                            <div class="row">
                                <div class="col-md-3">
                                    <svg id="fillgauge1" width="100%" height="450"></svg>
                                </div>
                                <div class="col-md-3">
                                    <div style="; left: 80px; top: 120px"><strong class="auto-style9">目前水位:<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>&nbsp;cm</strong></div>
                                </div>
                                <div class="col-md-4 col-md-offset-5">
                                    <asp:GridView ID="GridView1" runat="server" AllowPaging="True" AutoGenerateColumns="False" DataKeyNames="no" DataSourceID="SqlDataSource1" BackColor="#DEBA84" BorderColor="#DEBA84" BorderStyle="None" BorderWidth="1px" CellPadding="3" CellSpacing="2">
                                        <Columns>
                                            <asp:BoundField DataField="no" HeaderText="no" InsertVisible="False" ReadOnly="True" SortExpression="no" />
                                            <asp:BoundField DataField="waterhigh" HeaderText="waterhigh" SortExpression="waterhigh" />
                                            <asp:BoundField DataField="hour" HeaderText="hour" SortExpression="hour" />
                                            <asp:BoundField DataField="min" HeaderText="min" SortExpression="min" />
                                            <asp:BoundField DataField="sec" HeaderText="sec" SortExpression="sec" />
                                        </Columns>
                                        <FooterStyle BackColor="#F7DFB5" ForeColor="#8C4510" />
                                        <HeaderStyle BackColor="#A55129" Font-Bold="True" ForeColor="White" />
                                        <PagerStyle ForeColor="#8C4510" HorizontalAlign="Center" />
                                        <RowStyle BackColor="#FFF7E7" ForeColor="#8C4510" />
                                        <SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="White" />
                                        <SortedAscendingCellStyle BackColor="#FFF1D4" />
                                        <SortedAscendingHeaderStyle BackColor="#B95C30" />
                                        <SortedDescendingCellStyle BackColor="#F1E5CE" />
                                        <SortedDescendingHeaderStyle BackColor="#93451F" />
                                    </asp:GridView>
                                    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:stu2017ConnectionString %>" SelectCommand="SELECT * FROM [test8] ORDER BY [no] DESC"></asp:SqlDataSource>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
        <script>
            var gauge1 = loadLiquidFillGauge("fillgauge1", 0);
            var config1 = liquidFillGaugeDefaultSettings();
            var t = da
            function value() {
                return gauge1.update(NewValue());
            }
            var timer = setInterval(value, 1000);
            //var t = 0;
            function NewValue() {
    t = Math.round(Math.random() * 300);<-------我要把亂數這邊改成gridview裡的某欄值或根上面目前水位中的值一樣請問要怎麼改?         
                return t;
            }
        </script>
    </body>
    </html>

               
    2017年9月19日 上午 09:07

所有回覆