MVC Jquery Ajax updating your Partial View

Question

I have an MVC 3 application that is calling a Web Service it consumes to call Sharepoints API. The call takes roughly 6 seconds regardless of your results, so i have decided to add a async call using JQuery to provide the user with a waiting indicator. I have it almost competed, but i am unable to get the view to update with the returned data. I have narrowed it down to the view as when i get to the partial view that has the data, i have a break point in the ForEach loop and there is data in there and it is what i am expecting, but when i get to the View itself in the browser, the table is not populated. Here is my AJAX call that is started when a input button is clicked, which triggers great:

$(function () {
            $("#ajax-indicator").hide();
        });

        function getData() {
            $("#ajax-indicator").show();

            $.ajax({
                type: "POST",
                url: "/Home/MakeCall",
                // the URL of the controller action method 
                data: null,
                // optional data          
                success: function (result) {
                    // do something with result  
                    $("#ajax-indicator").toggle();
                },
                error: function (req, status, error) {
                    // do something with error     
                }
            });

        }

Here is within the same View, a the indicator div that gets hidden, the button and lastly the Render partial.

 <div id="ajax-indicator">
        <img alt="AJAX Indicator" src="<%= Url.Content("../../images/ajax-loader.gif") %>" />
    </div>
    <div id='button'>
        <% using (Html.BeginForm())
           { %>
               <input type="submit" name="submit" value="Get Data" onclick="getData();" />
           <% } 
        %>
    </div>


    <% Html.RenderPartial("MakeCall", ViewData["viewModel"]); %>

The partial page looks like this:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<AsyncCallTest.Models.SharepointModel>" %>
<table border="1">
<tr>
<td>Folder Name</td>
<td>Link</td>
</tr>

<tr>

<% if (Model != null)
   {
       foreach (var item in Model.FolderList)
       {
       %>
    <td> FolderName: <%: item.FolderName%></td>
       <%
       }
   }

     %>
     </tr>
     </table>

When i look at the item.FolderName I have data there, but we are getting nada. i feel like i am missing something silly. Any ideas?

Answer 1

You are not doing anything to show the data in the success except to toggle the wait indicator.

success: function (result) {
    // do something with result  
    $("#ajax-indicator").toggle();
},

You have to render the result that you got from the AJAX call. Add a div (a place holder) to show the results and then

success: function (result) {
    // do something with result  
    $("#placeHolderSelector").html(result); // Render the result
    $("#ajax-indicator").toggle();
},

Since this call is now async, you could remove

<% Html.RenderPartial("MakeCall", ViewData["viewModel"]); %>

from the view and instead have a placeholder instead

<div id="placeHolderSelector"></div>