Question

I am completely new in ASP.NET MVC 3 and i need to create an application in which there is a menu that is already created and i need to add another menu item named Inbox(No. of Unread msg).

For the testing purpose i need to use timer and at some interval i increase the counter variable and bind that text into the inbox. that is after 5 sec my counter variable value is 1 then menu should be display Inbox(1), after 10 sec my counter variable value is 2 then menu should be displayed Inbox(2).

I have the same controller for all the view and i need to implement timer also. so, is there any idea to implement timer and change the menu name without affecting its controller.

currently my menu container looks similar like this.

<div id="menucontainer">
    <ul id="menu">
        <li>@Html.ActionLink("Home", "Index", "Home")</li>
         <li>@Html.ActionLink("About", "About", "Home")</li>
         <li>@Html.ActionLink("Video", "Video", "Home")</li>
         <li>@Html.ActionLink("Social", "Social", "Home")</li>
         <li>@Html.ActionLink("Photos", "Photos", "Home")</li>
         <li>@Html.ActionLink("Blog", "Blog", "Home")</li>
         <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
         <li>@Html.ActionLink("Inbox","Inbox","Home")</li>
     </ul>
 </div>

Answer 1

I would do something like this:

<div id="menucontainer">
    <ul id="menu">
        <li>@Html.ActionLink("Home", "Index", "Home")</li>
         <li>@Html.ActionLink("About", "About", "Home")</li>
         <li>@Html.ActionLink("Video", "Video", "Home")</li>
         <li>@Html.ActionLink("Social", "Social", "Home")</li>
         <li>@Html.ActionLink("Photos", "Photos", "Home")</li>
         <li>@Html.ActionLink("Blog", "Blog", "Home")</li>
         <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
         <li><a href="@Url.Action("Inbox","Home")">Inbox <span class="message-count"></span></a></li>
     </ul>
 </div>

and in Javascript (jQuery to make things easier)

function checkInbox() {
    var url = '@Url.Action("GetInboxCount","Services")';
    $.get(url, { userId : @UserId }, function(data) {
        if(data != null) $(".message-count").text(data); // update count
    });
}

and in the DOM ready area, just set the interval

(function() {
    checkInbox(); // check for the first time
    setInterval(checkInbox(), 30 * 1000); // and every 30 seconds
});

Create a controller called Services and add a method that outputs JSON, like:

public class ServicesController : Controller
{
    var db = yourDatabaseContext;

    public JsonResult GetInboxCount(int userId)
    {
        inboxCount = db.GetInboxCountByUserId(userId);
        return Json(inboxCount, JsonRequestBehavior.AllowGet);
    }
}