ASP.NET MVC: Implementing A ShoutBox Feature Using jQuery And AJAX

This article will walk you through how to implement a simple "shoutbox" feature in your ASP.NET MVC application. I call the feature  "shoutbox" because users within your web site can exchange conversations with each other. You can think of it as a comment board or pretty much similar to a group chat window. Please keep in mind that a "shoutbox" is not a full blown implementation of a chat feature; if you are looking for a chat application then you can refer my other article about Building a Simple Real-Time Chat Application using ASP.NET SignalR.

There are many possible ways to implement this feature, but since this article is targeted for beginners to intermediate developers then I decided to use a simple and typical way of performing asynchronous operations using jQuery and AJAX. If you want a simple and clean API that allows you to create real-time web applications where the server needs to continuously push data to clients/browsers then you may want to look at ASP.NET SignalR instead.

Before you go any further make sure that have knowledge about ASP.NET MVC and how things work in MVC arch because I will not be covering those in this article. I would recommend following my previous articles about "Building Web Application Using Entity Framework and MVC 5" as I have integrated this feature in that application. If you haven’t gone through my previous articles then you can refer to the following links below:

• Building Web Application Using Entity Framework and MVC 5: Part 1
• Building Web Application Using Entity Framework and MVC 5: Part 2
• Building Web Application Using Entity Framework and MVC 5: Part 3

Let's get started!

STEP 1:

The very first thing we need to do is to create a new table in the database for storing the message of each users. So go ahead and launch SQL Server Management Studio and create a Message table by running the following SQL script below:

CREATE TABLE[dbo].[Message]
(
    [MessageID][int] IDENTITY(1, 1) NOT NULL,     [SYSUserID][int] NULL,     [MessageText][varchar](max) NULL,     [DatePosted][datetime] NULL,
CONSTRAINT[PK_Message] PRIMARY KEY CLUSTERED   (
        [MessageID] ASC
    ) WITH(PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW      _LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON[PRIMARY]
) ON[PRIMARY] TEXTIMAGE_ON[PRIMARY]

GO

STEP 2:

Now switch back to Visual Studio and then open your EF designer by going to the Models folder > DB >DemoModel.edmx.

Right-click on the designer surface and then select "Update Model from Database". Select the Message table to add it to our entity set and click finish as shown in the figure below:



STEP 3:

Add the following class under Models folder >ViewModel>UserModel.cs,

public class UserMessage
{
    public int MessageID
    {
        get;
        set;
    }
    public int SYSUserID
    {
        get;
        set;
    }
    public string FirstName
    {
        get;
        set;
    }
    public string LastName
    {
        get;
        set;
    }
    public string MessageText
    {
        get;
        set;
    }
    public DateTime ? LogDate
    {
        get;
        set;
    }
}

The code above is just a simple class that houses some properties to store data from the database.

STEP 4:

Add the following code block under Models folder >ObjectManager>UserManager.cs,

public List < UserMessage > GetAllMessages()
{
    using(DemoDBEntitiesdb = newDemoDBEntities())
    {
        var m = (from q indb.SYSUsers join q2 indb.Messages on q.SYSUserID equals q2.SYSUserID join q3 indb.SYSUserProfiles on q.SYSUserID equals q3.SYSUserID selectnewUserMessage {
            MessageID = q2.MessageID,
                SYSUserID = q.SYSUserID,
                FirstName = q3.FirstName,
                LastName = q3.LastName,
                MessageText = q2.MessageText,
                LogDate = q2.DatePosted
        }).OrderBy(o => o.LogDate);

        returnm.ToList();
    }
}

public void AddMessage(intuserID, stringmessageText)
{
    using(DemoDBEntitiesdb = newDemoDBEntities())
    {
        Message m = newMessage();
        m.MessageText = messageText;
        m.SYSUserID = userID;
        m.DatePosted = DateTime.UtcNow;

        db.Messages.Add(m);
        db.SaveChanges();
    }
}

public int GetUserID(stringloginName)
{
    using(DemoDBEntitiesdb = newDemoDBEntities())
    {
        return db.SYSUsers.Where(o => o.LoginName.Equals(loginName))
            .SingleOrDefault().SYSUserID;
    }
}

The GetAllMessages() method fetches all messages that was stored from the database and assigns each field values to the corresponding properties of the UserMessage model. AddMessage() method simply add new sets of data to the database. Finally, GetUserID() method gets the user id of the current logged user by passing the login name as the parameter.

STEP 5:

Add the following action methods below under Controllers folder >HomeController.cs,

[Authorize]
public ActionResultIndex()
{
    UserManager UM = newUserManager();
    ViewBag.UserID = UM.GetUserID(User.Identity.Name);
    return View();
}

[Authorize]
public ActionResultShoutBoxPartial()
{
    return PartialView();
}

[Authorize]
public ActionResultSendMessage(intuserID, string message)
{
    UserManager UM = newUserManager();
    UM.AddMessage(userID, message);
    returnJson(new
    {
        success = true
    });
}

[Authorize]
public ActionResultGetMessages()
{
    UserManager UM = newUserManager();
    returnJson(UM.GetAllMessages(), JsonRequestBehavior.AllowGet);
}

In Index action method we call the GetUserID() method by passing the login name as the parameter to get the user ID of the current logged user. We then store the value in ViewBag so we can reference it in our View later on. TheSendMessage() action method simply calls the AddMessage() method to insert new records to the database. The GetMessages() method fetches all user messages from the database.

STEP 6:

Create a new partial view under Views folder > Home and name it as "ShoutBoxPartial.cshtml". And then add the following markup below:

<style type="text/css">
    #divShoutBox
    {
        position: relative;
        width: 400px;
        height: 300px;
        overflow: auto
    }

    #txtMessageText
    {
        width: 400px;
        height: 100px;
    }
</style>

<div id="divShoutBox">
    <div id="divUserMessage"></div>
</div>

<br/>
<text areaid="txtMessageText">
    </textarea>
    <br/>
    <input type="button" id="btnPost" value="Post" />

    <script>
        var _isScrolling = false;
        var _lastScrollPos = 0;
        var _counter = 0;

        $(function()
          {

            GetMessages();
            setInterval(Fetch, 5000);

            $("#divShoutBox").on("scroll", function()
            {
                _isScrolling = true;
                _lastScrollPos = this.scrollHeight;
            });

            $("#btnPost").on("click", function()
             {
                var msg = $("#txtMessageText");
                var user = $("#hidUserID");

                if (msg.val().length > 0)
                {
                    $.ajax({
                        type: "POST",
                        url: '@(Url.Action("SendMessage","Home"))',
                        data:
                        {
                            userID: user.val(),
                            message: msg.val()
                        },
                        success: function(d)
                        {
                            msg.val("");
                            GetMessages();
                        },
                        error: function(err) {}
                    });
                }
            });

        });


        function Fetch()
        {
            if (!_isScrolling)
            {
                GetMessages();
                $("#divShoutBox").scrollTop(_lastScrollPos);
            };
            _isScrolling = false;
        }

        function GetMessages()
        {
            $.ajax
            ({
                type: "POST",
                url: '@(Url.Action("GetMessages","Home"))',
                data: {},
                success: function(d)
                {
                    $("#divUserMessage").empty();
                    $.each(d, function(index, i)
                    {
                        GenerateHTML(i.FirstName, i.LastName, i.MessageText, FormatDateString(i.LogDate));
                    });
                },
                error: function(err) {}
            });
        }

        function GenerateHTML(fName, lName, msgText, logDate)
        {
            var divMsg = $("#divUserMessage");
            divMsg.append("Posted by: " + fName + " " + lName + "<br/>");
            divMsg.append("Posted on: " + logDate + "<br/>");
            divMsg.append(msgText);
            divMsg.append("<hr/>");
        }

        function FormatDateString(logDate)
        {
            var d = new Date(parseInt(logDate.substr(6)));
            var year = d.getFullYear();
            var month = d.getMonth() + 1;
            var day = d.getDate();
            var hour = d.getHours();
            var minutes = d.getMinutes();
            var sec = d.getSeconds();

            return month + "/" + day + "/" + year + " " + hour + ":" + minutes + ":" + sec;
        }
    </script>

The HTML markup above is fairly simple and there's nothing really fancy about it. It just contains some div elements, text area and button. I also applied few CSS style for the div and textbox elements. Keep in mind that the look and feel doesn't really matter for this tutorial as we are focusing mainly on the functionality itself.

Down to the JavaScript functions

There are four (4) main JavaScript functions from the markup above. The first one is the GetMessages() function. This function uses jQuery AJAX to issue an asynchronous post request to the server to get all available messages from the database. If the AJAX call is successful then we iterate to each item from the json response and call the GenerateHTML() function to build up the UI with the result set. The GenerateHTML() function uses jQuery function to build up the HTML and append the values to the existing div element. TheFormatDateString() funtion is a method that converts json date format to JavaScript date format and return our own date format to the UI for the users to see. The Fetch() function calls the GetMessages() function and handles the scroll position of the div.

This means that we auto scroll to the bottom part of the div element once there's a new message.

The $(function (){}) is the short-hand syntax for jQuery's document ready function which fires once all DOM elements are loaded in the browser. This is where we register the onscroll event of div and the onclick event of button using jQuery. In onscroll event we just set some values to some global variables for future use. In onclick event we just issued an AJAX request to server to add new data to the database. When the DOM is ready we also call the GetMessages() function to display all messages on initial load of the browser. You may also noticed there that I have used the setInterval() function to automatically pull data from the server after every five (5) seconds. So if another users from your web site sends a message then it will automatically be available for other users after 5 seconds. This is the traditional way of using AJAX to pull data from the server for a given period of time.

STEP 7:

Add the following markup below in Index.cshtml file:

<input type="hidden"id="hidUserID"value="@ViewBag.UserID"/>
@Html.Action("ShoutBoxPartial", "Home")

STEP 8:

Running the code should look something like this:

That's it! I hope someone finds this post useful.

 

Read more articles on ASP.NET Programming:

• Paging, Sorting, And Filtering With Partial View In ASP.NET MVC 5
• ASP.NET 5 CRUD Using Scaffolding And Entity Framework