ASP.NET MVC 3中的更新面板

Question

我正在寻找在ASP.NET MVC 3中执行“Update Panel”的方法。我发现了这个链接：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来实现？

- Vinicius Ottoni

---

我会这样做，但会返回JSON来代替列表项。每次重新添加所有用户到usersPanel看起来有点傻。 - Esteban Araya

Answer 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');
    }
});

- JoJa

Answer 2

我会这样做。 你也可以看看处理绑定等客户端库。像 knockoutjs 看起来会包含在 MVC4 中。

- jgauffin

---

为了继续与服务器端进行交互，我需要使用 jQuery 对吗？这个库仅限于 UI，换句话说，我将从 $.post 或 $.ajax 中获取结果并设置到使用 knockoutjs 定义的视图模型中？因为如果它仅适用于 UI，则无法完全满足我的需求，但看起来是一个很棒的库。不管怎样，谢谢！ - Vinicius Ottoni

是的，您仍然可以使用jQuery来执行ajax操作。但是，knockoutjs可以将相同的信息绑定到页面上的多个位置。 - jgauffin

Answer 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);
}

- Anwar

---

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