Панель обновления в ASP.NET MVC 3

Question

Я ищу способ сделать "Панель обновления" в 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?

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

Answer 2

Я бы так и сделал.

Возможно, вы также захотите взглянуть на клиентские библиотеки для обработки привязок и т. Д. Похоже, knockoutjs будет включено в MVC4

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