1. La première chose à faire est d'implémenter le contrôleur avec les deux actions qui seront réalisées. La première sera une simple action qui nous retournera la vue à utiliser (vue Test). La seconde sera utilisée pour renvoyer des données vers une "partial view".
  2. namespace MvcApplication1.Controllers
    {
        public class HomeController : Controller
        {
            public ActionResult Test()
            {
                return RenderView();
            }
    
            public ActionResult Result()
            {
                string items = Request.QueryString["nombreItems"];
                List col = new List<string>();
                int nbr = string.IsNullOrEmpty(items) ? 0 : Convert.ToInt32(items);
                for (int cpt = 0; cpt < nbr; ++cpt)
                    col.Add(System.IO.Path.GetTempFileName());
                return RenderView(col);
            }
        }
    }
    
  3. Il faut ensuite implémenter la page aspx qui sera la vue principale. Celle-ci s'intègre dans une Master page. Elle contient une textbox et un bouton. Ceux-ci sont générés via les extensions qui ont été intégrées dans la version Refresh 2 d'asp.net MVC (contribution d'un utilisateur ;).
  4. <%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" 
    AutoEventWireup="true" CodeBehind="Test.aspx.cs" 
    Inherits="MvcApplication1.Views.Home.Test" %>
    
    <asp:Content ID="Content1" ContentPlaceHolderID="MainContentPlaceHolder" 
    runat="server">
        <%= Html.TextBox("texteExample", 10) %>
        <%= Html.Button("Click", "Click", "clickTest();")%>
        <br />
        <div id="resultat">
        </div>
    </asp:Content>
    
  5. Il faut également implémenter la "partial view" qui sera injectée dans le DOM de notre page Test.
  6. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Result.aspx.cs" 
    Inherits="MvcApplication1.Views.Home.ViewPage1" %>
    <ul>
    <% foreach (string chaine in ViewData)
       { %>
    <li>
        <%= chaine %>
    </li>
    <% } %>
    </ul>
    
  7. Il faut intégrer les références vers les fichiers javascript dans la master page. A noter que j'ai rencontré un problème de génération automatique du chemin d'accès vers les fichiers content pour mes fichiers js. Je n'ai pas rencontré ce problème pour mon fichier css.
  8.     <script src="../Content/prototype-1.6.0.2.js" type="text/javascript"></script>
        <script src="../Content/demo.js" type="text/javascript"></script>
    
  9. La dernière partie à intégrer est le code js dans le fichier demo.js. Ce code contient l'appel "ajax" et la logique de modification du DOM. Ce code ci-dessous affichera une image le temps que la requête s'effectue.... On récupère également la valeur qui se trouve dans la textbox (via $F(id)) et on la passe en GET dans la requête.
  10. function clickTest()
    {
        new Ajax.Request('/Home/Result', {  
                method: 'get',
                parameters: { nombreItems: $F('texteExample') },
                onCreate: function()
                          {
                            var blabla = '';
                            $('input').update(blabla);
                          },   
                onSuccess: function(transport)
                           {  
                              $('input').update(transport.responseText);   
                           } 
        }); 
    }
    
  11. Voici l'abc du comment ajouter le support ajax sous ASP.NET MVC. J'espère avoir pu vous éclairer un minimum. Je ferai prochainement un post pour expliquer comment tester les méthodes du controlleur via des tests unitaires et des mocks Rhino...