Question

I’m looking for a way to do a “Update Panel” in ASP.NET MVC 3. I found this link: How to make update panel in ASP.NET MVC but didn’t work.

So, i did this in my view:

<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>

And in my controller:

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

    return PartialView("_UserList", users);
}

But i don’t know if is a good (or right) way to do that, or if there is a way to do this with asp.net mvc 3. There is a better way to do this, or with asp.net mvc 3?

Answer 1

Just use ajax request to get the results from your action methods. It basically does the same thing as update panels in asp.net.

So something like the following.

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