更新された状態がリアルタイムで反映されるモニター画面の作成をしたい

前提・実現したいこと

Visual Studio2015, SQL Server 2016 Management Studio
ASP.NET(VB.NET) を使用しています。

たくさんあるトイレの使用状態をリアルタイムでモニターできるような
画面を作成したいと考えております。
(トイレというのはサンプル用のもので実際モニターしたいことは違いますが…)
トイレの状態を変化させる画面、それを表示する画面を作成しましたが、
この2つの別画面をリンクさせるような方法が分かりません。
(TimerでDatabindという方法を上司に提案したところ却下されました)

作成したもの

まずwebフォームで何階の何番のトイレを使用中/出ると状態を変えるものを作成しました。
各ボタンを押したらUPDATEでDBを更新します。
aspx.vbは単純なUPDATE文で動作確認済ですので省略致します。必要ならば追記致します。
SignalRが使えるのではないか、と思いNugetからgetし、見様見真似で書いたJqueryも書いています。
動作はしません。この部分で別画面の状態を更新？反映？してやるのかとは思いますが、
全く書き方が分かりません…
(SignalRはC#でチャットを作って動かしたことはあります)

画面A

aspx
1<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="stest01.aspx.vb" Inherits="test.stest01" %>
2
3<!DOCTYPE html>
4
5<html xmlns="http://www.w3.org/1999/xhtml">
6<head runat="server">
7    <title></title>
8</head>
9<body>
10    <form id="form1" runat="server">
11    <div>
12        場所:
13        <asp:DropDownList ID="drpPlc" runat="server">
14            <asp:ListItem>1</asp:ListItem>
15            <asp:ListItem>2</asp:ListItem>
16            <asp:ListItem>3</asp:ListItem>
17            <asp:ListItem>4</asp:ListItem>
18            <asp:ListItem>5</asp:ListItem>
19        </asp:DropDownList>
20        <br />
21        No.:
22        <asp:DropDownList ID="drpNo" runat="server" DataSourceID="SqlDataSource1" DataTextField="No" DataValueField="No"></asp:DropDownList>
23        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:xxxxxConnectionString %>" SelectCommand="SELECT [No] FROM [TESTTB] WHERE ([PLACE] = @PLACE) ORDER BY [No]">
24            <SelectParameters>
25                <asp:ControlParameter ControlID="drpPlc" Name="PLACE" PropertyName="SelectedValue" Type="String" />
26            </SelectParameters>
27        </asp:SqlDataSource>
28        <asp:Button ID="btnN" runat="server" Text="使用する" BackColor="Red" ForeColor="White" />
29        <asp:Button ID="btnE" runat="server" Text="出る" BackColor="Blue" ForeColor="White" />
30        <br />
31        <br />
32        <asp:Label ID="lblER" runat="server" Visible="False"></asp:Label>
33    </div>
34    </form>
35
36    <script src="Scripts/jquery-1.6.4.min.js"></script>
37    <script src="Scripts/jquery.signalR-2.4.1.min.js"></script>
38    <script src="signalr/hubs"></script>
39
40    <script type="text/javascript">
41        $(function () {
42           
43            var vbh = $.connection.vhub;
44
45            vbh.client.upd = function () {
46                $("#dtl").load("stest02.aspx #dtlSt");
47            };
48                        
49            $.connection.hub.start().done(function () {
50                $('#btnN').click(function(){
51                    vbh.server.UpdG();
52                    
53                });
54            });
55                        
56        });
57    </script>
58</body>
59</html>
60

hub
1Imports System
2Imports System.Collections.Generic
3Imports System.Linq
4Imports System.Web
5Imports Microsoft.AspNet.SignalR
6Imports Microsoft.AspNet.SignalR.Client
7
8Public Class vhub
9    Inherits Hub
10
11    Public Sub UpdG()
12        Clients.All.upd()
13    End Sub
14End Class

startup
1Imports System
2Imports System.Threading.Tasks
3Imports Microsoft.Owin
4Imports Owin
5<Assembly: OwinStartup(GetType(signalRvbtest.Startup))>
6
7Namespace signalRvbtest
8
9    Public Class Startup
10        Public Sub Configuration(app As IAppBuilder)
11            'ネットの情報を参考にして作成しました
12            app.MapSignalR()
13        End Sub
14    End Class
15End Namespace

リアルタイムで更新したい画面です。
上記使用中/出るボタンを押したら直ちにDataList上の指定のトイレの色を青/赤に変更したいです。
TimerでDataListをDatabindする方法はうまく行きますが、面白くないのでダメだそうです。

画面B

aspx
1<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="stest02.aspx.vb" Inherits="test.stest02" %>
2
3<!DOCTYPE html>
4
5<html xmlns="http://www.w3.org/1999/xhtml">
6<head runat="server">
7    <title></title>
8</head>
9<body>
10    <form id="form1" runat="server">
11    <div>
12
13        <asp:DropDownList ID="drpPlc" runat="server" AutoPostBack="True">
14            <asp:ListItem>1</asp:ListItem>
15            <asp:ListItem>2</asp:ListItem>
16            <asp:ListItem>3</asp:ListItem>
17            <asp:ListItem>4</asp:ListItem>
18            <asp:ListItem>5</asp:ListItem>
19        </asp:DropDownList>
20
21        <div id ="dtl">
22        <asp:DataList ID="dtlSt" runat="server" DataSourceID="SqlDataSource1" RepeatColumns="3" RepeatDirection="Horizontal">
23            <ItemTemplate>
24                <asp:Label ID="lblNo" runat="server" Text='<%# Eval("No") %>' BackColor='<%# System.Drawing.Color.FromName(Eval("COL").ToString()) %>' Width="100px" ForeColor="White"></asp:Label>
25            </ItemTemplate>
26        </asp:DataList>
27        
28        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:xxxxxConnectionString %>" 
29                SelectCommand="SELECT TESTTB.No, TESTTB.STATE, TESTTB_COL.STATE_COL AS COL FROM TESTTB LEFT OUTER JOIN TESTTB_COL ON TESTTB.STATE = TESTTB_COL.STATE_NBR WHERE (TESTTB.PLACE = @plc)">
30            <SelectParameters>
31                <asp:ControlParameter ControlID="drpPlc" Name="plc" PropertyName="SelectedValue" />
32            </SelectParameters>
33        </asp:SqlDataSource>
34        </div>
35
36    </div>
37    </form>
38        
39    
40</body>
41</html>
42

TESTTB
1|No(トイレナンバー)|STATE(状態空0使用中1)|PLACE(何階)|
2|1|0|1|
3|2|1|1|
4・・・

TESTTB_COL
|STATE_NBR(状態)|STATE_COL(状態の色)|
|0|#0000ff|
|1|#ff0000|

今のソースコードはこのような状態です。
あれがないこれがないというのがあれば追記致します。

画面Aでボタンを押したらhub越しにJqueryから画面Bを更新するイメージなのでしょうか？
Jqueryで画面の更新？DataBind？
それとも適した他の方法があるのでしょうか？(ASP.NET+VB.NETで)
hubやJqueryの書き方、もしくは参考サイト等教えていただけたらと思います。
よろしくお願いします。

閲覧ありがとうございました。
諦めることに致しました。

退会済みユーザー

2019/07/23 13:08

> TimerでDatabindという方法を上司に提案したところ却下されました上司に具体的な解決策を聞きましょう。ここであなたの環境・事情を何も知らない第三者に聞くことではないと思いますよ。提案しても「上司」に却下されたら意味ないですよね。それより、会社の仕事でやっているなら、上司・先輩などに聞けないというのはおかしいですよ。製品開発ならあなたの会社は製品品質を担保できてないということですし、研修とかならそもそもここで聞くのが間違ってます。

uuyy03

2019/07/24 01:58

書き込みありがとうございます。経緯は省きますが、プログラミングができるのは私一人という状況です。上司の思いつきで係内システムを作る人に任命されました。お客さんへの製品販売等はしておらず、社内の一部の人向けのものの作成をしています。プログラミングができない上司から上記のような係内webアプリを作るように指示されて、いろいろ調べても分からず、会社にも聞くことのできる人もおらず、こちらで質問致しました。不快に思われてしまったら本当に申し訳ないです。もし質問に答えて頂けるのであれば、ここがダメ、あれの調査が足りない、等のご指導をよろしくお願いします。私自身に不快感を覚えられたらスルーで大丈夫です。