Question

我是ASP.NET MVC 3中的新手，我需要创建一个应用程序，其中有一个已经创建的菜单，我需要添加另一个名为Inbox的菜单项（未读消息的数量）。

出于测试目的，我需要使用计时器，并且在某个时间间隔我增加计数器变量并将该文本绑定到收件箱中。即5秒后我的计数器变量值为1，则菜单应显示收件箱（1），10秒后我的计数器变量值为2，则菜单应显示收件箱（2）。

我对所有视图都有相同的控制器，我也需要实现计时器。那么，有没有想法实现计时器和更改菜单名称而不影响其控制器。

目前我的菜单容器看起来像这样。

<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

我会做这样的事情：

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

和Javascript（jQuery使事情变得更容易）

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

并在DOM就绪区域中，只需设置间隔

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

创建一个名为Services的控制器，并添加一个输出JSON的方法，如：

public class ServicesController : Controller
{
    var db = yourDatabaseContext;

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

动态创建菜单并更改该Meu的文本

1 个答案: