Update Panel in ASP.NET MVC 3

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?

I'd do it like that except I'd return JSON w/ the list items instead. Seems a little silly to re-add the all the users to the usersPanel every time. — Esteban Araya, Jan 27 '12 at 15:25

JoJa · Accepted Answer · 2012-01-27T15:22:48.483

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

score 2 · Answer 2 · answered Jan 27 '12 at 15:10

2

I would do it like that.

You might also want to take a look at client side libraries for handling bindings etc. Looks like knockoutjs will be included in MVC4

answered Jan 27 '12 at 15:10

jgauffin

99,844
45
235
372

To keep working with server side, i've to use jquery right? This lib is only to UI, in other words, i 'll get the result from $.post or $.ajax and set to view model defined with the knockoutjs? Because, if this works only with UI, so it doesn't address fully what i need, but looks like a great lib. Anyway, thak you! – Vinicius Ottoni Jan 27 '12 at 17:36
yes. You'll still use jQuery to do ajax. But knockoutjs can bind the same information to multiple places on your page. – jgauffin Jan 27 '12 at 18:30

score 0 · Answer 3 · answered Jan 27 '12 at 15:18

In View:

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

In controller:

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

     return PartialView("_users", users);
}

Apart from rewriting the code given in the question, what is your answer here? — Andras Zoltan, Jan 27 '12 at 15:20

Update Panel in ASP.NET MVC 3

3 Answers3

Linked