Ce didacticiel présente Microsoft WebMatrix, une technologie de développement Web gratuite qui offre l'une des meilleures expériences pour les développeurs Web..

Ce que vous allez apprendre:

• Qu'est-ce que WebMatrix??
• Comment installer WebMatrix.
• Comment commencer à créer un site Web simple à l'aide de WebMatrix.
• Comment créer une page Web dynamique à l'aide de WebMatrix.
• Comment programmer vos pages Web dans Visual Studio pour tirer parti de fonctionnalités plus avancées.

Qu'est-ce que WebMatrix??

WebMatrix est un ensemble gratuit et léger d’outils de développement Web qui offre le moyen le plus simple de créer des sites Web..

Il inclut IIS Express (un serveur Web de développement), ASP.NET (une infrastructure Web) et SQL Server Compact (une base de données intégrée). Il comprend également un outil simple qui simplifie le développement de sites Web et facilite le démarrage de sites Web à partir d'applications populaires open source. Les compétences et le code que vous développez avec WebMatrix permettent une transition transparente vers Visual Studio et SQL Server..

Les pages Web que vous créez à l'aide de WebMatrix peuvent être dynamiques. En d'autres termes, elles peuvent modifier leur contenu ou leur style en fonction des entrées de l'utilisateur ou d'autres informations, telles que des informations de base de données. Pour programmer des pages Web dynamiques, vous utilisez ASP.NET avec la syntaxe Razor et avec les langages de programmation C # ou Visual Basic..

Si vous avez déjà des outils de programmation que vous aimez, vous pouvez essayer les outils WebMatrix ou vous pouvez utiliser vos propres outils pour créer des sites Web utilisant ASP.NET..

Ce didacticiel explique comment WebMatrix facilite la création de sites Web et de pages Web dynamiques..

Installation de WebMatrix

Pour installer WebMatrix, vous pouvez utiliser le programme d'installation Web de Microsoft, une application gratuite qui facilite l'installation et la configuration de technologies liées au Web..

1. Si vous ne possédez pas déjà le programme d'installation de Web Platform, téléchargez-le à partir de l'URL suivante:

   http://go.microsoft.com/fwlink/?LinkID=205867

2. Exécutez le programme d'installation de Web Platform, sélectionnez Projecteur, puis cliquez sur Ajouter installer WebMatrix.
   

   RemarqueSi vous avez déjà une version WebMatrix Beta installée, Web Platform Installer met à niveau l’installation vers WebMatrix 1.0. Cependant, les sites que vous avez créés avec des éditions précédentes de la bêta pourraient ne pas apparaître dans la liste. Mes sites liste lorsque vous ouvrez WebMatrix pour la première fois. Pour ouvrir un site créé précédemment, cliquez sur le bouton Site De Dossier icône, accédez au site et ouvrez-le. La prochaine fois que vous ouvrirez WebMatrix, le site apparaîtra dans le Mes sites liste.

Débuter avec WebMatrix

Pour commencer, vous allez créer un nouveau site Web et une simple page Web..

1. Démarrer WebMatrix.
2. Cliquez sur Site à partir de modèle. Les modèles incluent des fichiers prédéfinis et des pages pour différents types de sites Web.
3. Sélectionner Site vide et nommer le nouveau site Bonjour le monde.
4. Cliquez sur D'accord. WebMatrix crée et ouvre le nouveau site.

   En haut, vous voyez une barre d'outils Accès rapide et un ruban, comme dans Microsoft Office 2010. En bas à gauche, vous voyez le sélecteur d'espace de travail, qui contient des boutons qui déterminent ce qui apparaît au-dessus d'eux dans le volet de gauche. À droite, le volet de contenu, où vous pouvez afficher des rapports, modifier des fichiers, etc. Enfin, en bas, la barre de notification affiche les messages nécessaires..

   

Création d'une page Web

1. Dans WebMatrix, sélectionnez le Des dossiers espace de travail. Cet espace de travail vous permet de travailler avec des fichiers et des dossiers. Le volet de gauche montre la structure de fichier de votre site..
2. Dans le ruban, cliquez sur Nouveau puis cliquez sur Nouveau fichier.

   WebMatrix affiche une liste de types de fichiers.

   
3. Sélectionner CSHTML, et dans le prénom boîte, tapez default.cshtml. Une page CSHTML est un type de page spécial dans WebMatrix pouvant contenir le contenu habituel d'une page Web, tel que le code HTML et JavaScript, et pouvant également contenir du code pour la programmation de pages Web. (Vous en apprendrez plus sur les fichiers CSHTML plus tard.)
4. Cliquez sur D'accord. WebMatrix crée la page et l'ouvre dans l'éditeur.

   Comme vous pouvez le constater, il s’agit d’un balisage HTML ordinaire..

5. Ajoutez le titre, l'en-tête et le contenu de paragraphe suivants à la page:

           
   Bonjour la page du monde
    
   Bonjour le monde!
     

6. Dans la barre d’accès rapide, cliquez sur sauvegarder.
7. Dans le ruban, cliquez sur Courir.

   RemarqueAvant de cliquer Courir, assurez-vous que la page Web que vous souhaitez exécuter est sélectionnée dans le volet de navigation de la Des dossiers espace de travail. WebMatrix exécute la page sélectionnée, même si vous modifiez actuellement une autre page. Si aucune page n'est sélectionnée, WebMatrix tente d'exécuter la page par défaut du site (default.cshtml), et s'il n'y a pas de page par défaut, le navigateur affiche une erreur.

   WebMatrix démarre un serveur Web (IIS Express) que vous pouvez utiliser pour tester des pages sur votre ordinateur. La page est affichée dans votre navigateur par défaut.

   

Installation des aides avec l'outil d'administration

Maintenant que WebMatrix est installé et qu'un site est créé, c'est une bonne idée d'apprendre à utiliser l'outil d'administration de pages Web ASP.NET et le gestionnaire de packages pour installer des aides. WebMatrix contient des aides (composants) qui simplifient les tâches de programmation courantes et que vous utiliserez tout au long de ces didacticiels. (Certains assistants sont déjà inclus dans WebMatrix, mais vous pouvez en installer d’autres également.) Dans l’annexe, vous trouverez une référence rapide pour les assistants inclus et pour d’autres que vous pouvez installer dans le cadre d’un package appelé ASP.NET Web Bibliothèque des aides. La procédure suivante montre comment utiliser l'outil d'administration pour installer la bibliothèque des aides Web ASP.NET. Vous utiliserez certaines de ces aides dans ce tutoriel et d'autres tutoriels de cette série..

1. Dans WebMatrix, cliquez sur le bouton Site espace de travail.
2. Dans le volet de contenu, cliquez sur Administration des pages Web ASP.NET. Cela charge une page d'administration dans votre navigateur. Comme c'est la première fois que vous vous connectez à la page d'administration, il vous est demandé de créer un mot de passe..
3. Créer un mot de passe.

   Après avoir cliqué Créer un mot de passe, une page de vérification de sécurité ressemblant à la capture d'écran suivante vous invite à renommer le fichier de mots de passe pour des raisons de sécurité. Si c'est la première fois que vous voyez cette page, n'essayez pas de renommer le fichier pour le moment. Passez à l'étape suivante et suivez les instructions.

   
4. Laissez le navigateur ouvert sur la page de vérification de la sécurité, revenez à WebMatrix et cliquez sur le bouton Des dossiers espace de travail.
5. Faites un clic droit sur le Bonjour le monde dossier pour votre site, puis cliquez sur Rafraîchir. La liste des fichiers et des dossiers affiche maintenant un Données d'application dossier. Ouvrez ça et vous voyez un Admin dossier. Le fichier de mot de passe nouvellement créé (_Password.config) est affiché dans le ./ App_Data / Admin / dossier. L'illustration suivante montre la structure de fichier mise à jour avec le fichier de mot de passe sélectionné:

6. Renommez le fichier en Password.config en supprimant le caractère de soulignement (_).
7. Revenez à la page de contrôle de sécurité dans le navigateur, puis cliquez sur le bouton Cliquez ici lien vers la fin du message sur le changement de nom du fichier de mots de passe.
8. Connectez-vous à la page Administration en utilisant le mot de passe que vous avez créé. La page affiche le gestionnaire de packages, qui contient une liste des packages complémentaires..

   Si vous souhaitez afficher d'autres emplacements de flux, cliquez sur le bouton Gérer les sources de paquets lien pour ajouter, modifier ou supprimer des flux.

9. Recherchez le package ASP.NET Web Helpers Library. Pour affiner la liste, recherchez aides en utilisant le Chercher champ. L'image suivante montre le résultat de la recherche de aides. Notez que plusieurs versions de ce paquet sont disponibles.
10. Sélectionnez la version souhaitée, cliquez sur le bouton Installer Cliquez ensuite sur le bouton, puis installez le package comme indiqué. Après l'installation du package, le gestionnaire de packages affiche le résultat.

    Cette page vous permet également de désinstaller des packages. Vous pouvez également utiliser cette page pour mettre à jour des packages lorsque de nouvelles versions sont disponibles. Tu peux aller au Spectacle liste déroulante et cliquez sur installée pour afficher les packages que vous avez installés ou cliquez sur Mises à jour afficher les mises à jour disponibles pour les packages installés.

    Remarqueяя Les modèles de site Web par défaut (Boulangerie, Calendrier, Galerie de photos, et Site de démarrage) sont disponibles dans les versions C # et Visual Basic. Vous pouvez installer les modèles Visual Basic en utilisant le Administration des pages Web ASP.NET outil dans WebMatrix. Ouvrez l'outil d'administration comme décrit dans cette section et recherchez VB, puis installez les modèles dont vous avez besoin. Les modèles de site Web sont installés dans le dossier racine de votre site dans un dossier nommé Modèles Microsoft.

    Dans la section suivante, vous verrez à quel point il est facile d’ajouter du code à la default.cshtml page afin de créer une page dynamique.

Utilisation du code de pages Web ASP.NET

Dans cette procédure, vous allez créer une page utilisant un code simple pour afficher la date et l'heure du serveur sur la page. L'exemple ci-dessous vous présente la syntaxe Razor qui vous permet d'intégrer du code dans le code HTML sur les pages Web ASP.NET. (Vous pouvez en savoir plus à ce sujet dans le prochain didacticiel.) Le code présente l'une des aides que vous avez lues précédemment dans le didacticiel..

1. Ouvrez votre default.cshtml fichier.
2. Ajoutez un balisage à la page afin qu'il ressemble à l'exemple suivant:

           
   Bonjour la page du monde
    
   Bonjour le monde!
    
   Le temps est @ DateTime.Now
     

   La page contient un balisage HTML ordinaire, avec un ajout: le @ caractère marque code de programme ASP.NET.

3. Enregistrez la page et exécutez-la dans le navigateur. Vous voyez maintenant la date et l'heure actuelles sur la page.

   La seule ligne de code que vous avez ajoutée effectue tout le travail de détermination de l'heure actuelle sur le serveur, de sa mise en forme pour l'affichage et de son envoi au navigateur. (Vous pouvez spécifier des options de formatage; il s’agit simplement de la valeur par défaut.)

Supposons que vous vouliez faire quelque chose de plus complexe, comme afficher une liste déroulante de tweets d'un utilisateur Twitter que vous avez sélectionné. Vous pouvez utiliser un assistant pour cela; Comme indiqué précédemment, un assistant est un composant qui simplifie les tâches courantes. Dans ce cas, tout le travail que vous auriez autrement fait chercher et afficher un flux Twitter.

1. Créez un nouveau fichier CSHTML et nommez-le. TwitterFeed.cshtml.
2. Dans la page, remplacez le code existant par le code suivant:

           
   Fil Twitter
    
    
    Entrez le nom d'un autre flux Twitter à afficher:       
    
    @if (Request ["TwitterUser"]. IsEmpty ()) @ Twitter.Search ("microsoft") else @ Twitter.Profile (Request ["TwitterUser"]) 
    
     

   Ce code HTML crée un formulaire qui affiche une zone de texte pour la saisie d’un nom d’utilisateur, ainsi Soumettre bouton. Ce sont entre le premier ensemble de

   Mots clés.

   Entre la deuxième série de

   balises il y a du code. (Comme vous l'avez vu précédemment, pour marquer du code dans les pages Web ASP.NET, vous utilisez le @ caractère.) La première fois que cette page est affichée, ou si l'utilisateur clique sur Soumettre mais laisse la zone de texte vide, l'expression conditionnelle Demande ["TwitterUser"]. IsEmpty sera vrai. Dans ce cas, la page affiche un flux Twitter qui recherche le terme "microsoft". Sinon, la page affiche un fil Twitter pour le nom d'utilisateur que vous avez entré dans la zone de texte..

3. Exécutez la page dans le navigateur. Le fil Twitter affiche les tweets contenant "microsoft".
4. Entrez un nom d'utilisateur Twitter, puis cliquez sur Soumettre. Le nouveau flux est affiché. (Si vous entrez un nom inexistant, un fil Twitter est toujours affiché, il est simplement vide.)

   Cet exemple vous a montré comment utiliser WebMatrix et comment programmer des pages Web dynamiques à l'aide d'un simple code ASP.NET à l'aide de la syntaxe Razor. Le prochain tutoriel examine le code plus en profondeur. Les tutoriels suivants vous montrent ensuite comment utiliser le code pour différents types de tâches de sites Web..

Programmation de pages ASP.NET Razor dans Visual Studio

Outre l'utilisation de WebMatrix pour programmer les pages ASP.NET Razor, vous pouvez également utiliser Visual Studio 2010, l'une des éditions complètes ou l'édition gratuite de Visual Web Developer Express. Si vous utilisez Visual Studio ou Visual Web Developer pour modifier des pages ASP.NET Razor, vous disposez de deux outils de programmation qui peuvent améliorer votre productivité: IntelliSense et le débogueur. IntelliSense fonctionne dans l'éditeur en affichant des choix appropriés au contexte. Par exemple, lorsque vous entrez un élément HTML, IntelliSense affiche une liste d’attributs que l’élément peut avoir, ainsi que les valeurs pour lesquelles vous pouvez définir ces attributs. IntelliSense fonctionne pour HTML, JavaScript, C # et Visual Basic (les langages de programmation que vous utilisez pour les pages ASP.NET Razor.)

Le débogueur vous permet d'arrêter un programme en cours d'exécution. Vous pouvez ensuite examiner des éléments tels que les valeurs de variables, et vous pouvez naviguer pas à pas dans le programme pour voir comment il s'exécute..

Pour utiliser ASP.NET Razor Pages dans Visual Studio, les logiciels suivants doivent être installés sur votre ordinateur:

• Visual Studio 2010 ou Visual Web Developer 2010 Express
• ASP.NET MVC 3 RTM.

RemarqueVous pouvez installer Visual Web Developer 2010 Express et ASP.NET MVC 3 à l'aide du programme d'installation de Web Platform..

Si Visual Studio est installé, lorsque vous modifiez un site Web dans WebMatrix, vous pouvez lancer le site dans Visual Studio pour tirer parti d'IntelliSense et du débogueur..

1. Ouvrez le site que vous avez créé dans ce tutoriel, puis cliquez sur le bouton Des dossiers espace de travail.
2. Dans le ruban, cliquez sur le bouton Lancement de Visual Studio bouton.

   Une fois le site ouvert dans Visual Studio, vous pouvez voir la structure du site dans Visual Studio dans Explorateur de solution vitre. L'illustration suivante montre le site Web ouvert dans Visual Web Developer 2010 Express:

   

   Pour un aperçu de l'utilisation d'IntelliSense et du débogueur avec les pages ASP.NET Razor dans Visual Studio, voir l'élément d'annexe Pages Web ASP.NET Visual Studio..

Création et test de pages ASP.NET à l'aide de votre propre éditeur de texte

Il n'est pas nécessaire d'utiliser l'éditeur WebMatrix pour créer et tester une page Web ASP.NET. Pour créer la page, vous pouvez utiliser n’importe quel éditeur de texte, y compris le Bloc-notes. Assurez-vous simplement de sauvegarder les pages en utilisant le .cshtml extension du nom de fichier. (Ou .vbhtml si vous voulez utiliser Visual Basic)

Le moyen le plus simple de tester .cshtml pages consiste à démarrer le serveur Web (IIS Express) à l'aide de WebMatrix Courir bouton. Si vous ne souhaitez pas utiliser l'outil WebMatrix, vous pouvez toutefois exécuter le serveur Web à partir de la ligne de commande et l'associer à un numéro de port spécifique. Vous spécifiez ensuite ce port lorsque vous demandez .cshtml fichiers dans votre navigateur.

Sous Windows, ouvrez une invite de commande avec des privilèges d'administrateur et accédez au dossier suivant:

C: \ Program Files \ IIS Express

Pour les systèmes 64 bits, utilisez ce dossier:

C: \ Program Files (x86) \ IIS Express

Entrez la commande suivante en utilisant le chemin d'accès réel à votre site:

iisexpress.exe / port: 35896 / chemin: C: \ BasicWebSite

Peu importe le numéro de port que vous utilisez, tant que le port n'est pas déjà réservé par un autre processus. (Les numéros de port supérieurs à 1024 sont généralement gratuits.)

Pour la valeur du chemin, utilisez le chemin du site Web où le .cshtml les fichiers sont ceux que vous souhaitez tester.

Une fois cette commande exécutée, vous pouvez ouvrir un navigateur et accéder à un .cshtml fichier, comme ceci:

http: // localhost: 35896 / default.cshtml

Pour obtenir de l'aide sur les options de ligne de commande d'IIS Express, entrez iisexpress.exe /? à la ligne de commande.