Javascript 如何使用控制器（ASP.NET M V C）的结果填充局部视图

在开始阅读之前，请仔细阅读代码中的注释。

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

当用户登录到系统时，系统会通知他有一些未读的电子邮件，当用户单击电子邮件（该通知）时，会显示来自数据库的真实电子邮件，如下所示：

作为一个javascript初学者，我知道这可能是如何工作的，我想我需要附加一个点击事件，它将调用javascript方法，它将对我的控制器进行ajax调用，并将返回一些结果（来自数据库的未读消息）给我

现在我将发布您在上面看到的图像的代码：

<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 that you saw on image above

     int unredEmails = EmailController.GetNumberOfUnreadEmails(LoggedInUser.Id);
     if (unredEmails > 0)
     {
        <span class="badge bg-orange" id="inboxunredEmails">@unredEmails</span>
     }

    }
 </a>

 // HERE I AM SHOWING UNREAD MESSAGES AS DROPDOWN (that HTML that is disaplyed when it's clicked on letter) AND I AM PLANING TO MOVE THIS CODE TO A PARTIAL VIEW SO THIS PART MIGHT LOOK LIKE THIS :  `@Html.Partial("_TopNavEmails");`

  <ul id="menu1" class="dropdown-menu list-unstyled msg_list" role="menu">

    int unredEmails = EmailController.GetNumberOfUnreadEmails(LoggedInUser.Id);
    if (unredEmails > 0)
    {
       for (int i = 0; i < unredEmails; i++)
       {
         <li>
            <a>
              <span class="image"><img src="/myresources/images/john.png"></span>
                <span>
                    <span>John Doe</span>
                     <span class="time">3 mins ago</span>
                    </span>
                    <span class="message">
                      Message number: @i;
                    </span>
            </a>
         </li>
        }
     }
  </ul>

下面是GetAllUnreadEmails javascript方法的定义：

<script>
    var GetAllUnreadEmails = function (userId) {
        if (userId) {
            $.ajax({
                method: "GET",
                url: '@Url.Action("GetAllUnreadEmails", "Email"),
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                  PROBALY HERE I SHOULD SEND DATA TO PARTIAL VIEW
                },
                error: function (response, textStatus, errorThrown) {
                    alert("error!");
                },
                failure: function (response) {
                    alert("failure!");
                }
            });
        }
    }
</script>

我想我到目前为止所做的这部分有一定的意义，但我被困在这里，我不知道如何成功地将数据发送到局部视图，并使用该数据填充我的span元素，所以我希望显示数据库中的真正发送者，而不是“John Doe”

任何形式的帮助对我都是很好的

谢谢各位

---

干杯

回答修改为评论

您需要在主父视图中呈现局部视图。。类似于

主“电子邮件”视图

查看您的代码。。。我认为你的部分观点将包含以下内容

@model TestMVC.Controllers.EmailModel

<ul id="menu1" class="dropdown-menu list-unstyled msg_list" role="menu">

    @for (int i = 0; i < Model.Emails.Count; i++)
    {
        <li>
            <a>
                <span class="image"><img src="/myresources/images/john.png"></span>
                <span>
                    <span>@Model.Emails[i].EmailFor</span>
                    <span class="time">@Model.Emails[i].NoOfMinsAgoSent mins ago</span>
                </span>
                <span class="message">
                    Message number: @i;
                </span>
            </a>
        </li>
    }
</ul>

然后可以返回给定用户的局部视图

    public PartialViewResult UnReadEmails(EmailModel model)
    {
        var newEmailModel = new EmailModel();
        var emailService = new EmailService();
        newEmailModel.Emails = emailService.GetUnReadEmails(model.Username);

        return PartialView("_UnReadEmails", newEmailModel);
    }

---

这应该足以让您继续下去。

如果您想使用ajax，最好的方法是： 首先，您需要将GetAllUnredEmails方法从controller更改为：

public JsonResult GetAllUnreadEmails()
{  

    //This is global user that I can access to on view also
    if (User.Id != null)
    {
        List<Emails> resultList = EmailController.GetUnreadEmailsByUserId(User.Id);
        return Json(resultList);
     }
     return Json(false);
}

publicjsonresult getallunredemails（）
{  
//这是全局用户，我也可以在视图中访问
如果（User.Id！=null）
{
List resultList=EmailController.GetUnreadEmailsByUserId（User.Id）；
返回Json（结果列表）；
}
返回Json（false）；
}

以及ajax调用：

//if the user id is global then there is no need to send it via ajax
    <script>
        var GetAllUnreadEmails = function () {
                $.ajax({
                    method: "GET",
                    url: '@Url.Action("GetAllUnreadEmails", "Email")',
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                       $('#menu1').html(' ') //to clear the contect
                       $.each(data, function () {
                           $('#menu1').append("<p>"+this.Name + " " + this.Email+"<p>")
                      })
                    },
                    error: function (result) {
                        alert("error!");
                    },
                    failure: function (response) {
                        alert("failure!");
                    }
                });

        }
    </script>

//如果用户id是全局的，则无需通过ajax发送
var getallunredemails=函数（）{
$.ajax({
方法：“获取”，
url:'@url.Action（“GetAllUnreadEmails”，“Email”），
contentType:“应用程序/json；字符集=utf-8”，
成功：功能（数据）{
$（'#menu1'）.html（''）//以清除内容
$。每个（数据、函数（）{
$（“#menu1”）.append（“”+this.Name+”+this.Email+“”）
})
},
错误：函数（结果）{
警报（“错误！”）；
},
故障：功能（响应）{
警报（“失败！”）；
}
});
}

你能看一下我的代码并告诉我什么代表了我的代码中的这个#divUnReadEmails吗？@Roxy'Pro-我已经修改了答案。但是，您不应该访问视图中的数据库。如果这是MVC，则在呈现视图时，视图应该在包含电子邮件信息的模型上运行。@Roxy'Pro-Hi。。我改变了我的答案，向你们展示了我将如何处理这个问题。有一个父视图，其中包含局部视图以及用于填充视图呈现的视图模型的控制器和电子邮件服务的结构。按照您的方法，我不需要成功：function（data）{$（“#divUnReadEmails”）.html（data）；}？@Roxy'Pro-Correct。但我不确定你的用户界面应该如何操作。是的，提前收到所有未读的电子邮件。除非可以更改用户，否则实际上不需要局部视图？但考虑到它是登录用户，我想不是。

@model TestMVC.Controllers.EmailModel

<ul id="menu1" class="dropdown-menu list-unstyled msg_list" role="menu">

    @for (int i = 0; i < Model.Emails.Count; i++)
    {
        <li>
            <a>
                <span class="image"><img src="/myresources/images/john.png"></span>
                <span>
                    <span>@Model.Emails[i].EmailFor</span>
                    <span class="time">@Model.Emails[i].NoOfMinsAgoSent mins ago</span>
                </span>
                <span class="message">
                    Message number: @i;
                </span>
            </a>
        </li>
    }
</ul>

 public ActionResult Emails()
    {
        var emailModel = new EmailModel();
        var emailService = new EmailService();

        emailModel.NoOfUnReadEmails = emailService.GetNoOfUnreadEmails("User1") //Your count!
        emailModel.Username = "User!"; //Logged on user

        return View("Emails", emailModel);
    }

    public PartialViewResult UnReadEmails(EmailModel model)
    {
        var newEmailModel = new EmailModel();
        var emailService = new EmailService();
        newEmailModel.Emails = emailService.GetUnReadEmails(model.Username);

        return PartialView("_UnReadEmails", newEmailModel);
    }

public JsonResult GetAllUnreadEmails()
{  

    //This is global user that I can access to on view also
    if (User.Id != null)
    {
        List<Emails> resultList = EmailController.GetUnreadEmailsByUserId(User.Id);
        return Json(resultList);
     }
     return Json(false);
}

//if the user id is global then there is no need to send it via ajax
    <script>
        var GetAllUnreadEmails = function () {
                $.ajax({
                    method: "GET",
                    url: '@Url.Action("GetAllUnreadEmails", "Email")',
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                       $('#menu1').html(' ') //to clear the contect
                       $.each(data, function () {
                           $('#menu1').append("<p>"+this.Name + " " + this.Email+"<p>")
                      })
                    },
                    error: function (result) {
                        alert("error!");
                    },
                    failure: function (response) {
                        alert("failure!");
                    }
                });

        }
    </script>