在mvc中实时插入数据

时间:2014-12-06 17:04:15

标签: javascript jquery asp.net-mvc real-time

我有一个带评论功能的新闻项目。任何添加评论的人都可以在不重新加载页面的情况下立即查看他的评论(使用ajax)。问题是当user1(例如)对post1发表评论时,只有user1可以立即看到他的评论,但所有其他用户需要重新加载页面才能看到user1的评论。我该如何解决这个问题?

我用来获取评论的代码:

$(function () {
  $("#AddComment").click(function () {

  var CommentText = document.getElementById("CommetForm").innerHTML;
    var UserName = document.getElementById("UserName").innerHTML;
    var PostId = document.getElementById("PostId").innerHTML;


       $.ajax({
                url: '/PostComment/AddComment',
                type: 'POST',
                dataType: 'json',
                cache: false,
                data: { "PostId": PostId, "CommentText": OrignalCommentText },
                success: function (data)
                {
                    if (data == "P") // Commet Stored on database successfully
                    {
                    document.getElementById("PostComments-" + PostId).innerHTML += 
                    "<li>" +
                                    "<div class='media'>" +
                                        "<div class='media-body'>" +
                                            "<a href='' class='comment-author'>"+UserName+"</a>" +
                                            "<span class='CommetText' id='CommentText-" + PostId + "'>" + CommentText + "</span>" +
                                        "</div>" +
                                    "</div>" +
                                "</li>";

                    }

                    else // Some Error occur during storing database
                    {

                        document.getElementById("CommentError-" + PostId).innerHTML = "\nSomething went wrog, please try agin";

                    }



                }
            });
});
});

此代码用于在数据库中存储注释:

  private SocialMediaDatabaseContext db = new SocialMediaDatabaseContext();

  [HttpPost]
    public JsonResult AddComment(string PostId, string CommentText)
    {
        try
        {
            Users CurrentUser = (Users)Session["CurrentUser"];
            PostComment postcomment = new PostComment();


            CommentText = System.Uri.UnescapeDataString(CommentText);


            postcomment.PostId = int.Parse(PostId);
            postcomment.CommentFromId = CurrentUser.UserId;
            postcomment.CommentText = CommentText;
            postcomment.CommentDate = DateTime.Now;

            db.PostComments.Add(postcomment);
            db.SaveChanges();
            return Json("P");

        }

        catch
        {
            return Json("F");

        }
    }

5 个答案:

答案 0 :(得分:7)

答案 1 :(得分:1)

TL; DR 使用可以使用setIntervalWebsockets来完成此操作。下面我将解释如何。

首先,我们需要了解此发布/订阅模式背后的内容。由于您要构建实时应用程序,因此您可以创建一个函数,向您的服务器询问自上次检查以来是否添加了某些数据。

使用WindowTimers.setInterval()

在我看来,这是实现这一目标的最简单方法,假设这是你第一次使用之前从未使用过websockets。例如,在客户端项目中,您可以在setInterval setInterval( checkNewData, time)中创建一个函数。您的方法checkNewData()将向您的服务器发出ajax请求,询问最近是否添加了一些数据:

function checkNewData() {
    // ajax call   
    // On response, if found some new comment, you will inject it in the DOM
}

然后,在服务器端方法中,获取其调用的时间戳,并在数据库中验证是否存在某些数据。像这样:

// Method written in PHP
public function ajax_checkNewData() {
    $time = time();

    // Asks to your model controller if has something new for us.
    // SELECT comment FROM comments WHERE timestamp > $time
    // Then return its response
}

您将使用来自控制器方法ajax_checkNewData()的响应来撰写comments-container

使用WEBSOCKETS(美丽的方式)

现在,还有另一种方法可以使用WebSockets。 HTML5 WebSocket代表了Web通信历史上的第一次重大升级。在WebSocket之前,Web客户端和服务器之间的所有通信仅依赖于HTTP。现在,动态数据可以通过WebSocket连接自由流动,这些连接是持久的(始终开启),全双工(同时双向)和极快的速度。在不同的库和框架中,您可以使用socket.io。我相信这会很好地解决您的实时应用程序问题,但我不确定您需要更改多少项目以适应此解决方案。

查看SocketIo page中的简单聊天教程,了解它是否符合您的需求。它非常整洁,使用它实现是一个很好的挑战。自事件驱动以来,我相信你不会在实现它时遇到问题。

有关详细信息,请查看:

<强>参考

使用入门:聊天应用程序 - http://socket.io/get-started/chat/

Websockets - http://en.wikipedia.org/wiki/WebSocket

WebSockets - https://developer.mozilla.org/en/docs/WebSockets

祝你好运!

答案 2 :(得分:0)

您可以编写一个JavaScript代码,该代码对servlet进行ajax调用,以检查数据库中的更新。 将标志返回到ajax调用的success函数,如果状态已更改或任何注释添加到数据库,则可以重新加载页面或使用新注释刷新注释的组成。

答案 3 :(得分:0)

它没有在其他页面上发布,因为user1页面正在进行AJAX调用,因此它正确加载。但是,其他页面并不“知道”它们应该通过AJAX重新加载。您需要某种定时循环运行来检查任何更改。上述任何一个答案都应该适用于它。

答案 4 :(得分:0)

You could use SignalR for this, you can send realtime messages to the server, here is a sample to know how to implement SignalR in ASP.NET MVC

https://github.com/WaleedChayeb/SignalRChatApp