Nicolas Moyère
Utilisation de jQuery avec ASP.NET MVC
Développer une IHM à page unique avec ASP.NET MVC et jQuery
Par Nicolas Moyère publié le 30/06/2008 à 10:28, lu 1453 fois, 9 pages
commentaire(s) 0 commentaire(s) tag(s)Tags: ASP.NET MVC, Ajax
 4 | Affichage de la photo
Affichage de la photo
L'affichage d'une image stockée dans une datasource est un problème classique. Il n'est pas possible d'écrire directement une balise img pointant vers un fichier de l'application. Le plus souvent, il faut écrire un HttpHandler spécial sachant lire l'image dans la base, puis l'appeler avec la bonne URL depuis le HTML.

Avec MVC, la solution est plus simple. Les actions des contrôleurs retournent des instances d'ActionResult. Ces objets sont chargés de générer la réponse à envoyer au client.

MVC propose quelques implémentations d'ActionResult. Par exemple, ViewResult utilise une page ASPX ou un contrôle ASCX pour constituer la réponse.

Nous allons simplement créer notre propre BinaryResult pour envoyer nos images :

public class BinaryResult : ActionResult

{

    public string ContentType { get; set; }

    public byte[] Data { get; set; }

 

    public override void ExecuteResult(ControllerContext context)

    {

        HttpResponseBase response = context.HttpContext.Response;

        response.ContentType = ContentType;

        response.BinaryWrite(Data);

    }

}

Comme vous le voyez, la méthode ExecuteResult nous donne accès à la réponse HTTP dans laquelle nous n'avons qu'à écrire l'image.

La photo d'un contact peut être obtenue via l'URL /Contacts/Photo/<email> en ajoutant le code suivant dans ContactsController :

public ActionResult Photo(string id)

{

    // On récupère la photo dans la datasource

    // et on la retourne telle quelle.

    DataContext context = new DataContext();

    byte[] photo = context.Contacts.Where(c => c.Email == id).Single().Photo;

 

    return new BinaryResult() { ContentType = "image/jpeg", Data = photo };

}

Pour achever le travail, nous devons ajouter à la fin de la vue Index.aspx, le HTML permettant d'afficher la photo du contact sélectionné :

<span>Photo</span>

<img src="<%= Url.Action("Photo", "Contacts", new { id = ViewData.Model.SelectedContact.Email }) %>" />

<br />

L'API de MVC se charge de générer l'URL vers l'action Photo de ContactsController avec un email en paramètre.

Ce petit exercice sur la gestion des photos nous montre comment les contrôleurs décident du moyen utilisé pour afficher les vues. L'intégration d'AJAX dans MVC va bien sûr se baser sur les ActionResult.
 
» Démarrer une discussion