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?

score 70 · Accepted Answer · edited Dec 25 '22 at 01:06

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

score 4 · Answer 2 · answered Jun 07 '09 at 12:21

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

what does this part mean?? var q = $('#query').attr("value") or what does it mean when you put $ and what does the ('#query') mean — WingMan20-10, Mar 16 '10 at 20:13
@WingMan20-10, that's jQuery syntax. `$` is a valid function name in jQuery, and they use it. In fact, many other JavaScript libraries use `$` too, so if you combine libraries, you need to take steps to disambiguate them, though I personally have never used multiple libs in this way. — Drew Noakes, Nov 27 '10 at 14:01

score 3 · Answer 3 · edited Nov 27 '10 at 13:59

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.

edited Nov 27 '10 at 13:59

Drew Noakes

300,895
165
679
742

answered Jun 07 '09 at 10:50

Razvan Dimescu

462
4
10

How to make update panel in ASP.NET MVC

3 Answers3

Linked