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

问：

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

我希望使用 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);
       }

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

asp.net ajax asp.net-core

    <span id="counter">
</span>
<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)
            $('#counter').html($('.message').length)
        }
    })
</script>

<script>
    $(document).on('click', '.message', function (e) {
        $(this).hide()
        $('#counter').html($('.message:not([style*="display: none"])').length)
    
    })
</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>
    }

结果：

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

How to Update Status of Message From unread to read using Ajax

评论

评论