How to Fix message is not send Server to Client In SignalR Asp.net core 6

Question

I do all thing but my message is not send from Server To client. I have two controller One is client and Another One is server controller they both have different View there have another Index view in server Controller And different Index view in Client .In server view I add Form And submit button and client view Used as result whenever I fill form and submit there result will be shown on client view page but it doesn't Work

This Is My Hub

 public class NotificationHub:Hub
    {
        public async Task SendMessage(string message)
        {
            await Clients.All.SendAsync("ReceiveMsg", message);
        }
    }

This Is My client View Page

<h1>Client App</h1>

<div id="servermsg">
    <ul id="msgList">
   

    </ul>
</div>
<script src="~/lib/signalr/dist/browser/signalr.js"></script>
<script src="~/js/ClientNotification.js"></script>

This is My JavaScript File

"use strict";

var connection = new signalR.HubConnectionBuilder()
    .withUrl("/notificationHub")
    .build();
connection.start();
console.log(connection);
connection.on("ReceiveMsg", function (msg) {
    console.log('message ',msg)
    var li = document.createElement("li");
    li.textContent = msg;
    document.getElementById("msgList").appendChild(li);
})

var el = document.getElementById("#form-submit-btn");
if (el) {
    el.addEventListener('click',  () => {
        connection.invoke("SendMessage", document.querySelector("#message-input").value);
        });
    }

This is my Server View Page

@model SignalR.Models.Notification

@{
    ViewData["Title"] = "Index";
}

<h1>Index</h1>

<h4>Notification</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <form asp-action="Index">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="Message" class="control-label"></label>
                <input asp-for="Message" id="message-input" class="form-control" />
                <span asp-validation-for="Message" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" id="form-submit-btn" value="Send" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

<div>
    <a asp-action="Index">Back to List</a>
</div>

@section Scripts {
   <script src="~/lib/signalr/dist/browser/signalr.js"></script>
    <script src="~/js/ClientNotification.js"></script>
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

This is my Model

public class Notification
    {
        public string? Message { get; set; }

    }

Please What is the issue in My code that Server To client doesn't work

Answer 1

Change your js code:

var el = document.getElementById("#form-submit-btn");

to:

var el = document.getElementById("form-submit-btn");