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
 3 | Mise en place de l'application
Pour l'instant, il n'est pas encore question d'AJAX. Nous allons simplement créer notre projet dans Visual Studio et mettre en place l'application.

Voici la structure du projet :
 
/content/f46626c0-2248-412f-8b8c-85b4e4743f26/etape1vs.png
 
Le modèle est très simple : une classe pour les contacts. La seule subtilité est que la photo des contacts est stockée dans notre datasource et non sous forme d'URL vers un fichier dans l'application. Pour la suite, l'email sert de clé pour identifier les contacts.

public class Contact

{

    public string Name { get; set; }

    public string Email { get; set; }

    public byte[] Photo { get; set; }

}

Trois contrôleurs sont ajoutés ; un par fonctionnalité de l'application.

Le contrôleur de la page d'accueil :

using System.Linq;

using System.Web.Mvc;

using Messenger.Views.Shared;

namespace Messenger.Controllers

{

    public class HomeController : Controller

    {

        public ActionResult Index()

        {

            // On fabrique un modèle tout neuf

            // et on affiche Index.aspx

 

            IndexViewData model = new IndexViewData();

 

            DataContext context = new DataContext();

            model.Contacts = context.Contacts.ToList();

            model.SelectedContact = model.Contacts[0];

            ViewData.Model = model;

 

            return View();

        }

 

        public ActionResult Read(string id)

        {

            // On construit le modèle en récuperant le

            // contact selectionné.

            // Puis on met à jour uniquement la liste

            // des contacts et celui selectionné dans

            // Index.aspx.

            IndexViewData model = new IndexViewData();

 

            DataContext context = new DataContext();

            model.Contacts = context.Contacts.ToList();

            model.SelectedContact = model.Contacts.Where(c => c.Email == id).Single();

            ViewData.Model = model;

 

            return View("Index");

        }

    }

}

Les contrôleurs pour l'envoi d'un message et l'ajout d'un contact sont vides pour l'instant :

using System;

using System.Web.Mvc;

 

namespace Messenger.Controllers

{

    public class ContactsController : Controller

    {

        public ActionResult New()

        {

            throw new NotImplementedException();

        }

 

        public ActionResult Add()

        {

            throw new NotImplementedException();

        }

    }

}

Et

using System;

using System.Web.Mvc;

 

namespace Messenger.Controllers

{

    public class MessagesController : Controller

    {

        public ActionResult New(string id)

        {

            throw new NotImplementedException();

        }

 

        public ActionResult Send(string id)

        {

            throw new NotImplementedException();

        }

    }

}

À cette étape, nous n'avons qu'une seule vue. Celle de la page d'accueil. Elle utilise un ViewData fortement typé lui donnant la liste de tous les contacts à afficher ainsi que le contact sélectionné.

using System.Collections.Generic;

 

namespace Messenger.Views.Shared

{

    public class IndexViewData

    {

        public List<Contact> Contacts { get; set; }

 

        public Contact SelectedContact { get; set; }

    }

}

Et voici pour la vue elle-même :

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="Messenger.Views.Shared.Index"

%><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

    <title>Messenger</title>

    <link href="../../style.css" type="text/css" rel="Stylesheet" />

</head>

<body>

    <div id="contacts">   

            <ul>

            <% foreach (Contact contact in ViewData.Model.Contacts)

               { %>

                <li><%= Html.ActionLink(contact.Name, "Read", "Home", new { id=contact.Email }) %></li>

            <% } %>

            </ul>

    </div>

 

    <div id="actions">

        <%= Html.ActionLink("Add Contact", "New", "Contacts") %>

        <%= Html.ActionLink("Send Msg", "New", "Messages", new { id = ViewData.Model.SelectedContact.Email })%>

    </div>

 

    <div id="panel">  

            <span>Name</span> <%= Html.AttributeEncode(ViewData.Model.SelectedContact.Name) %><br />

            <span>Email</span> <%= Html.AttributeEncode(ViewData.Model.SelectedContact.Email) %><br />

    </div>

</body>

</html>

Vous remarquerez que nous n'affichons pas encore la photo du contact sélectionné. C'est l'objectif de la prochaine étape.
 
» Démarrer une discussion