Нажатие на ссылку в HTML не перенаправляет меня на нужную страницу

Question

Последние 2 недели я пытался заставить это работать, но, похоже, не могу найти проблему. когда я нажимаю на пользователя, чтобы поговорить с ним, создается впечатление, что между ними не создается чат. Я следовал этому руководству https://pusher.com/tutorials/chat-aspnet/, но отредактировал несколько вещей, таких как моя база данных. После отладки кажется, что ничего не происходит, когда я нажимаю на одну из ссылок пользователя.

Я попытался переименовать все и начать все заново несколько раз.

Я думаю, что это может иметь какое-то отношение к routeconfig или что он даже не вызывает javascript gae при нажатии.

все, что он делает, это меняет мой текущий адрес: localhost / chat на localhost / chat #

Мой взгляд с использованием JavaScript:

Javascript:

 // get chat data
    function getChat(contact_id) {
        $.get("/contact/conversations/" + contact_id)
            .done(function(resp) {
                let chat_data = resp.data || [];
                loadChat(chat_data);
            });
    }

    //load chat data into view
    function loadChat(chat_data) {
        chat_data.forEach(function(data) {
            displayMessage(data);
        });

        $('.chat__body').show();
        $('.__no__chat__').hide();
    }

    // select contact to chat with
    $('.user__item').click(function(e) {
        e.preventDefault();
        currentContact = {
            id: $(this).data('contact-id'),
            name: $(this).data('contact-name'),
        };
        if (conversationChannelName) {
            pusher.unsubscribe(conversationChannelName);
        }
        conversationChannelName = getConvoChannel((@ViewBag.currentUser.Id * 1), (currentContact.id * 1));
        currentconversationChannel = pusher.subscribe(conversationChannelName);
        bind_client_events();

        $('#contacts').find('li').removeClass('active');
        $('#contacts .contact-' + currentContact.id).find('li').addClass('active');
        getChat(currentContact.id);
    });

    function getConvoChannel(user_id, contact_id) {
        if (user_id > contact_id) {
            return 'private-chat-' + contact_id + '-' + user_id;
        }
        return 'private-chat-' + user_id + '-' + contact_id;
    }

HTML

<div class="__no__chat__">
                                <p>Select a contact to chat with</p>
                            </div>
                            <div class="panel-body users__body">
                                <ul id="contacts" class="list-group">

                                    @foreach (var user in @ViewBag.allUsers)
                                    {
                                        <a class="user__item contact-@user.Id" href="#" data-contact-id="@user.Id" data-contact-name="@user.FirstName">
                                            <li>
                                                <div class="avatar">
                                                    <img src="@Url.Content("~/Content/no_avatar.png")">
                                                </div>
                                                <span>@user.FirstName</span>
                                                <div class="status-bar"></div>
                                            </li>
                                        </a>
                                    }
                                </ul>
                            </div>

routeconfig:

routes.IgnoreRoute("{resource}.axd/{*pathInfo}");


            routes.MapRoute(
                name: "Home",
                url: "",
                defaults: new { controller = "Home", action = "Index" }
            );

            routes.MapRoute(
                name: "Login",
                url: "login",
                defaults: new { controller = "Auth", action = "Index" }
            );

            routes.MapRoute(
                name: "ChatRoom",
                url: "chat",
                defaults: new { controller = "Chat", action = "Index" }
            );

            routes.MapRoute(
                name: "GetContactConversations",
                url: "contact/conversations/{contact}",
                defaults: new { controller = "Chat", action = "ConversationWithContact", contact = "" }
            );

            routes.MapRoute(
                name: "PusherAuth",
                url: "pusher/auth",
                defaults: new { controller = "Auth", action = "AuthForChannel" }
            );

            routes.MapRoute(
                name: "SendMessage",
                url: "send_message",
                defaults: new { controller = "Chat", action = "SendMessage" }
            );

            routes.MapRoute(
                name: "MessageDelivered",
                url: "message_delivered/{message_id}",
                defaults: new { controller = "Chat", action = "MessageDelivered", message_id = "" }
            );

            routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Auth", action = "Index", id = UrlParameter.Optional }
            );

Answer 1

ОК, похоже, это проблема с JS на странице, если ничего не происходит.Исключите это сначала.

Делали ли вы какие-либо отладочные выходные данные в JS?

Прежде всего, вы можете обернуть событие щелчка, чтобы оно было настроено на готовый документ.

Обновление - такжедобавлено в section код, чтобы убедиться, что все выполняется в нужное время (т.е. после загрузки пакетов для JQuery)

В вашем представлении:

@section scripts {
    $(document).ready(function() {

        $('.user__item').click(function(e) {
            e.preventDefault(); 
            console.log("click registered!");   //also add this directly at the beginning of the click event so you can see if something happens (or not)
            //...your original code below... 
        });

    });
}

Примечание: @section scripts...должно произойти только один раз в вашем представлении.

В вашем _Layout.cshtml файле:

    ....
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>