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

qqrboqgw 于 12个月前发布在 .NET

关注(0)|答案(1)|浏览(106)

一旦用户阅读或单击锚标记，我必须更新消息的状态，以便将特定消息从列表中删除。
我希望使用更新状态。这是我到目前为止所做的

$(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

来源：https://stackoverflow.com/questions/77371148/how-to-update-status-of-message-from-unread-to-read-using-ajax

1条答案

按热度按时间

vq8itlhq1#

一旦用户阅读或点击锚标签，我必须更新消息的状态
aplog只会更新您当前页面中的消息，如果您想更新其他标签页中的消息，一旦您阅读了stackoverflow的收件箱中的消息，您必须尝试使用其他技术，例如signalr
对于在$(document).ready()之后创建的元素，必须将事件绑定到document而不是元素

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

字符串
另外，由于您使用的是asp.net核心，因此可以创建一个局部视图，而不是在jquery代码中编写大量的html。
完整的最小示例：

<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>
    }

型
测试结果：

的数据

赞(0）回复(0）举报 12个月前

我来回答

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

1条答案

相关问题

热门标签

最新问答