参考网址:
/c?m=9d78d513d98112ef1eb6c7201a17a7224203c5743ca68344398fce1487231b1f483ca5fd65630705a0d8612244ea5e5c9df067346a1420c0ca95d75784ef8f282d8b26367401864110d713a9dc46529b66cf04&p=c3759a46d6c050eb0be296685208bb&newp=81769a479c8750f708e2977e0e558f231610db2151d4d51f6b82c825d7331b001c3bbfb423271101d4c0796507a94c59eefa3075370923a3dda5c91d9fb4c57479c2632528&user=baidu&fm=sc&query=PartialView+action&qid=ddd15747000eb227&p1=5
/WuLex/article/details/79017918
/hbb0b0/p/5111413.html
/whatarey/p/9278151.html
我的目标:
在一个页面上,顶部的一栏信息中,有一个“我的消息”,我希望在它的后面加上新消息个数的标示,比如:“我的消息(5)”,就表示有5条新消息,如果没有新消息时,就显示为“我的消息”
我的工程结构:
使用vs向导生成的结构,框架类的代码我有稍做修改,在_Layout.cshtml中有:
<td style="vertical-align:middle;" align="right">@Html.Partial("_LoginPartial")</td>
在 _LoginPartial.cshtml中的登录分支里添加一个项“我的消息”,如下:
@{string strUserInfo = Html.ActionLink("我的消息", "MyMessage", new { controller = "UserManager" }, new { @id = "myMessageTitle_ihd" }).ToHtmlString();<li>@Html.Raw(strUserInfo)</li>}
这里最重要的一个就是这个Link的ID:myMessageTitle_ihd,因为后面更新内容时,要用到它
同样的,在 _LoginPartial.cshtml中的登录分支里添加:
setTimeout("RefreshMyMessageTitle()", 10000);
页面开始加载后10秒开始更新我的消息信息。10秒钟,是为了尽量使整个页面加载完毕后再开始,否则可能会因为没有加载完而导致错误提示,而且也没有办法更新。
后面的实现内容,主要分三部分:后台、局部视图的页面、js轮训
一、后台的实现
action对应局部视图的名称,我这里的名称为:MyMessageTitle
public ActionResult MyMessageTitle(){IsLogined();UserMessageModel viewModel = new UserMessageModel();viewModel.newMsgCount = ...; // 获取新消息的数量return PartialView("MyMessageTitle", viewModel);}
这里就是获取新的消息数量,然后附给模型
二、页面
页面的名称:MyMessageTitle.cshtml
位置:在Home目录中,这个位置很重要,因为后面刷新时要用到
内容就很简单:
@using fwVer.Models@model UserMessageModel@{// 只有用户登录的情况下,才会加载此视图string strUserInfo = "我的消息";if (Model.newMsgCount > 0){strUserInfo += $"(<font color=\"red\">{Model.newMsgCount}</font>)";}@Html.Raw(strUserInfo)}
这个的输出,就是一个字符串,如果有新消息,个数就是红色的
三、js轮训
function RefreshMyMessageTitle() {$.ajax({type:"GET",url: '/home/home/MyMessageTitle',success: function (data) {$('#myMessageTitle_ihd').html(data);setTimeout("RefreshMyMessageTitle()", 5000);},error: function (errMsg) {console.log(errMsg);setTimeout("RefreshMyMessageTitle()", 5000);}});}
这个部分的代码,我只写了最少的部分,没有任何多余的东西存在。
不管是成功还是失败,都在5钟后再次刷新
这里就直接刷新上面提到的ID的内容即可。
.10.19更新:
今天学习了一下Ajax,发现这个地址对本文很有帮助:
/ajax/ajax_xmlhttprequest_send.asp
这个网站确实不错