如何使用 Ajax 将消息状态从未读更新为已读

Question

用户阅读或单击锚标记后，我必须更新消息的状态，以便将特定消息从列表中删除。

我希望使用ajax来更新状态。 这就是我到目前为止所做的

$(document).ready(function () {
    $('counterBackground').html = null;
    $.ajax({
        type: "GET",
        dataType: "json",
        url: "/Message/GetMessages",
        traditional: true,
        contentType: "application/json;charset=utf-8",
        success: function (data)
        {
            $('#counter').html(data.length);
                   
            let messages = `
                        <ul>
                    <li>
                        <a>
                            <div>
                                <img>
                            </div>
                            <div>
                                <div>
                                    <h5><span><small>

                                                    <time><span></span></time>

                                                </small></span></h5>
                                    
                                </div>
                                <p></p>
                            </div>
                        </a>
                    </li>
                </ul>`
                ;


            for (let m of data) {
                messages += `<ul><li>
                        <a href="">
                            <div class="message-avatar">
                                <img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="">
                            </div>
                            <div class="message-body">
                                <div class="message-body-heading">
                                    <h5>${m.subject}<span> <small class="fa-pull-right">
                                                    <time class="timeago" datetime=""><span>${m.createdDate}</span></time>
                                                </small></span></h5>
                                    
                                   
                                </div>
                                <p>${m.body}</p>
                            </div>
                        </a>
                    </li>
                </ul>`
            
            // Setting innerHTML as tab variable
            document.getElementById("messageList").innerHTML = messages;
             
            }
            
      
            
            console.log(data);
            },
        
        error: function (xhr, status, error) { }
    });


})
$(function IsRead() {
    $.ajax({
        Type: 'POST',
        dataType: "json",
        url: "/Message/UpdateMsgStatus",
        traditional: true,
        data: { msgId: Id },
        success: function (result) {
            result.IsRead=1
        }
    });
})

在我的控制器中，方法是这样的

       public JsonResult  UpdateMsgStatus(string Id)
       {

           var msg= ctx.Messages.Where(m => m.MessageId == Id).FirstOrDefault();
           if (msg != null)
           {
               msg.MessageId=Id;
               msg.IsRead = 1;
               ctx.SaveChanges();
           }
           return Json(msg);
       }

这是我的消息列表 任何帮助将不胜感激。谢谢你。

Answer 1

用户阅读或点击后，我必须更新消息的状态 在锚标签上

ajax 只会更新当前页面中的消息，如果您想更新其他选项卡中的消息，一旦您阅读了 stackoverflow 的收件箱中的消息，您必须尝试使用其他技术，例如 signalr

对于

$(document).ready()

之后创建的元素，您必须将事件绑定到文档而不是元素

<script>
    $(document).on('click', '.message', function (e) {
        $(this).hide()
    })
</script>

另外，由于您正在使用 asp.net core，您可以创建一个部分视图，而不是在 jquery 代码中编写大量 html

完整的最小示例：

<div class="messagebox">
    
</div>




<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script>
    $.ajax({
        type: "GET",        
        url: "/Home/MessagePartial",        
        success: function (data) { 
            $('.messagebox').html(data)
             // in your case,you could update the number of the message like below
            $('#counter').html($('.message').length)
        }
    })
</script>

<script>
    $(document).on('click', '.message', function (e) {
        $(this).hide()
    })
</script>

部分视图控制器：

public IActionResult MessagePartial()
{
    // in your case,you have to query the messages in db
    var messages = new string[] { "Hi", "messages1", "messages2", "messages3"};
    return PartialView(messages);
}

局部视图：

@model string[]

@foreach(var message in Model)
{
    <div class="message">
        @message
    </div>
}

结果：