将数据发送到部分视图模型和 .html() 速度慢的最佳方法

Question

想象一下，我有一个包含用户列表（循环）的部分视图，其中每个用户都是另一个包含用户详细信息的部分视图。

foreach (var user in Model.Users)
 {
  <a href="#" onclick="JavascriptFunction(user.Id);">Details<a>
 }

当我单击列表项之一的上述详细信息链接时，会弹出一个弹出窗口（JQuery 模态对话框（）），其中包含有关该选定用户的详细信息。或者至少这是目标。我需要将选定的用户详细信息添加到打开的新弹出窗口中。

所以现在我需要在 .dialog('Open') 触发之前使用用户详细信息填充弹出窗口将包含的部分视图后面的模型。

问题：在显示对话框之前，从 Javascript 函数（上例中的 onclick JavascriptFunction 函数）调用 ActionMethod 并填充 Partial View 模型的最佳方法是什么？

现在我正在按照以下方式进行操作，但无论出于何种原因，我都会在页面上呈现数据时出现重大延迟。在 .html() 最终显示数据之前，我看到空白 div 5-10 秒：

在主列表页面上：

<div id="userPopup"></div>

假定从 ActionMethod 加载带有用户详细信息的部分视图的 Javascript：

        $.post('@Url.Action("Details","User")', { id: userId},
        function (data) {

            $("#userPopup").html(data);
        });

可能有一种方法可以在页面上预加载部分视图，然后将我的数据加载到它的模型中而不重写整个 PartialView ？ 那将是理想的情况，但我认为没有办法做到这一点，是吗？

提前谢谢你！如果有任何问题听起来令人困惑，请随时提出问题。

Answer 1

我认为您不应该在主页上预加载所有用户详细信息，如果您有 1000 多个用户并且访问者没有点击详细信息链接怎么办！我会这样做。每当用户点击链接时，调用返回数据的操作方法。

所以在你的主视图中，

@foreach(var user in Model.Users)
{
  @Html.ActionLink(user.Name, "Details", "User",
                             new { Id = user.ID, }, new { @class ="popupLink" })

}

<script type="text/javascript">
$(function(){
    $(".popupLink").click(function (e) {
        e.preventDefault();
        var url = this.href;
        var dialog = $("#dialog");
        if ($("#dialog").length == 0) {
            dialog = $('<div id="dialog" style="display:hidden"></div>').appendTo('body');
        }
        dialog.load(
            url,
            {}, // omit this param object to issue a GET request instead a POST request, otherwise you may provide post parameters within the object
            function (responseText, textStatus, XMLHttpRequest) {
                dialog.dialog({                       
                    close: function (event, ui) {                            
                        dialog.remove();
                    },
                    modal: true,
                    width: 460
                });
            }
        );         

    });
});
</script>

在用户控制器中，有一个名为“详细信息”的操作方法，它接受 Id 作为参数并返回用户详细信息的视图

public ActionResult Details(int id)
{
  var usre=repositary.GetUser(id);
  return View(user);
}

在 DetailsView 中添加 HTML 标记以获取详细信息。

此代码使用 jQuery UI 模型对话框。所以你需要包含它。