javascript - 如何根据 ASP.NET MVC 中 Controller 方法的结果生成 html

Question

我需要显示当前登录用户的未读邮件。

当用户登录到系统时，会有通知说他有一些未读的电子邮件，它看起来像这样:

一封信，上面有许多未读的电子邮件

这张图片表示还有 2 条消息需要阅读。

我想在这里实现当用户点击这封信时显示未读邮件/消息。

据我所知，作为一个 javascript 绝对初学者，我想我需要附加 on click event ，它将调用 javascript 方法，该方法将对我的 Controller 进行 ajax 调用，该方法将返回一些结果(来自数据库的未读消息)给我。

但我真的不知道这实际上是怎么回事...因为我对 javascript 真的很糟糕...

现在我将在这里发布我的代码(并更详细地解释它):

<li role="presentation" class="dropdown">
  <a href="javascript:;" onclick="GetAllUnreadEmails('@LogedUserId') class="dropdown-toggle info-number" data-toggle="dropdown" aria-expanded="false" style="visibility:@visibility;">
         <i class="fa fa-envelope-o"></i>
             @if (LoggedInUser != null)
             {
                            // HERE I AM SHOWING ICON LETTER AND NUMBER OF UNREAD emails ON TOP OF
                            int unredEmails = EmailController.GetNumberOfUnreadEmails(LoggedInUser.Id);
                            if (unredEmails > 0)
                            {
                                <span class="badge bg-red" id="inboxunredEmails">@unredEmails</span>
                            }
                            else
                            {
                                <span class="badge bg-green">@unredEmails</span>
                            }

                        }
      </a>

                    // HERE I AM SHOWING UNREAD MESSAGES AS DROPDOWN 
                    <ul id="menu1" class="dropdown-menu list-unstyled msg_list" role="menu">
                        @if (LoggedInUser != null)
                        {
                            int unredEmails = EmailController.GetNumberOfUnreadEmails(LoggedInUser.Id);
                            if (unredEmails > 0)
                            {
                                for (int i = 0; i < unredEmails; i++)
                                {
                                    <li>
                                        <a>
                                            <span class="email">
                                                Unread Email number: @i;
                                            </span>
                                        </a>
                                    </li>
                                }
                            }
                         }
                    </ul>
</li>

正如你们看到的，我在点击事件中附加的字母点击:

onclick="GetAllUnreadEmails('@LogedUserId') 

这是 GetAllUnreadEmails javascript 方法的定义:

var GetAllUnreadEmails = function (loggedUserId) {
        if (loggedUserId) {
            $.ajax({
                url: "Message/GetUnreadEmails",
                method: "GET",
                data: {UserID : loggedUserId},
                contentType: "application/json; charset=utf-8",
                success: function (data) {

                },
                error: function (response, textStatus, errorThrown) {
                    alert("error: Error!");
                },
                failure: function (response) {
                    alert("failure: Error!");
                }
            });
        }
    }

这是我的 Controller ，也是我最困惑的部分，因为我不知道如何返回这里以及返回什么以及如何处理我返回的结果。基本上我应该在此处获取列表和 foreach 项目我应该生成我的 html，它在单击字母时创建/显示未读电子邮件。

public ActionResult GetUnreadEmails(Guid emailId)
  {
     if (User.Id != null)
     {
        List<Emails> resultList = EmailController.GetUnreadEmailsByUserId(User.Id);
        return View(resultList);
     }
     return View("Error, not found!");
  }

我应该在这里返回 Json 吗？但我不知道如何处理它？我对这部分真的很困惑，或者我应该使用 jQuERY 的 .each 方法在这个 javascript 方法中循环遍历结果？

无论我不知道如何重复这段代码

for (int i = 0; i < unredEmails; i++)
{
     <li>
       <a>
           <span class="email">
                  Unread Email number: @i;
           </span>
       </a>
    </li>
}

真的我不知道在这部分要做什么，因为每次用户点击信件时我都需要收到未读消息，而且我不能让它加载一次，因为电子邮件可以在另一个浏览器中阅读(所以信件的值(value)不会2 anymor，它将更改为 1) 所以当我在没有呈现页面的情况下单击字母时，我必须转到数据库并获取“更新数据”等。

任何形式的帮助都会很棒!多谢你们干杯

Answer 1

您有多种选择。我更喜欢从我的 Controller 方法返回 JSON，因为它很灵活，但由于您不熟悉 JavaScript，让我们改为从 Controller 方法返回一个 View 。

换句话说，我们将使用 c#/Razor 在服务器上呈现收件箱，而不是使用 JavaScript 在浏览器中呈现收件箱。

1. 使用 JavaScript 调用您的 Controller 方法(这是您的 GetAllUnreadEmails() 方法)。
2. 构建一个包含电子邮件列表的模型。
3. 仅使用呈现未读电子邮件所需的标记填充 View 。
4. 使用 PartialView() 而不是 View() 返回 View
5. 您现在有了一个不错的 HTML 片段，可用于更新页面。

您的成功回调可以根据需要插入此 HTML。

success: function (data) {
    console.log(data);

    $("#id-of-unread-messages-element").html(data);
}

处理收件箱数量的变化

您还提到在阅读消息时更改“未读”值(可能在不同位置)。保持该值同步超出了本答案的范围，但您可能想要调查 SignalR，以便在发生更改时将更新推送到所有连接的浏览器。

SignalR