ASP.NET MVC5中局部視圖的更新

參考網址：

http://cache.baiducontent.com/c?m=9d78d513d98112ef1eb6c7201a17a7224203c5743ca68344398fce1487231b1f483ca5fd65630705a0d8612244ea5e5c9df067346a1420c0ca95d75784ef8f282d8b26367401864110d713a9dc46529b66cf04&p=c3759a46d6c050eb0be296685208bb&newp=81769a479c8750f708e2977e0e558f231610db2151d4d51f6b82c825d7331b001c3bbfb423271101d4c0796507a94c59eefa3075370923a3dda5c91d9fb4c57479c2632528&user=baidu&fm=sc&query=PartialView+action&qid=ddd15747000eb227&p1=5

https://blog.csdn.net/WuLex/article/details/79017918

https://www.cnblogs.com/hbb0b0/p/5111413.html

https://www.cnblogs.com/whatarey/p/9278151.html

我的目标：

在一個頁面上，頂部的一欄資訊中，有一個“我的消息”，我希望在它的後面加上新消息個數的标示，比如：“我的消息(5)”，就表示有5條新消息，如果沒有新消息時，就顯示為“我的消息”

我的工程結構：

使用vs2015向導生成的結構，架構類的代碼我有稍做修改，在_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的内容即可。

2019.10.19更新：

今天學習了一下Ajax，發現這個位址對本文很有幫助：

https://www.w3school.com.cn/ajax/ajax_xmlhttprequest_send.asp

這個網站确實不錯