Création de flux RSS avec la nouvelle API Twitter 1.1

RSS Que sa quo ?

Actuellement les flux RSS 2.0 signifient "Really Simple Syndication". Il s’agit de fichiers XML qui sont souvent utilisés par les sites d’actualité et les blogs pour présenter les titres des dernières informations consultables.

API Twitter 1.1

Depuis la création de Twitter, son API s’est voulue libre d’accés et ouverte pour les tiers. Ne voulant plus vivre ce succès par procuration, Twitter décide de sévir sur son API et notamment en termes d’accès. En effet, les requêtes sur son API doivent obligatoirement passée par des OAuth ( permet aux utilisateurs de donner, à une application ou un site "consommateur", l’accès à des informations personnelles sur un site "fournisseur" de service). Bien sûr, il existe d’autres nouveautés, comme la restriction du nombre de requêtes, qui poussent les utilisateurs du site de microblogging à utiliser leurs applications dédiées et leur site web. Vous l’aurez bien compris, développer des applications utilisant des ressources Twitter est devenu difficile pour les tiers. Cependant je vais vous présenter une façon détournée d’utiliser l’API Twitter afin d’exploiter des "Timelines" sous forme de flux RSS.

Création de son application sur le Dev center de twitter

  • Rendez-vous ici pour créer votre application sur Twitter. Donnez lui un nom, une description et une adresse de site (par exemple votre blog si vous en avez un, cela n’a pas d’importance).
  • Ajoutez l’URL suivante dans la ligne de CallBack URL : https://spreadsheets.google.com/macros/
  • Notez bien votre "Twitter consumer Key" et votre "Twitter consumer Secret" utilisées dans le point suivant.

Ajout du Script Google

  • Allez ici afin d’ajouter le script à votre Google Drive.
  • Remplacez, dans la fonction "start()",les lignes : "YOUR_TWITTER_CONSUMER_KEY" (#14) et "YOUR_TWITTER_CONSUMER_SECRET" (#15) par vos identifiants. ( Faites le uniquement à cet endroit).
  • Cliquez sur "Fichier" –> "Gérer les versions" –> "Enregistrer une nouvelle version" et lui donner un nom (n’importe lequel fera l’affaire).
  • Cliquez sur "Publier" –> "Déployer en tant qu’application Web" et choisir "un accès à tout le monde, même les utilisateurs anonymes". Cliquez ensuite sur "Mettre à jour".

Déployer l’outil

Conclusion

Cette méthode vous permet de contourner la restriction d’implémenter les OAuth directement dans votre application. Vous ne saurez pas exploiter les tweets comme sous la première API mais il vous sera possible de les utiliser comme des flux RSS standards. Il est possible que vos flux RSS ne soient plus disponibles aprés un certains temps (raison qui m’est encore inconnue mais j’y travaille), dans ce cas vous devrez recommencer la procédure pour pouvoir en réutiliser.

Source

Merci à labnol pour son article que vous pouvez retrouver ici.

La validation des formulaires en ASP.NET MVC 4

Un problème récurrent, que l’on peut rencontrer en développant des applications web, est la validation des formulaires : contrôler les valeurs qu’un utilisateur rentre dans un formulaire et lui indiquer le message adéquat.  Par exemple :

Exemple1

Le modèle

Pour reproduire l’exemple précédent, commençons par construire notre modèle en spécifiant les annotations adéquates. (Les annotations permettent de décrire les règles à appliquer aux propriétés du modèle et le moteur ASP.NET MVC 4 se charge de leur mise en application ainsi que de l’affichage des messages appropriés dans la vue.)  :

Exemple2

Sans oublier le DbContext pour la manipulation des données (similaire à un ObjectContext, le DbContext permet d’interroger la base de données et de regrouper les changements qui seront ensuite écrits de nouveau dans la zone de stockage comme unité.) :

Exemple3

La vue

Dans notre vue, on référence le modèle que l’on va utiliser :

Exemple4

On active la validation des champs via l’instruction ValidationSummary(true). Cette méthode affiche un résumé de toutes les erreurs de validation en ligne sur une page Web et/ou dans un message :

Exemple5

Chaque propriété du modèle aura la structure suivante :

  • Un Label pour afficher le nom de la propriété.
  • Un Editor pour afficher la données contenue dans le DbSet.
  • Un ValidationMessage pour afficher le message d’une éventuelle erreur.

Exemple6

A la fin du formulaire on n’oublie pas le bouton de soumission qui permettra de lancer la validation :

Exemple7

Pour permettre la validation dynamique nous avons également besoin de préciser les scripts JQuery. L’ASP.NET MVC 4 permet de référencé directement les scripts nécessaires à la validation via l’instruction :

Exemple8

Le contrôleur

Au niveau des contrôleurs, la validation des formulaires se déroule en deux temps :

  • Contrôleur classique pour afficher les données (GET).
  • Contrôleur de vérification des données tapées (POST).

Le contrôleur GET qui, via le DbSet, recherche et retourne un film sur base de son identifiant :

Exemple9

Le contrôleur POST permet de vérifier l’état du modèle (valide ou non) et ainsi retourner la vue avec le modèle en cas d’erreurs ou de sauver les changements.

Exemple10

Conclusion

La validation des formulaires s’avère souvent problématique car elle demande une attention particulière. Les erreurs courantes sont:

  • L’oubli de l’instruction ValidationSummary(true) dans la vue.
  • Un non référencement des scripts de validations via JQuery.
  • Pas de gestion de L’HttpPost.

Une fois la logique de la validation bien comprise, elle se révèle efficace et performante. En effet, le JQuery permet une "aide à la saisie" côté client, tandis que la gestion de l’httpPost permet une validation côté serveur. Les deux mis en place facilement.

Pop-up modal JQuery en Asp.Net MVC4

Introduction

Dans cet article, je vais vous présenter comment apporter une alternative aux vues partielles ou aux Actions, grâce au JQuery. J’utiliserai notamment la classe ".openDialog()" dont vous pouvez voir la documentation ici :
http://docs.jquery.com/UI/API/1.8/Dialog.

Le but étant de créer une fenêtre qui ressemble à celle ci-dessous et pour, par exemple, offrir une popup modale de connexion.

vueModal

Mise en place du script JQuery

Comme il conseillé de procéder avec le pattern MVC, le script suivant se trouve dans le Layout de votre application.

DialogJquery

Que fait ce script ? Ce script permet de stopper l’interface utilisateur et de créer une nouvelle "div", avec les propriétés d’une "dialog" JQuery, c’est-à-dire, une nouvelle fenêtre qui va bloquer l’interface. On injectera une vue partielle avec le contenu qui nous intéresse. On peut modifier les attributs "height" et "width" pour faire varier la taille de notre fenêtre et ainsi l’adapter au contenu que l’on souhaite y intégrer. La class ".close" permet de fermer cette fenêtre et de revenir sur l’interface principale.

Les rares problèmes que vous pourriez rencontrer avec ce script sont un mauvais emplacement pour votre script (veillez à bien le placer dans votre vue Layout et en-dessous de  @Scripts.Render("~/bundles/jquery"), le plus souvent en bas de votre Layout) ou que vous n’importez pas les bons scripts JQuery pour reconnaître les propriétés utilisées.

Lier le script à un "ActionLink" dans une vue

Cette partie vous présente comment utiliser le script, décrit précédemment, dans la vue de votre choix, à quelques exceptions. Les instructions suivantes permettent d’afficher votre popup modal dans votre vue:

VueDialogJquery

Pour cette vue je travaille avec différentes popups modales, si l’utilisateur est authentifié ou non. Ce qui nous intéresse ici est le dernier paramètre de l’ActionLink. Le premier attribut permet d’identifier la classe à utiliser, le second, à donner un id à votre fenêtre (i.e. votre nouvelle <div>) et le troisième pour donner un titre à votre fenêtre.

Certains problèmes liés aux contrôleurs peuvent apparaitre dans cette partie. Si la vue que vous voulez intégrer dans la popup modal, concerne un contrôleur, du même répertoire, vous ne devez pas spécifier la "routeValue", cela crée un conflit au niveau du contrôleur. Si, comme dans mon exemple, vous souhaitez afficher un formulaire de login, qui ne dépend pas du même contrôleur, vous devez spécifier cette "routeValue", sinon l’application cherche dans le contrôleur courant et ne retrouve donc pas la bonne méthode. Un autre problème survient si votre vue, intégrant la popup modale, ne contient pas de référence vers votre Layout et donc votre script. Veuillez donc à vérifier si votre vue possède l’instruction suivante:

@{
      Layout = "~/Views/Shared/_Layout.cshtml";
}

Par contre dans la vue qui s’intègrera dans votre popup modal, veillez à instancier votre Layout à null, sinon vous aurez un conflit entre les Layouts.

@{
      Layout = null;
}

Conclusion

Cette relation entre le JQuery et L’Asp.Net MVC 4 permet une alternative aux vues "conventionnelles" et  apporte un dynamisme supplémentaire à votre application, tout en respectant le pattern MVC.

Le MVVM en MVC

Quand vous développez en MVC, un problème que vous pourriez rencontrer est le nombre d’informations à afficher dans votre couche "Vue". En effet, il arrive bien souvent que vous ayez besoin d’afficher sur une même vue, des données provenant de différents modèles.  Une solution consiste à utiliser un second pattern de structure, à savoir le MVVM. Ainsi, à la place de passer un modèle à notre vue, nous passerons une "ViewModel" comme "model". Ce pattern permet également de conserver les forces du MVC : facilement testable, un code simple, permet le développement parallèle et une complexité générale réduite par séparation des couches.

MVVM ?

MVVM est un acronyme pour Model – View – ViewModel. Facile à mettre en place dans un pattern MVC, le MVVM permet donc d’afficher plus simplement un grand nombre de données, via le ViewModel, en se substituant au "model" habituel : le modèle. La ViewModel contient donc toutes les données que vous voulez afficher dans votre vue. Si on applique un MVVM strict, les ViewModels joueront également le rôle de contrôleur.

Comment le mettre en place ?

Vous l’avez donc compris la ViewModel consiste en une "sous-couche" entre la vue et le modèle. Grâce au pattern MVC, vous avez déjà implémenté les couches vue et modèle. Pour implémenter la couche ViewModel, créez un nouveau répertoire que vous nommez "ViewModel".

François Borgies.
Capture d’écran (32)Capture d’écran (33)

Ajoutez également une classe et nommez là de façon explicite, en fonction du contenu à afficher, simple question d’organisation. Dans mon exemple, je liste simplement mes films et mes musiques.

Capture d’écran (36)

Il faut également créer une vue qui accueillera les listes de mes médias.

Capture d’écran (37)

Je parcoure simplement ma liste et j’affiche les titres de mes différents médias. Ce qui nous donne :

Capture d’écran (38)

Si vous mettez à jour le model d’une vue par une ViewModel, n’oubliez pas de vérifier les différentes instructions dans la vue qui ne vont plus correspondre au "model". Il faut également modifier les contrôleurs des vues pour fournir, non plus un modèle, mais une ViewModel.

Avantages et incovénient
Personnellement j’aime cette approche. Les couches vue et modèle sont renforcées dans leur fonctionnement et permettent plus de flexibilité. Cette logique permet également de simplifier son code, mais elle garantit également du code simple et testable aisément; les avantages initiaux du MVC. Cependant, cette approche renforce le point faible du MVC, à savoir, une quantité de fichiers plus importante.

Conclusion
Le MVC permet de mettre en place efficacement les ViewModels, qui apportent une solution efficace pour l’affichage de de nombreuses données, souvent fastidieux en temps normal. Cette approche m’a permis de résoudre nombre de problèmes d’affichage de données (afficher des listes d’objets provenant de modèles différents, par exemple).

Like Toolbar

Cet article concerne l’élaboration, souvent fastidieuse par manque de tutoriels disponibles, d’une "Like Toolbar".
Cette barre permet le like sur les réseaux sociaux les plus présents, à savoir Facebook, Twitter, Google+ et Linkedin.
Je parlerai également des problèmes qui peuvent survenir et de leur solution. Pour simplifier l’article, je part du principe que vous avez déjà une application enregistrée sur le Facebook developers, le Twitter developers et le Linkedin developers, si ce n’est pas le cas, je vous suggère de le faire.

Pour commencer, je vous conseille vivement de préparer la div "conteneur", dans laquelle vous ajouterez les différents "likes" :

</pre>
<div id="likeBar"><input type="text" disabled="disabled" value="Partage !" /></div>
<pre>

Facebook’s Like

Pour permettre Facebook à accéder à votre application, vous devez l’enregistrer sur le Facebook developers. Pour cela :

          • Choisissez : "Web";
          • Dans la nouvelle page, regardez la première option : "integrate with your website", cliquez sur le lien "like button";

En descendant dans la page vous tomberez sur la première étape : Capture d’écran (20)

Dans cette étape vous pouvez tester l’apparence et le comportement du like. Si vous ne précisez pas l’URl de la page à "liker", il considère par défaut, la page courante. Pour l’exemple, j’utilise un simple button_count. Cliquez ensuite sur "Get Code". La fenêtre suivante s’ouvre :

Capture d’écran (21)

En suivant les instructions vous devriez avoir le code suivant :

</pre>
<div id="fb-root"></div>
<pre><script type="text/javascript">// <![CDATA[
(function (d, s, id) {     var js, fjs = d.getElementsByTagName(s)[0];     if (d.getElementById(id)) return;     js = d.createElement(s); js.id = id;     js.src = "//connect.facebook.net/fr_FR/all.js#xfbml=1&appId=0000000000000000";     fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));
// ]]></script></pre>
<div id="likeBar"><input type="text" disabled="disabled" value="Partage !" />
<div class="fb-like" data-send="false" data-layout="button_count" data-width="450" data-show-faces="true"></div>
</div>
<pre>

Cela permet juste d’afficher le bouton comme vous l’avez configuré. Si vous cliquez dessus, vous aurez l’erreur suivante :

Capture d’écran (22)

Cette erreur arrive lorsque l’on a oublié d’instancier le JavaScript SDK de Facebook. Pour cela retournez sur le Facebook developers et dans la recherche, tapez "JavaScript SDK". Dans cette page, sélectionnez le code permettant d’instancier le SDK et placez le dans le code source, en-dessous de la balise. Pour éviter d’autres erreurs d’accés :

      • Remplacez "YOUR_APP_ID" par l’identifiant de votre application, présente dans votre dashboard, sur Facebook developers.
      • Remplacez "//WWW.YOUR_DOMAIN.COM/channel.html" par l’URL de votre site web.

Google+

Ce bouton est très simple à mettre en place. En effet, allez à l’adresse suivante : https://developers.google.com/+/plugins/+1button/?hl=fr. Il vous suffit alors de choisir l’apparence et le type de bouton que vous désirez. Sélectionnez ensuite le code source que vous ajouterez en-dessous de la balise du like Facebook :

</pre>
<div id="likeBar">
<input type="text" disabled="disabled" value="Partage !" />
<div class="fb-like" data-send="false" data-layout="button_count" data-width="450" data-show-faces="true"></div>
 <!-- Placez cette balise où vous souhaitez faire apparaître le gadget Bouton +1. -->
<div class="g-plusone" data-size="medium"></div>
 <!-- Placez cette ballise après la dernière balise Bouton +1. -->
<script type="text/javascript">// <![CDATA[
window.___gcfg = { lang: 'fr' };             (function () {                 var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;                 po.src = 'https://apis.google.com/js/plusone.js';                 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);             })();
// ]]></script></div>
<pre>

Avec l’ajout de ce nouveau bouton, vous remarquerez que le like Facebook n’est plus aligné :

Capture d’écran (24)

Pour corriger cela, ajoutez un style dans div du Facebook like en précisant un alignement sur le dessus de la div, le padding est rajouté pour un design plus aéré :

</pre>
<div class="fb-like" style="vertical-align: top; padding-right: 30px;" data-send="false" data-layout="button_count" data-width="450" data-show-faces="true"></div>
<pre>

Ce qui donne :

Capture d’écran (25)

Twitter

Une fois votre application enregistrée sur le Twitter developers :

Capture d’écran (29)

    • Sélectionnez : "Partager un lien"
    • Laissez les paramètres par défauts
    • Sélectionnez le code à droite du formulaire
    • Ajoutez ce code dans votre code source, en-dessous de la balise du bouton google+

Vous devriez avoir :

</pre>
<div id="likeBar">
<input type="text" disabled="disabled" value="Partage !" />
<div class="fb-like" style="vertical-align: top; padding-right: 30px;" data-send="false" data-layout="button_count" data-width="450" data-show-faces="true"></div>
 <!-- Placez cette balise où vous souhaitez faire apparaître le gadget Bouton +1. -->
<div class="g-plusone" data-size="medium"></div>
 <!-- Placez cette balise après la dernière balise Bouton +1. -->
<script type="text/javascript">// <![CDATA[
window.___gcfg = { lang: 'fr' };             (function () {                 var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;                 po.src = 'https://apis.google.com/js/plusone.js';                 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);             })();
// ]]></script>
 <a class="twitter-share-button" href="https://twitter.com/share">Tweeter</a>
<script type="text/javascript">// <![CDATA[
!function (d, s, id) {                  var js, fjs = d.getElementsByTagName(s)[0];                  if (!d.getElementById(id)) {                      js=d.createElement(s);                      js.id = id; j                      s.src = "//platform.twitter.com/widgets.js";                      fjs.parentNode.insertBefore(js, fjs);                  }              }(document, "script", "twitter-wjs");
// ]]></script></div>
<pre>

Résultat :
Capture d’écran (26)

LinkedIn’s share

L’API de LinkedIn est moins performante que celle de Twitter ou Facebook, néanmoins elle reste facilement utilisable :

Capture d’écran (27)

  • Choisissez votre bouton (j’utilise le deuxième)
  • Cliquez sur "Get It", une nouvelle fenêtre s’ouvre alors

Capture d’écran (28)

  • Choisissez des options supplémentaires (je laisse les paramètres par défaut)
  • Cliquez sur "Get Code", une fenêtre s’ouvre en-dessous des options
  • Sélectionnez le code et copiez le dans votre code source, en-dessous de la balise du Twitter’s like

Vous devriez avoir :

</pre>
<div id="likeBar">
 <input type="text" disabled="disabled" value="Partage !" />
<div class="fb-like" style="vertical-align: top; padding-right: 30px;" data-send="false" data-layout="button_count" data-width="450" data-show-faces="true"></div>
 <!-- Placez cette balise où vous souhaitez faire apparaître le gadget Bouton +1. -->
<div class="g-plusone" data-size="medium"></div>
 <!-- Placez cette balise après la dernière balise Bouton +1. -->
<script type="text/javascript">// <![CDATA[
            window.___gcfg = { lang: 'fr' };

            (function () {
                var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
                po.src = 'https://apis.google.com/js/plusone.js';
                var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
            })();

// ]]></script>
 <a class="twitter-share-button" href="https://twitter.com/share">Tweeter</a>
<script type="text/javascript">// <![CDATA[
!function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = "//platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); } }(document, "script", "twitter-wjs");
// ]]></script>

<script type="text/javascript" src="//platform.linkedin.com/in.js"></script><script type="IN/Share" data-counter="right"></script></div>
<pre>

Résultat final :
Capture d’écran (30)

Conclusion

Ce tutoriel vous présente comment mettre en place une like toolbar simple mais fonctionnelle.
Il est possible de rajouter d’autres likes, selon vos envies. Vous rencontrerez peut-être des erreurs non-traitées dans cet article, si c’est le cas, prenez le temps de lire l’API ciblée, elle fourmille de détails dont vous auriez besoins ou de fonctionnalités supplémentaires ainsi que la solution à la majorité des problèmes, pour le reste, les moteurs de recherche sont vos amis!

François Borgies.

Le passage de valeurs en ASP.NET MVC

Dans l’introduction sur le MVC je vous ai parlé des trois couches composants ce pattern. Dans cet article je vais m’attarder sur le passage des valeurs d’une couche à l’autre. Si, comme moi vous êtes débutant et ne connaissez que l’ASP.NET "classique", vous vous sentirez probablement un peu perdu en commençant le MVC. En effet, adopter la logique MVC demande la compréhension de chaque partie de l’application et une certaine pratique pour en saisir toute les subtilités. Je vais donc évoquer les différentes pratiques que j’ai utilisées dans mon projet, les problèmes rencontrés ainsi que leur solution.

Les bases

Pour entamer le sujet en douceur, un petit rappel de la communication entre les couches.
Le pattern MVC, comme son nom l’indique, s’articule autour de trois grands composants, à savoir :

  • La couche Modèle
  • La couche Vue
  • La couche contrôleur

Partons d’un exemple pour expliquer les transactions qui interviennent entre les différentes couches.
Lorsqu’un client clique sur un bouton de l’interface, cela envoie une requête à l’application :

  • La requête envoyée depuis la vue, est analysée par le contrôleur;
  • Le contrôleur demande au modèle approprié d’effectuer les traitements et prévient la vue que la requête en cours de traitement (par exemple : via un handler ou un callback par exemple);
  • La vue notifiée fait une requête au modèle pour se mettre à jour (par exemple : affiche le résultat du traitement via le modèle).

Le passage non fortement typé : le ViewBag

Si vous êtes familier avec des versions antérieures au MVC, ViewBag est une amélioration de la classe ViewData et vous permet d’utiliser des propriétés créées de manière dynamique. Le ViewBag n’est utilisable que pour les contrôleur et les vues. Le passage de valeurs d’une vue au contrôleur ne nécessite pas un accès au modèle, ce qui explique que le ViewBag soit non fortement typé et dynamique.

Les problèmes liés à son utilisation

Tout ce que vous déclarez dans le ViewBag peut donc être utilisé soit par la vue, soit par le contrôleur.
Il existe cependant des contraintes évidentes :
Dans le contrôleur on déclare une variable "Number", que je veux afficher dans ma vue.

public ActionResult Index()
{
  ViewBag.Number = (10 + 20);
  return View();
}

Dans la vue, on affiche la valeur de Number :

</pre>
<h2>Mon nombre</h2>
<div id="contenu">@ViewBag.Number</div>
<pre>

Le résultat : Capture d’écran (11)

Les erreurs courantes

    1. Pour accéder à une variable ou une propriété déclarée dans le ViewBag il est obligatoire de respecter, comme pour toute les classes, le nom de la propriété. Le code suivant n’est pas une erreur en soit, mais comme cette variable n’est implémentée nulle part, cela n’affichera rien. Il importe donc de bien vérifier le nom des variables ou propriétés que vous utilisées

    @ViewBag.number

Une autre erreur courante est le passage d’une variable du ViewBag dans un type différent de celui ou on va stocker la valeur. Par exemple, si pour une raison quelconque, vous veniez à utiliser votre nombre, pour le modifier par exemple, vérifier bien que le type de la variable dans laquelle vous aller le stocker le permet.

public ActionResult Welcome()
{
    ViewBag.Number = 10 + 20;
    string maChaine = ViewBag.Number;

    return View();
}

Ce code compilera sans problème, le ViewBag étant non fortement typé. Cependant vous aurez l’erreur en exécution suivante : Capture d’écran (12)

Le passage fortement typé

Une autre méthode, moins risquée, consiste à passer des paramètres de la vue au contrôleur, ce dernier va les analyser et demander au modèle de les traiter. Le contrôleur notifie à la vue que la requête est traitée. La vue effectuera une requête sur le modèle pour mettre ses valeurs à jour. Dans cet exemple nous allons afficher les caractéristiques de films. Pour le modèle : Le code suivant représente un film.

namespace MvcMovies.Models
{
    public class Movie
    {
        public int ID { get; set; }
        public string Title { get; set; }
        public string Genre { get; set; }
    }
}

On déclare un DBContext qui servira de base de données ainsi qu’un DbSet, qui permettra d’interroger la base de données, pour le listing des films par exemple.

    public class MovieDBContext : DbContext
    {
        public DbSet Movies { get; set; }
    }

Pour la vue : Un simple affichage des films de la base de données et des fonctionnalités possibles (création, modification et détails).

@model IEnumerable</pre>
<h2>Index</h2>
<pre>    @Html.ActionLink("Create New", "Create")</pre>
@foreach (var film in Model) { }
<table>
<tbody>
<tr>
<th>@Html.DisplayNameFor(model => model.Title)</th>
<th>@Html.DisplayNameFor(model => model.Genre)</th>
</tr>
<tr>
<td>@Html.DisplayFor(modelItem => film.Title)</td>
<td>@Html.DisplayFor(modelItem => film.Genre)</td>
<td>@Html.ActionLink("Edit", "Edit", new { id=film.ID }) |
 @Html.ActionLink("Details", "Details", new { id=film.ID }) |
 @Html.ActionLink("Delete", "Delete", new { id=film.ID })</td>
</tr>
</tbody>
</table>
<pre>

Attardons-nous sur les dernières lignes du code. Les ActionLink permettent d’envoyer au contrôleur visé (Edit, Details ou Delete), un paramètre id qui identifiera le film choisi, pour l’action à effectuer.

Pour les contrôleurs :

public class MoviesController : Controller
{
    //Permet d'avoir un accès à la base de données
    private MovieDBContext db = new MovieDBContext();
    //Contrôleur affichant simplement le films de la BD.
    public ActionResult Index()
    {
        //On demande à la BD de lister les films qu'elle contient en passant par le Dbset (Movies).
        return View(db.Movies.ToList());
    }

    //Contrôleur de la vue Détails qui permet d'afficher les détails d'un film.
    public ActionResult Details(int id = 0)
    {
        //On utilise l'identifiant, passer en paramètre, pour retrouver, via le Dbset, le film choisi.
        Movie movie = db.Movies.Find(id);
        //Si le film n'existe pas, on retourne une page par défaut.
        if (movie == null)
        {
            return HttpNotFound();
        }
        // Si le film existe on retourne la vue avec comme modèle, le film.
        return View(movie);
    }
}

Les erreurs courantes

En MVC, le système de passage de valeurs fonctionnent principalement avec l’identification des variables utilisées, il importe donc de prêter attention aux noms des variables utilisées pour ce passage.
Si dans ma vue j’écris :

    @Html.ActionLink("Details", "Details", new { <span style="color: #ff0000;">idFilm</span>=film.ID })

Le code est correct et ne plante ni à la compilation, ni à l’exécution. Cependant, la vue détail va afficher, dans tout les cas, la page par défaut:
Capture d’écran (13)
Pourquoi ?
La variable idFilm est considérée par le compilateur comme le paramètre du contrôleur Détails. De ce fait, si les noms de variables ne correspondent pas, le compilateur ne fera pas la liaison et considère donc le paramètre à "null".
Une autre "inattention" peut générer ce type d’erreur. Si le type de film.ID, dans le modèle donc, est différent de celui du contrôleur :
(Contrôleur)

   public ActionResult Details(int id)

(Modèle)

    public long ID { get; set; }

Ce code compile et s’exécute mais le contrôleur Détails ne peut vous afficher que la page par défaut. Le type étant différent, le compilateur ne considère pas que se sont les mêmes valeurs. Cette erreur n’est pas évidente à déceler pour les débutants comme moi car pour l’éviter, il importe d’avoir une bonne compréhension des différentes couches et du mode de fonctionnement de ASP.NET MVC, pour les transactions entre elles.

Conclusion
Vous l’avez donc compris il est primordial de prêter attention aux variables ou propriétés que vous utilisez dans votre application. Je ne vous ai présenté que les erreurs que j’ai commises, il en existe d’autres que je n’hésiterai pas à partager, par un "edit" de cet article.

Introduction à l’ASP.NET MVC 4

Comme dit dans un article précédent, je développe mon projet web en ASP.NET MVC 4. Je vous propose donc une petite introduction à cette architecture de développement.

Notions générales

L’architecture de développement MVC repose, comme son nom le suggère, sur une découpe de son application en trois grands composants, à savoir :

  • Une couche Modèle : les modèles sont liés aux données utilisées dans l’application. Souvent, les objets du modèle récupèrent et stockent l’état des objets dans une base de données.
  • Une couche Vue : les vues sont les éléments qui affichent l’interface utilisateur (UI). L’interface permet donc d’afficher les données du modèles.
  • Une couche Contrôleur : les contrôleurs permettent de gérer les interactions entre le modèle, les vues et les utilisateurs via l’interface.

Le but étant de créer des applications qui séparent les différents aspects de l’application (traitement des données, logique métier et interface utilisateur), tout en fournissant une interaction entre eux. Ce pattern de développement possèdent plusieurs avantages notables :

  • Favoriser le développement parallèle : un développeur peut travailler sur les vues, un autre sur le modèle et un dernier sur les contrôleurs.
  • Grâce à cette séparation par couches, les tests sur une partie ciblée de l’application est simplifiée.
  • Un autre avantage important concerne le temps d’exécution serveur qui est fortement réduit. Avec un contrôle poussé sur le code HTML généré, mais aussi une faible abstraction, la taille des pages est amoindrie, son traitement en est donc plus simple (pas de multiples contrôles imbriqués).

Il en existe bien d’autres : pas d’utilisation de "viewstate" ou contrôle serveur, la complexité générale de l’application est simplifiée,…

Les inconvénients sont eux, peu nombreux ! En effet, le plus gros problème que vous pourriez rencontrer, si vous réalisé une création web de petite envergure, est la création de trois fois plus de fichiers, inhérente à la séparation de l’application en trois couches.

Petit exemple

Ce tutoriel: , est celui sur lequel je vais me baser pour vous présenter les différentes couches du pattern MVC en ASP.NET.

Pour la partie modèle :

using System;
using System.Data.Entity;

namespace MvcMovie.Models
{
    public class Movie
    {
        public int ID { get; set; }
        public string Title { get; set; }        
        public DateTime ReleaseDate { get; set; }        
        public string Genre { get; set; }
        public decimal Price { get; set; }
    }

    public class MovieDBContext : DbContext
    {
        public DbSet<Movie> Movies { get; set; }
    }
}

Il va utiliser la classe Movie pour représenter des films dans une base de données. Chaque instance d’un objet Movie correspond à une ligne dans une table de la base de données, et chaque propriété de la classe Movie correspond à une colonne dans la table.
La classe MovieDBContext représente le contexte film dans la base de données, qui gère la récupération, le stockage et la mise à jour des instances de classes film dans une base de données. Le MovieDBContext hérite de la classe DbContext fournie par Entity Framework. Comprenez que vous pourrez effectuer des opérations de création, modification, suppression et autres, sur la table film en passant par le DbSet.

Pour la Vue :

@model IEnumerable<MvcMovie.Models.Movie> 

La directive @model vous permet d’accéder au film que le contrôleur a transmis à la vue en utilisant un objet du model fortement typé. Par exemple, dans le template Details.cshtml, le code passe chaque champ d’un film sur le DisplayNameFor et DisplayFor HTML Helpers avec un objet du modèle fortement typé. Les méthodes de création et d’édition demande également un objet film du modèle.

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Title)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.ReleaseDate)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Genre)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Price)
        </td>
         <th>
            @Html.DisplayFor(modelItem => item.Rating)
        </th>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.ID }) |
            @Html.ActionLink("Details", "Details", { id=item.ID })  |
            @Html.ActionLink("Delete", "Delete", { id=item.ID }) 
        </td>
    </tr>
}

Et enfin dans la partie contrôleur :

public class MoviesController : Controller
{
    private MovieDBContext db = new MovieDBContext();

    //
    // GET: /Movies/

    public ActionResult Index()
    {
        return View(db.Movies.ToList());
    }

Une demande au contrôleur Movies, renvoie toutes les entrées de la table Movies de la base de données des films, et transmet ensuite les résultats à la vue Index.

La ligne "db = new MovieDBContext()" dans la classe MoviesController, instancie un contexte de base de données film, comme décrit précédemment. Vous pouvez utiliser le contexte de base de données film pour interroger, modifier et supprimer des films.

Regardons le contrôle concernant le détail d’un film :

public ActionResult Details(int id = 0)
{
    Movie movie = db.Movies.Find(id);
    if (movie == null)
    {
        return HttpNotFound();
    }
    return View(movie);
}

Souvenez-vous, dans la vue nous avions la ligne suivante :

@Html.ActionLink("Details", "Details", { id=item.ID })

La valeur du paramètre id est passée au contrôleur via la vue par l’instruction précédente, il est donc obligatoire que les deux noms de variables correspondent, afin de valider le passage de valeur. MVC fonctionne principalement sur base de ce concept, pour le passage de valeur d’une couche à une autre.
Si un film est trouvé, sur base de son id, une instance du modèle de film est passée à la vue Details.cshtml, qui sera utilisée pour l’affichage des détails de ce film.

Conclusion

J’espère vous avoir montré, au cours de ce cours exemple, la nette séparation qu’il existe entre les différentes couches, ainsi qu’un moyen de communication entre elles.
Cet exemple n’explique qu’une infime partie de ce qu’il possible de faire grâce à l’implémentation de ce pattern. MVC permet une maintenance aisée des applications de grandes envergures.Cependant, il est nécessaire de bien saisir le fonctionnement de chaque parties pour en comprendre le comportement général.