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>

Answer 2

@PawanMishra thanks I'm looking at the templates idea. I guess my biggest concern is loosing my strongly typed data and just shoving it into that .HTML property. Are there any better MVC solutions that would include strongly typed data and work better with MVC??

For strongly typed implementation, you will have to go with pure "View Model" based approach. In one of my recent project, we decided not to use jQuery/JavaScript, rather use "ViewModel" objects for passing data between view and the controller. Yes, we got strongly typed behavior but we lost the charm of asynchronously updating the UI from jQuery. Since the application was meant for internal use, it was not much of a problem. Its a call for you to take as what you want i.e. a fluent UI using jQuery/JavaScript or strongly typed view-controller interaction.