ASP.NET MVC 3中的更新面板

本文关键字：更新 NET MVC ASP | 更新日期: 2023-09-27 18:21:32

我正在寻找一种在ASP.NET MVC 3中执行"更新面板"的方法。我找到了这个链接：如何在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？

ASP.NET MVC 3中的更新面板

只需使用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');
    }
});

我会这样做的。

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

视图中：

<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);
}
相关文章：