ASP.NET MVC5中局部视图的更新

参考网址：

/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

这个网站确实不错