单击html中的链接不会将我重新路由到正确的页面

Question

在过去的2周中，我一直在努力使其正常运行，但似乎找不到问题。当我单击一个用户与其聊天时，似乎并没有在两者之间创建聊天室。我遵循了该教程https://pusher.com/tutorials/chat-aspnet/，但是编辑了一些类似我的数据库的内容。调试后，当我单击其中一个用户链接时，它似乎什么都不做。

我尝试重命名所有内容并多次重新开始。

我认为它可能与routeconfig有关，或者甚至在单击时都没有调用javascript。

它所做的就是将我当前的地址：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中完成了任何调试输出吗？

首先，您是否可以包装click事件，以便将其设置在文档就绪状态。

更新-还添加了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>