Mostefai Mohammed Amine's Blog

Say That I Was Here !

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)