ASP.NET MVC 3 中的更新面板答案

【问题标题】：Update Panel in ASP.NET MVC 3ASP.NET MVC 3 中的更新面板
【发布时间】：2012-01-27 15:02:12
【问题描述】：

我正在寻找一种在 ASP.NET MVC 3 中执行“更新面板”的方法。我找到了这个链接：How to make update panel in ASP.NET MVC，但没有用。

所以，我认为我这样做了：

<div>
    <input type="text" id="userName" />
    <button type="button" onclick="searchUserByName()">Search</button>
</div>
<div id="usersPanel">
    @{Html.RenderPartial("_UserList", Model);}
</div>
<script type="text/javascript">

    function searchUserByName() {
        var userName = $("#userName").val();

        $.post('@Url.Action("SearchUserByName")',
            {username: userName},
            function (htmlPartialView) {
                $("#usersPanel").html(htmlPartialView);
            }
        );
    }

</script>

在我的控制器中：

public ActionResult SearchUserByName(string userName)
{
    List<User> users = // code to search users by name

    return PartialView("_UserList", users);
}

但我不知道这样做是否是一种好的（或正确的）方法，或者是否有办法使用 asp.net mvc 3 来做到这一点。有更好的方法来做到这一点，或者使用 asp .net mvc 3？

【问题讨论】：

我会这样做，只是我会返回带有列表项的 JSON。每次都将所有用户重新添加到 usersPanel 似乎有点傻。

标签： c# asp.net-mvc asp.net-mvc-3 jquery

【解决方案1】：

只需使用 ajax 请求即可从您的操作方法中获取结果。它基本上和 asp.net 中的更新面板做同样的事情。

如下所示。

$.ajax({
async: false,
cache: false,
type: 'POST',
    url: /controller/action,
    data: { id: idParam },
    beforeSend: function (XMLHttpRequest) {
        if (confirmMessage !== undefined) {
            return confirm(confirmMessage);
        }
        return true;
    },
    success: function (data) {
        // do stuff
    },
    error: function () {
        alert('An error occured');
    }
});

【讨论】：

【解决方案2】：

我会那样做的。

您可能还想查看用于处理绑定等的客户端库。看起来 knockoutjs 将包含在 MVC4 中

【讨论】：

为了继续使用服务器端，我必须使用 jquery 对吗？这个库仅适用于 UI，换句话说，我将从 $.post 或 $.ajax 获取结果并设置为使用 knockoutjs 定义的视图模型？因为，如果这仅适用于 UI，那么它并不能完全满足我的需求，但看起来像一个很棒的库。无论如何，谢谢！
是的。你仍然会使用 jQuery 来做 ajax。但是 knockoutjs 可以将相同的信息绑定到您页面上的多个位置。

【解决方案3】：

在视图中：

<script type="text/javascript">

var userName = $("#userName").val();

 $.ajax({
            url: "/<ControolerName>/SearchUserByName",
            type: "POST",
            data: { userName: userName},
            success: function (result) {
                $('#divResults').html(result);
            },
            error: function (ex) {
                alert("Error");
            }

<script>
<div id="divResults">
</div>

在控制器中：

public PartialViewResult SearchUserByName(string userName)
{
     List<User> users = // code to search users by name

     return PartialView("_users", users);
}

【讨论】：

除了重写问题中给出的代码，你在这里的答案是什么？