Amine Mostefai's Blog

Architecture is my passion :)

Amine

Hi and welcome to my blog. I share in this space a lot of posts related to software architecture, and software development. Content is mainly related to .NET CORE development, Angular, Sharepoint, Azure and Office 365. I hope that my articles are helpful and that you enjoy using them 😉

WCF et IIS 8.5, Régler le problème de l’erreur 404.17

AprĂšs quelques recherches internet et bien sĂ»r, des maux de tĂȘte, j’ai rĂ©ussi Ă  dĂ©bloquer le problĂšme d’erreur 404.17 faisant suite Ă  l’hĂ©bergement d’un service WCF sur IIS 8.5. Sachant que j’utilise IIS 8.5 sous Windows 8.1, la solution est relativement simple : Lancer le panneau de configuration Lancer “Programmes et FonctionnalitĂ©s” Activer ou DĂ©sactiver des FonctionnalitĂ©s Windows” Services .NET Framewok 4.5 avancĂ© Service WCF Activation HTTP                   Le problĂšme devrait ĂȘtre logiquement rĂ©solu

Create a Multi-Checkbox List in WPF

Hi, In this tutorial, I will show how to implement a multi-checkbox WPF list that allows the selection of multiple items of any type. For this, will use the power of templates in WPF and generics of C#. We will also exploit the very useful “INotifyPropertyChanged” interface. First, let’s create a WPF project called “TestMultiCheck”. 1- Create the “SelectionItem” class Add a new class called “SelectionItem” that have to be generic. The code of the class is as follows: /// <summary> /// an item that will be selected in the multi check box /// </summary> /// <typeparam name="T"></typeparam> public class SelectionItem<T> : INotifyPropertyChanged { #region privat fields /// <summary> /// indicates if the item is selected /// </summary> private bool _isSelected; #endregion   public SelectionItem(T element, bool isSelected) { Element = element; IsSelected = IsSelected; }   public SelectionItem(T element):this(element,false) {   }   #region public properties /// <summary> /// this UI-aware indicates if the element is selected or not /// </summary> public bool IsSelected { get { return _isSelected; } set { _isSelected = value; if (PropertyChanged != null) PropertyChanged(this, new PropertyChangedEventArgs("IsSelected")); } }   /// <summary> /// the element itself /// </summary> public T Element { get; set; } #endregion   #region INotifyPropertyChanged Members   public event PropertyChangedEventHandler PropertyChanged;   #endregion } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } The “SelectionItem” is a container for any element of the type “T”. The property IsSelected indicates if the item has been selected or not. Notice that the class implements the “INotifyPropertyChanged” interface to make the UI reacts if the selection is performed in code. 2- Create the “SelectionList” class Let’s add another generic class called “SelectionList” /// <summary> /// a list that will include the elements that will be selected /// </summary> /// <typeparam name="T"></typeparam> public class SelectionList<T> : List<SelectionItem<T>>, INotifyPropertyChanged { #region private fields /// <summary> /// the number of selected elements /// </summary> private int _selectionCount; #endregion   #region private methods /// <summary> /// this events responds to the "IsSelectedEvent" /// </summary> /// <param name="sender"></param> /// <param name="e"></param> void item_PropertyChanged(object sender, PropertyChangedEventArgs e) { var item = sender as SelectionItem<T>; if ((item != null) && e.PropertyName == "IsSelected") { if (item.IsSelected) SelectionCount = SelectionCount + 1; else SelectionCount = SelectionCount - 1; } }   #endregion       public SelectionList() { }   /// <summary> /// creates the selection list from an existing simple list /// </summary> /// <param name="elements"></param> public SelectionList(IEnumerable<T> elements) { foreach (T element in elements) AddItem(element); }   #region public methods /// <summary> /// adds an element to the element and listens to its "IsSelected" property to update the SelectionCount property /// use this method insteand of the "Add" one /// </summary> /// <param name="element"></param> public void AddItem(T element) { var item = new SelectionItem<T>(element); item.PropertyChanged += item_PropertyChanged;   Add(item); }   /// <summary> /// gets the selected elements /// </summary> /// <returns></returns> public IEnumerable<T> GetSelection() { return this.Where(e => e.IsSelected).Select(e => e.Element); }   /// <summary> /// uses linq expression to select a part of an object (for example, only id) /// </summary> /// <typeparam name="U"></typeparam> /// <param name="expression"></param> /// <returns></returns> public IEnumerable<U> GetSelection<U>(Func<SelectionItem<T>, U> expression) { return this.Where(e => e.IsSelected).Select(expression); }   #endregion     #region public properties /// <summary> /// the selection count property is ui-bindable, returns the number of selected elements /// </summary> public int SelectionCount { get { return _selectionCount; }   private set { _selectionCount = value; if (PropertyChanged != null) PropertyChanged(this, new PropertyChangedEventArgs("SelectionCount")); } } #endregion   #region INotifyPropertyChanged Members   public event PropertyChangedEventHandler PropertyChanged;   #endregion } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } This class can be instantiated empty and filled using the “Additem” method. You can alternatively, use the second overload directly to create the list from an existing enumerable. The property “SelectionCount” indicates the number of selected elements. The first “GetSelection” methods returns all the selected elements. The second overload returns only a part using linq expressions. It could be very useful for database application to get directly the ids of the selected elements. 3- Create a Sample Entity To demonstrate the two classes, let’s create a sample entity called course defined as follows : public class Course { public Course() { }   public Course(int id, string name) { Id = id; Name = name; }   public int Id { get; set; }   public string Name { get; set; } } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } The tutorial will allow to select multiple courses 4- Create The XAML View In the mainwindow view, add a stackpanel, two buttons and a list box. The first button will be used to select / unselect an element in the list. The second button will be enabled only if at least one element is checked. Once clicked, it displays the names of the selected courses. The listbox will be converted using data templates to a list that displays a checkbox aside of the name of the course. For this, we will use the following data template : <DataTemplate x:Key="ListBoxItemTemplate" > <WrapPanel> <CheckBox Focusable="False" IsChecked="{Binding IsSelected}" VerticalAlignment="Center" /> <ContentPresenter Content="{Binding Element.Name, Mode=OneTime}" Margin="2,0" /> </WrapPanel> </DataTemplate> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } The default behavior of the listbox is to display vertically its items. It is not the perfect behavior that we are looking for. It would be better to display the checkboxes side by side, for this, we will used an alternative ItemsPanelTempolate based on “WrapPanels” : <ListBox.ItemsPanel> <ItemsPanelTemplate> <WrapPanel Orientation="Horizontal"></WrapPanel> </ItemsPanelTemplate> </ListBox.ItemsPanel> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } To make this behavior concrete, we have to deactivate the horizontal scrolling in the listbox. The full view xaml is like follows: <Window x:Class="TestMultiCheck.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525"> <Window.Resources> <DataTemplate x:Key="ListBoxItemTemplate" > <WrapPanel> <CheckBox Focusable="False" IsChecked="{Binding IsSelected}" VerticalAlignment="Center" /> <ContentPresenter Content="{Binding Element.Name, Mode=OneTime}" Margin="2,0" /> </WrapPanel> </DataTemplate> </Window.Resources> <Grid> <Grid.RowDefinitions> <RowDefinition Height="40" /> <RowDefinition Height="*"/> </Grid.RowDefinitions> <StackPanel Orientation="Horizontal"> <Button Content="Select / Unselect Element By Code" Click="Button_Click" Margin="5"/> <Button x:Name="Save" Content="Save Selection" IsEnabled="False" Margin="5" Click="Save_Click"/> </StackPanel> <ListBox x:Name="myList" Grid.Row="1" Margin="5" ItemTemplate="{DynamicResource ListBoxItemTemplate}" ScrollViewer.HorizontalScrollBarVisibility="Disabled"> <ListBox.ItemsPanel> <ItemsPanelTemplate> <WrapPanel Orientation="Horizontal"></WrapPanel> </ItemsPanelTemplate> </ListBox.ItemsPanel> </ListBox> </Grid> </Window>   .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }5 – The Code Behind The code behind is as follows: public partial class MainWindow : Window { /// <summary> /// the selection list /// </summary> private SelectionList<Course> _list;   /// <summary> /// the list of courses /// </summary> Course[] courses = new Course[] { new Course(1, "course1"), new Course(2, "course2"), new Course(3, "course3"), new Course(4, "course4"), new Course(5, "course5")   }; public MainWindow() { InitializeComponent(); // create the list _list = new SelectionList<Course>(courses); // assign the source of the list (not necessary in an MVVM approach) myList.ItemsSource = _list; // listen to the property changed event to enable or disable the save button _list.PropertyChanged += list_PropertyChanged; }   void list_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e) { // the save button is enabled if at least one item is checked Save.IsEnabled = _list.SelectionCount > 0; }   private void Button_Click(object sender, RoutedEventArgs e) { // this methods checks or unchecks programmatically an item to view the UI reaction _list[1].IsSelected = !_list[1].IsSelected; }   private void Save_Click(object sender, RoutedEventArgs e) { // get the names of the selected courses IEnumerable<string> selection = _list.GetSelection(elt => elt.Element.Name); // concantenate the strings var text = string.Join(",", selection); MessageBox.Show(text); } } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } The window contains an array of courses called “courses” and a private selection list called “_list”. At the page load event we create the list, and we assign an event to the “PropertyChanged” event. We assign the list as itemssource of the listbox. In MVVM approaches, this could be performed by using bindings or conventions. The event “list_PropertyChanged” enabled or disables the “Save” button according to the number of the checked elements. The event “Button_Click” checks “programmatically an element of the list to see that the view is effectively bound to the “IsSelected” property. Finally, the “Save_Click” gets directly the names of the selected courses by using Linq expressions. Then, it displays them.             Enjoy ! The solution code can be downloaded here

Tutoriel 6.3 : Connexion des contrôles aux bases de données

Tutoriel 6.3.zip (2.83 mb) L’objectif de ce tutoriel (troisième du module 6) est d’utiliser les capacités d’ASP.NET afin de connecter directement des contrôles ASP.NET aux bases de données. Prérequis : Ce tutoriel requiert que la base de données « AdventureWorks » soit installée dans la machine. Cette base peut être téléchargée sur http://sqlserversamples.codeplex.com/ . Etape 1 – Création des sources de données L’objectif de cette étape est de montrer comment créer des sources de données utilisées dans des pages web. Nous nous intéresserons en particulier à EntityDataSource qui se connecte à un contexte EntityFramework. Créer une nouvelle application ASP.NET vide appelée « TestControlesDB » Ajoutez une page appelée « Default.aspx » Ajoutez un nouveau modèle EntityFramework et appelez-le « AdventureWorksModel » Cliquez ensuite sur « Générer à partir d’une base de données » Créez une nouvelle connexion sur « AdventureWorks » ensuite sur « Suivant » Dans l’assistant, cochez les tables « Product » et « ProductCategory » et cochez « Pluraliser et Singulariser les entités générées » Cliquez sur « Terminer » Le modèle est généré comme suit : Compilez le projet en appuyant sur « F6 » Ouvrez la page « Default.aspx » en mode design Faites glisser un composant « EntityDataSource » depuis la barre à outils (onglet données) jusqu’à la page « Default » Dans la propriété « ID » de la source, entrez « categorySource » Sur la page « Default.aspx », cliquez sur la flèche sur « categorySource » puis sur « Configure la source de données » Dans la zone « Connexion Nommées », sélectionnez « AdventureWorksLT2008R2Entities » ou le nom que vous avez choisi pour le contexte Cliquez sur « Suivant » Dans la zone « Nom de l’ensemble », sélectionnez « ProductCategories » Cliquez sur « Terminer » Etape 2 : Création d’une source de données esclave L’objectif de cette étape est de créer une source de données filtrée automatiquement. Le but de cette source de données est de n’afficher que les produits appartenant à une certaine catégorie. La récupération du critère de filtrage (ProductCategoryID) s’effectuera via l’URL en utilisant les chaines de connexion. Ouvrez « Default.aspx » en mode conception Ajoutez un composant « EntityDataSource » à la page et appelez-le « productSource » Cliquez sur la flèche puis « Configurer la source de données » Dans la connexion « Nommée », sélectionnez « AdventureWorksLT2008R2 » ou le nom du contexte que vous avez choisi Cliquez sur « Suivant » Dans la zone « Ensemble d’entités », sélectionnez « Product » Cochez « Activer les suppressions automatiques » et « Activer les modifications automatiques » Cliquez sur « Terminer » Dans la fenêtre de propriétés, cliquez sur la propriété « Where » qui permet le filtrage de la source de données, ensuite dans la propriétés, cliquez sur le bouton en forme de pointillés Dans la zone « Expression du Where », entrez l’expression suivante : it.ProductCategoryID == @categorie Cliquez sur « Ajouter un paramètre » Dans la zone « Nom », entrez « categorie » Dans « Source du paramètres », sélectionnez chaine de requête Cliquez sur « Afficher les options avancées » Dans la propriété « Type », sélectionnez « Int32 » Appuyez sur « OK » Etape 3 : Utilisation du contrôle « ListView » L’objectif de cette étape est d’apprendre à utiliser les templates et de les appliquer au contrôle « ListView ». Le ListView va afficher les enregistrements sous forme de boîtes flottantes avec un maximum de 15 enregistrements par page. Ajoutez une feuille de style appelée « Site.css » Insérez le code suivant dans le fichier CSS : body { font-family: 'Segoe UI' , Tahoma, Geneva, Verdana, sans-serif; padding : 0; margin : 0; }   div.box { background-color: #9595FF; border: thin solid #3333CC; height : 70px; width : 100px; float : left; margin : 2px; padding : 2px;   }   div.clear { clear : both; }   Ouvrez « Default.aspx » en mode design Ajoutez un composant « ListView » à la page Cliquez sur la « flèche » à côté du composant Dans « Choisir la source de données », sélectionnez « categorySource » Ouvrez « Default.aspx » en mode source Entre la balise ouvrante <asp :ListView » et sa balise fermante, insérez la balise « ItemTemplate » Entre les deux balises ItemTemplate, entrez le code suivant : <div class="box"> <strong><% 1: # Eval("Name") %></strong><br /> <a href='Default.aspx?categorie=<%# Eval("ProductCategoryId") %>'>Produits</a> </div> Les balises permettent d’afficher pour chaque enregistrement une « div » dont la classe est « box », une balise « strong » contenant le nom de la catégorie et un lien qui contient une chaîne de requête avec une variable sur le numéro de la catégorie Après la balise fermante « ItemTemplate », ajoutez une balise « LayoutTemplate » Entrez le code suivant : <asp:PlaceHolder runat="server" ID="itemPlaceholder" /> <div class="clear"></div> La balsie <asp :PlaceHolder » va être remplacée par les balises des enregistrements affichés Après la balise fermante « div », faites glisser un « DataPager » à partir de la boîte à outils Entre la balise ouvrante <asp :DataPager » et sa balise fermante, ajoutez la balise « Fields » Ajoutez une balise "asp:NumericPagerField » Cliquez sur la balise « dataPager » Dans la propriété « PageSize », entrez « 15 » Le code sera comme suit : <asp:ListView ID="ListView1" runat="server" DataSourceID="categorySource"> <ItemTemplate> <div class="box"> <strong><% 1: # Eval("Name") %></strong><br /> <a href='Default.aspx?categorie=<%# Eval("ProductCategoryId") %>'>Produits</a> </div> </ItemTemplate> <LayoutTemplate> <asp:PlaceHolder runat="server" ID="itemPlaceholder" /> <div class="clear"></div> <asp:DataPager ID="DataPager1" runat="server" PageSize="15"> <Fields> <asp:NumericPagerField /> </Fields> </asp:DataPager>   </LayoutTemplate> </asp:ListView> Ouvrez « Default.aspx » en mode design Faites glisser « Site.css » sur la page pour appliquer le design Exécutez en appuyant sur « F5 » Etape 4 : Utilisation du contrôle « GridView » L’objectif de cette étape est d’utiliser le composant « GridView »pour afficher les données de manière tabulaire ainsi que de manipuler les différents types de colonnes. Ouvrez « Default.aspx » en mode design Ajoutez un contrôle « GridView » sous le « ListView » Affectez la source « productSource » au « GridView » que vous venez d’ajouter Dans la fenêtre « Propriétés », cliquez sur « Colonnes » puis cliquez sur le bouton en forme de pointillés La fenêtre ci-dessous s’affiche,, cliquez sur « Rafraîchir le schéma » Cliquez sur « BoundField » puis sur le champ « ProductID » ensuite sur « Ajouter » De la même façon, ajoutez le champ « Name » enfant de « BoundField » Sélectionnez « TemplateField » puis cliquez sur « Ajouter » Dans la propriété « HeaderText », entrez « Numéro, Couleur » Sélectionnez « Modifier, Mettre à jour, Annuler », enfant de « CommandField » puis sur « Ajouter » Dans la propriété « HeaderText », entrez « Modifier » Sélectionnez « Supprimer » enfant de « CommandField » puis sur « Ajouter » Entrez « Supprimer » dans la propriété « HeaderText » Ouvrez « Default.aspx » en mode source Insérez le code suivant entre la balise ouvrante <asp :TemplateField » et sa balise fermante <ItemTemplate> <% 1: # Eval("ProductNumber") %>, <% 1: # Eval("Color") %> </ItemTemplate> <EditItemTemplate> Couleur : <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("Color") %>'></asp:TextBox> </EditItemTemplate> Ouvrez « Default.aspx » en mode conception Changez la propriété « AllowPaging » à true Développez la propriété « AlternateRowStyle » Dans BackColor, « 9DBDFF » Appuyez sur « F5 » pour exécuter Le code est joint à cet article.

Tutoriel 6.2 : Connexion à une base de données en utilisant Entity Framework

L’objectif de ce tutoriel (deuxiĂšme du module 6) est d’utiliser EntityFramework pour effectuer des requĂȘtes sur une base de donnĂ©es. En introduisant une annĂ©e et en cliquant sur un bouton, l’utilisateur affichera tous les films dont l’annĂ©e est supĂ©rieure Ă  l’annĂ©e entrĂ©e. L’objectif de cette Ă©tape est de crĂ©er la page permettant la recherche et l’affichage des rĂ©sultats Lancez VS 2012 CrĂ©ez une application ASP.NET vide appelĂ©e « LinqToEntitiesTest » Ajoutez une forme web appelĂ©e « Default.aspx » Glissez un « Label » avec la propriĂ©tĂ© « Text » Ă  « AnnĂ©e » Glissez un « TextBox » Ă  droite du libellĂ© avec la propriĂ©tĂ© « ID » Ă  « txtSearch » Ajoutez un bouton Ă  droite de la zone de texte avec la propriĂ©tĂ© « Text » Ă  « Chercher » et « ID » Ă  « btnSearch » A partir de l’onglet « DonnĂ©es », glissez un « GridView » en dessous des contrĂŽles que vous venez d’ajouter Etape 2 : CrĂ©ation du contexte EntityFramework L’objectif de cette Ă©tape est de crĂ©er l’objet « Contexte » permettant de se connecter Ă  la base de donnĂ©es de films. Dans l’explorateur de solutions, ajoutez un nouvel Ă©lĂ©ment au projet « LinqToEntitiesTest » Dans les catĂ©gories Ă  gauche, choisissez « DonnĂ©es » Dans le modĂšle, choisissez « ModĂšle EntitĂ© ADO.NET » Dans la zone « Nom » entrez « FormationModel » Cliquez sur le bouton « Ajouter » Visual Studio, demande si on doit gĂ©nĂ©rer le modĂšle Ă  partir d’une base de donnĂ©es existante ou gĂ©nĂ©rer un nouveau modĂšle. Cliquez sur « GĂ©nĂ©rer Ă  partir d’une base de donnĂ©es » puis sur « Suivant » VS demande la chaĂźne de connexion Ă  utiliser.   Si la chaĂźne n’existe pas, cliquez sur « Nouvelle Connexion ». Dans la zone serveur entrez « . » ou « .\SQLExpress » selon la version de SQL server installĂ©e Dans la zone « base de donnĂ©es » sĂ©lectionnez la base de donnĂ©es « Formation » Cliquez sur « Tester la connexion » pour valider Cliquez sur « OK » Cliquez sur « Suivant » Dans le nƓud « Tables », cochez la table « Formation » Cochez « pluraliser ou singulariser les entitĂ©s gĂ©nĂ©rĂ©es » Cliquez sur « Terminer » VS 2012 gĂ©nĂšre automatiquement le modĂšle et l’ouvre en mode conception Remarquez que le modĂšle contient une seule entitĂ© « Film » Etape 3 : ExĂ©cution de la requĂȘte en utilisant le contexte L’objectif de cette Ă©tape est d’utiliser le contexte gĂ©nĂ©rĂ© par Visual Studio dans la page web afin de chercher les films dont l’annĂ©e est supĂ©rieure Ă  l’annĂ©e fournie. Ouvrez la page « Default.aspx » en mode conception Double-cliquez sur le bouton afin de gĂ©nĂ©rer l’évĂšnement de clic Dans l’évĂšnement gĂ©nĂ©rĂ©, insĂ©rez le code suivant: int numero = int.Parse(txtSearch.Text); using (FormationEntities context = new FormationEntities()) { var requete = from entite in context.Films where entite.Annee > numero select entite; GridView1.DataSource = requete.ToList(); GridView1.DataBind();   } Appuyez sur « F5 » pour exĂ©cuter Examinez la requĂȘte « Linq » et sa syntaxte var requete = from entite in context.Films where entite.Annee > numero select entite; Linq utilise une syntaxe proche du SQL pour permettre aux dĂ©veloppeurs d’exĂ©cuter des requĂȘtes sur des contextes qui sont traduites par EntityFramework en requĂȘtes SQL Pour tĂ©lĂ©charger le code, cliquez ici

Tutoriel 5.1–Validation

L’objectif de ce tutoriel (module 5) est d’utiliser les contrĂŽles de validation afin de valider l’inscription d’un dĂ©veloppeur Ă  un site. Les informations suivantes doivent ĂȘtre validĂ©es : le nom et le prĂ©nom sont obligatoires. L’Age doit ĂȘtre numĂ©rique et compris entre 18 et 50. Les mails et tĂ©lĂ©phones doivent respecter le format nĂ©cessaire et le langage de programmation doit ĂȘtre soit C# soit C++. Etape 1 – Ajouter les contrĂŽles de validation au formulaire Le but du tutoriel est de permettre Ă  des dĂ©veloppeurs de s’inscrire. Le dĂ©veloppeur doit fournir les informations suivantes : Nom (obligatoire), PrĂ©nom (obligatoire), Age (entre 18 et 50), Langage (C# ou C++), Son mail et son numĂ©ro de tĂ©lĂ©phone portable. Lancez VS 2012 Choisir Fichier -> Nouveau -> Application ASP.NET vide Entrez « TestValidation » dans la zone « Nom » Cliquez sur OK Cliquez sur le bouton droit sur le projet « TestValidation » Ajoutez une nouvelle forme appelĂ©e « Default.aspx » Ouvrez « Default.aspx » en mode conception Faites glisser un label dans la page et affectez « Nom : » Ă  la propriĂ©tĂ© « Text » de ce libellĂ© A cĂŽtĂ© du libellĂ©, glissez une zone de texte et affectez « txtNom » Ă  la propriĂ©tĂ© « ID » Faites glisser un « RequiredFieldValidator » Ă  cĂŽtĂ© de « txtNom » avec les propriĂ©tĂ©s suivantes : (ErrorMessage = « Veuillez entrer votre nom », ControlToValidate= « txtNom » et CssClass= « validationError », Display= « Dynamic ») InsĂ©rez un saut de ligne en appuyant sur « EntrĂ©e » ou (<br/>) en mode source Faites glisser un label dans la nouvelle ligne et affectez « PrĂ©nom : » Ă  la propriĂ©tĂ© « Text » de ce libellĂ© A cĂŽtĂ© du libellĂ©, glissez une zone de texte et affectez " txtPrenom " Ă  la propriĂ©tĂ© " ID " Faites glisser un « RequiredFieldValidator » Ă  cĂŽtĂ© de « txtPrenom » avec les propriĂ©tĂ©s suivantes : (ErrorMessage = « Veuillez entrer votre prĂ©nom », ControlToValidate= « txtPrenom » et CssClass= « validationError », Display= « Dynamic ») InsĂ©rez un saut de ligne en appuyant sur « EntrĂ©e » ou (<br/>) en mode source Faites glisser un label dans la nouvelle ligne et affectez « Age : » Ă  la propriĂ©tĂ© « Text » de ce libellĂ© A cĂŽtĂ© du libellĂ©, glissez une zone de texte et affectez « txtAge » Ă  la propriĂ©tĂ© « ID » Faites glisser un « RequiredFieldValidator » Ă  cĂŽtĂ© de « txtAge » avec les propriĂ©tĂ©s suivantes : (ErrorMessage = « Veuillez entrer votre age », ControlToValidate= « txtAge » et CssClass= « validationError », Display= « Dynamic ») Faites glisser un « CompareValidator » Ă  cĂŽtĂ© de « RequiredFieldValidator » que vous venez d’ajouter avec les propriĂ©tĂ©s suivantes : (ErrorMessage = « L’ñge doit ĂȘtre une valeur numĂ©rique», ControlToValidate= « txtAge » et CssClass= « validationError », Display= « Dynamic ») Affectez « DataTypeCheck » Ă  la propriĂ©tĂ© « Operator » du CompareValidator que vous venez d’ajouter Affectez « Integer » Ă  la propriĂ©tĂ© « Type » du CompareValidator que vous venez d’ajouter Faites glisser un « RangeValidayor » Ă  cĂŽtĂ© de « CompareValidator » avec les propriĂ©tĂ©s suivantes : (ErrorMessage = « L’age doit ĂȘtre inclus entre 18 et 50 », ControlToValidate= « txtAge » et CssClass= « validationError », Display= « Dynamic ») Affectez « 18 » et « 50 » respectivement aux propriĂ©tĂ©s « Minimum » et « Maximum » du RangeValidator que vous venez d’ajouter Affectez « Integer » Ă  la propriĂ©tĂ© « Type » du « RangeValidator » que vous venez d’ajouter InsĂ©rez un saut de ligne en appuyant sur « EntrĂ©e » ou (<br/>) en mode source Faites glisser un label dans la nouvelle ligne et affectez « Langage : » Ă  la propriĂ©tĂ© « Text » de ce libellĂ© A cĂŽtĂ© du libellĂ©, glissez une zone de texte et affectez « txtLanguage » Ă  la propriĂ©tĂ© « ID » Faites glisser un « CustomValidator » Ă  cĂŽtĂ© de « txtLanguage » avec les propriĂ©tĂ©s suivantes : (ErrorMessage = « Veuillez entrer un langage correct », ControlToValidate= « txtLanguage » et CssClass= « validationError », Display= « Dynamic ») Double-cliquez sur le « CustomValidator », VS gĂ©nĂšre l’évĂšnement de validation et gĂ©nĂšre automatiquement l’évĂšnement ServerValidate Modifiez le code de l’évĂšnement comme suit : protected void CustomValidator1_ServerValidate1(object source, ServerValidateEventArgs args) { args.IsValid = (args.Value == "C#") || (args.Value == "C++"); } Ouvrez la page « Default.aspx » en mode source Dans la section d’entĂȘte (avant la balise body), insĂ©rez le code JavaScript suivant : <script type="text/javascript"> function ClientValidationHandler(source, args) { args.IsValid = (args.Value == "C#") || (args.Value == "C++"); } </script> Ouvrez « Default.aspx » en mode conception Cliquez sur le « CustomValidator » que vous venez d’ajouter Dans la propriĂ©tĂ© « ClientValidationFunction » entrez « ClientValidationHandler » InsĂ©rez un saut de ligne en appuyant sur « EntrĂ©e » ou (<br/>) en mode source Faites glisser un label dans la nouvelle ligne et affectez « Mail : » Ă  la propriĂ©tĂ© « Text » de ce libellĂ© A cĂŽtĂ© du libellĂ©, glissez une zone de texte et affectez « txtMail » Ă  la propriĂ©tĂ© « ID » 7. Faites glisser un « RequiredFieldValidator » Ă  cĂŽtĂ© de « txtMail » avec les propriĂ©tĂ©s suivantes : (ErrorMessage = « Veuillez entrer votre mail », ControlToValidate= « txtMail » et CssClass= « validationError », Display= « Dynamic ») Faites glisser un « RegularExpressionValidator » Ă  cĂŽtĂ© du dernier « RequiredValidator » avec les propriĂ©tĂ©s suivantes : (ErrorMessage = « Veuillez entrer un mail correct », ControlToValidate= « txtMail » et CssClass= « validationError », Display= « Dynamic ») Dans la fenĂȘtre de propriĂ©tĂ©s, Cliquez sur la propriĂ©tĂ© « ValidationExpression », remarquez le bouton avec les pointillĂ©s Cliquez sur le bouton avec pointillĂ©s, la fenĂȘtre suivante apparaĂźt : SĂ©lectionnez « Adresse Mail » Cliquez sur « OK » InsĂ©rez un saut de ligne en appuyant sur « EntrĂ©e » ou (<br/>) en mode source Faites glisser un label dans la nouvelle ligne et affectez « N° Mobile : » Ă  la propriĂ©tĂ© « Text » de ce libellĂ© A cĂŽtĂ© du libellĂ©, glissez une zone de texte et affectez « txtMobile » Ă  la propriĂ©tĂ© « ID » Faites glisser un " RegularExpressionValidator " Ă  cĂŽtĂ© du dernier " RequiredValidator " avec les propriĂ©tĂ©s suivantes : (ErrorMessage = " Veuillez entrer un numĂ©ro correct ", ControlToValidate= " txtMobile " et CssClass= " validationError ", Display= " Dynamic ") Au dĂ©but de la page, ajoutez un contrĂŽle de type « ValidationSummary » Entrez « validationSummary » dans la propriĂ©tĂ© « CssClass » du « ValidationSummary » Ajoutez un saut de ligne et un bouton Ă  la fin de la page Le code de la page devrait ĂȘtre Ă©quivalent Ă  celui-ci :   <asp:ValidationSummary ID="ValidationSummary1" runat="server" CssClass="validationSummary" /> <br />       <asp:Label ID="Label1" runat="server" Text="Nom : "></asp:Label>   <asp:TextBox ID="txtNom" runat="server"></asp:TextBox> <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtNom" Display="Dynamic" ErrorMessage="Veuillez entre le nom" CssClass="validationError"></asp:RequiredFieldValidator> <br /> <asp:Label ID="Label2" runat="server" Text="PrĂ©nom : "></asp:Label> <asp:TextBox ID="txtPrenom" runat="server"></asp:TextBox> <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txtPrenom" Display="Dynamic" ErrorMessage="Veuillez entrer le prĂ©nom" CssClass="validationError"></asp:RequiredFieldValidator> <br /> <asp:Label ID="Label3" runat="server" Text="Age : "></asp:Label> <asp:TextBox ID="txtAge" runat="server"></asp:TextBox> <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="txtAge" Display="Dynamic" ErrorMessage="Veuillez donner votre age" CssClass="validationError"></asp:RequiredFieldValidator> <asp:CompareValidator ID="CompareValidator1" runat="server" ControlToValidate="txtAge" Display="Dynamic" ErrorMessage="L'age doit ĂȘtre une valeur numĂ©rique" Operator="DataTypeCheck" Type="Integer" CssClass="validationError"></asp:CompareValidator> <asp:RangeValidator ID="RangeValidator1" runat="server" ControlToValidate="txtAge" ErrorMessage="L'age doit ĂȘtre 18 et 50" MaximumValue="50" MinimumValue="18" Type="Integer" CssClass="validationError"></asp:RangeValidator> <br /> <asp:Label ID="Label4" runat="server" Text="Langage : "></asp:Label> <asp:TextBox ID="txtLanguage" runat="server"></asp:TextBox>   <asp:CustomValidator ID="CustomValidator1" runat="server" ErrorMessage="CustomValidator" OnServerValidate="CustomValidator1_ServerValidate1" ClientValidationFunction="ClientValidationHandler" ControlToValidate="txtLanguage" CssClass="validationError">Veuillez entrer un langage correct</asp:CustomValidator>   <br /> <asp:Label ID="Label5" runat="server" Text="Mail : "></asp:Label> <asp:TextBox ID="txtMail" runat="server"></asp:TextBox> <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="txtMail" CssClass="validationError" Display="Dynamic" ErrorMessage="RequiredFieldValidator">Veuillez entrer le mail</asp:RequiredFieldValidator> <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="txtMail" CssClass="validationError" Display="Dynamic" ErrorMessage="RegularExpressionValidator" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">Veuillez entrer un mail valide</asp:RegularExpressionValidator> <br /> <asp:Label ID="Label6" runat="server" Text="N° Mobile : "></asp:Label> <asp:TextBox ID="txtMobile" runat="server"></asp:TextBox> <asp:RegularExpressionValidator ID="RegularExpressionValidator2" runat="server" ControlToValidate="txtMobile" CssClass="validationError" ErrorMessage="Veuillez entrer un numĂ©ro correct" ValidationExpression="^0(5|6|7)(\d{8})$"></asp:RegularExpressionValidator>   <br />   <asp:Button ID="Button1" runat="server" Text="Button" /> Etape 2 : Installer les paquets nĂ©cessaires Ă  la validation cĂŽtĂ© client avec JQuery L’objectif de cette Ă©tape est d’installer les paquets « JQuery » et « AspNet.ScriptManager.JQuery » qui sont nĂ©cessaire Ă  mettre en place la validation cĂŽtĂ© client. Dans le menu cliquez sur « Outils –> Gestionnaire de Paquets –> Console du Gestionnaire de Paquets » La fenĂȘtre ci-dessous s’affiche : Dans la console, entrez « Install-Package JQuery » Une fois le paquet JQuery installĂ©, entrez « Install-Package AspNet.ScriptManager.JQuery » Les paquets installĂ©s permettent de gĂ©rer la validation cĂŽtĂ© client avec JQuery Etape 3 : Ajouter du style aux composants de la validation L’objectif de cette Ă©tape est d’ajouter les rĂšgles CSS nĂ©cessaires Ă  afficher les informations de validation en rouge et avec une taille de texte lĂ©gĂšrement plus petite. Dans le projet, crĂ©er une feuille de style appelĂ©e « Site.css » Changez le code du CSS comme suit : body { font-family: 'Segoe UI' , Tahoma, Geneva, Verdana, sans-serif; }   input { margin : 2px; }   .validationError { font-size: 0.8em; color: red; }   .validationSummary { margin : 5px; padding : 5px; background-color : red; color : white; }   .validationSummary ul { list-style : none; }   Appliquez le style « Site.css » Ă  la forme « Default.aspx » ExĂ©cutez l’application en appuyant sur « F5 » Pour tĂ©lĂ©charger le code cliquez ici

Tutoriel 2.1 : Création d’une application ASP.NET à partir d’un modèle

Ceci est le premier des deux tutoriaux du module 2. Son objectif est de créer une application ASP.NET à partir du modèle fourni par Visual Studio 2012. Etape 1 – Créer une application ASP.NET L’objectif de cette étape est de créer une application ASP.NET à partir du modèle fourni avec Visual Studio. Lancez VS 2012 Choisir Fichier -> Nouveau -> Application ASP.NET Entrez « PremiereApp » dans la zone « Nom » Cliquez sur OK Examinez le contenu du projet Etape 2 : Exécution L’objectif de cette étape est de découvrir le comportement de l’application en exécution sur le navigateur. Exécutez l’application en appuyant sur « F5 »  Etape 3 : Découverte des Contrôles ASP.NET L’objectif de cette étape est de découvrir les contrôles ASP.NET dans la boîte à outils de Visual Studio. Fermez la fenêtre du navigateur Ouvrez le fichier « Default.aspx » en mode conception Examinez les différents contrôles dans la boîte à outils Etape 4 : Utilisation d’un contrôle serveur L’objectif de cette étape est d’ajouter un contrôle ASP.NET à une page existante, d’affecter des propriétés et de coder un évènement. Ouvrez la page « Contact.aspx » en mode conception Pointez le curseur à la fin puis appuyez sur « entrée » Remarquez la création d’un nouveau paragraphe « <p> » Par un glisser-déposer, insérez un composant « Libellé » dans le nouveau paragraphe Entrez votre nom dans la propriété « Text » Ajoutez un bouton après le libellé Entrez le texte « Changer » dans la propriété « Text » du bouton Double-cliquez le bouton Entrez le code suivant dans l’évènement généré ensuite exécutez l’application protected void Button1_Click(object sender, EventArgs e) { Label1.Text = DateTime.Now.ToString(); } Etape 5 : Examination des répertoires du projet L’objectif de cette étape est d’examiner la structure des répertoires d’un projet ASP.NET. Dans l’explorateur de solutions cliquez sur le bouton droit sur le projet Sélectionnez « Ouvrir dans l’explorateur de fichiers » Examinez l’arborescence des répertoires dans l’explorateur Windows Pour télécharger le code :  Tutoriel 2.1.zip (1,97 mb)