How to make update panel in ASP.NET MVC

Question

How do I make an update panel in the ASP.NET Model-View-Contoller (MVC) framework?

Answer 1

Basically the 'traditional' server-controls (including the ASP.NET AJAX ones) won't work out-of-the-box with MVC... the page lifecycle is pretty different. With MVC you are rendering your Html stream much more directly than the abstracted/pseudo-stateful box that WebForms wraps you up in.

To 'simulate' an UpdatePanel in MVC, you might consider populating a <DIV> using jQuery to achieve a similar result. A really simple, read-only example is on this 'search' page

The HTML is simple:

<input name="query" id="query" value="dollar" />
<input type="button" onclick="search();" value="search" />

The data for the 'panel' is in JSON format - MVC can do this automagically see NerdDinner SearchController.cs

    public ActionResult SearchByLocation(float latitude, float longitude) {
        // code removed for clarity ...
        return Json(jsonDinners.ToList());
    }

and the jQuery/javascript is too

  <script type="text/javascript" src="javascript/jquery-1.3.2.min.js"></script>
  <script type="text/javascript">
  // bit of jquery help
  // http://shashankshetty.wordpress.com/2009/03/04/using-jsonresult-with-jquery-in-aspnet-mvc/
  function search()
  {
    var q = $('#query').attr("value")
    $('#results').html(""); // clear previous
    var u = "http://"+location.host+"/SearchJson.aspx?searchfor=" + q;
    $("#contentLoading").css('visibility',''); // from tinisles.blogspot.com
    $.getJSON(u,
        function(data){ 
          $.each(data, function(i,result){ 
            $("<div/>").html('<a href="'+ result.url+'">'+result.name +'</a>'
                            +'<br />'+ result.description
                            +'<br /><span class="little">'+ result.url +' - '
                            + result.size +' bytes - '
                            + result.date +'</span>').appendTo("#results");
          });
        $("#contentLoading").css('visibility','hidden');
        });
  }
  </script>

Of course UpdatePanel can be used in much more complex scenarios than this (it can contain INPUTS, supports ViewState and triggers across different panels and other controls). If you need that sort of complexity in your MVC app, I'm afraid you might be up for some custom development...

Answer 2

You could use a partial view in ASP.NET MVC to get similar behavior. The partial view can still build the HTML on the server, and you just need to plug the HTML into the proper location (in fact, the MVC Ajax helpers can set this up for you if you are willing to include the MSFT Ajax libraries).

In the main view you could use the Ajax.Begin form to setup the asynch request.

    <% using (Ajax.BeginForm("Index", "Movie", 
                            new AjaxOptions {
                               OnFailure="searchFailed", 
                               HttpMethod="GET",
                               UpdateTargetId="movieTable",    
                            }))

       { %>
            <input id="searchBox" type="text" name="query" />
            <input type="submit" value="Search" />            
    <% } %>

    <div id="movieTable">
        <% Html.RenderPartial("_MovieTable", Model); %>
   </div>

A partial view encapsulates the section of the page you want to update.

<%@ Control Language="C#" Inherits="ViewUserControl<IEnumerable<Movie>>" %>

<table>
    <tr>       
        <th>
            Title
        </th>
        <th>
            ReleaseDate
        </th>       
    </tr>
    <% foreach (var item in Model)
       { %>
    <tr>        
        <td>
            <%= Html.Encode(item.Title) %>
        </td>
        <td>
            <%= Html.Encode(item.ReleaseDate.Year) %>
        </td>       
    </tr>
    <% } %>
</table>

Then setup your controller action to handle both cases. A partial view result works well with the asych request.

public ActionResult Index(string query)
{          
    var movies = ...

    if (Request.IsAjaxRequest())
    {
        return PartialView("_MovieTable", movies);
    }

    return View("Index", movies);      
}

Hope that helps.

Answer 3

If you are new to asp.mvc I recommend you to download the NerdDinner (source) sample application. You will find in there enough information to start working effectively with mvc. They also have ajax examples. You will find out you don't need and update panel.