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 😉

Tutoriel 9.1–Création d’une application ASP.NET sécurisée

L’objectif de ce tutoriel (appliquant le module 9) est d’apprendre Ă  utiliser les fournisseurs SQL fournis par ASP.NET pour la mise en place d’une application sĂ©curisĂ©e. Etape 1 : CrĂ©ation de la base de donnĂ©es L’objectif de cette Ă©tape est de crĂ©er la base de donnĂ©es ASPNETDB permettant de rĂ©utiliser une base de donnĂ©es dans les tĂąches quotidiennes d’administration sans avoir Ă  rĂ©Ă©crire les fournisseurs. Lancez l’explorateur de Windows Allez jusqu’au dossier d’installation du .NET Framework qui est dans le dossier d’installation de Windows Localisez la derniĂšre version du .NET Framework Ouvrez le rĂ©pertoire de la derniĂšre version Localisez le programme « aspnet_regsql » et lancez-le, un assistant apparaĂźt Cliquez sur « Suivant » Cochez « Configurer SQL Server pour les services d’application »     Cliquez sur « suivant » Entrez le nom du serveur SQL dans lequel sera installĂ©e la base Dans « Base de donnĂ©es », laissez « par dĂ©faut » ss Cliquez sur « Suivant » deux fois L’assistant devrait s’exĂ©cuter sans problĂšmes Ouvrez SQL Server Management Studio Remarquez la prĂ©sence d’une nouvelle base de donnĂ©es appelĂ©e « aspnetdb » Etape 2 : PrĂ©paration de l’Application Le but de cette Ă©tape est de prĂ©parer le cadre de l’application. L’application sera composĂ©e de quatre pages : accueil, login et deux autres pages localisĂ©es dans deux rĂ©pertoires : « Secure » et « Admin » oĂč « Admin » est un sous-rĂ©pertoire de « Admin ». Les rĂšgles sont les suivantes : tous les utilisateurs connectĂ©s accĂšderont au contenu du rĂ©pertoire « Secure » tandis que le rĂ©pertoire « Admin » ne pourra ĂȘtre accĂ©dĂ© que par les utilisateurs appartenant au rĂŽle « Admin ». Le site sera structurĂ© comme suit : un menu en haut contenant les liens des diffĂ©rents sites et un pied en bas contenant le nom de l’utilisateur en cours et un lien pour se connecter / dĂ©connecter. Ouvrez VS 2012 CrĂ©ez une nouvelle applications ASP.NET vide appelĂ©e « TestComptes » Dans le projet, crĂ©ez un rĂ©pertoire appelĂ© « Secure » Dans le rĂ©pertoire «Secure », crĂ©ez un sous-rĂ©pertoire appelĂ© « Admin » Ajoutez une page maĂźtre et nommez-la « Main.master » Ouvrez « Main.master » en mode source Dans l’attribut classe de la div, entrez « content » Ajoutez une balise « header » avant la « div » Ajoutez une balise « footer » dans la div Ajoutez une balise « ul » dans « header » et une autre balise « ul » dans footer Ajoutez trois Ă©lĂ©ments « li » dans la premiĂšre « ul » et deux balises « li » dans la deuxiĂšme « ul » Ouvrez « Main.master » en mode design Glissez un composant « HyperLink » dans chacun des Ă©lĂ©ments de la liste Dans la deuxiĂšme liste « ul », glissez un composant « LoginName » dans la premiĂšre « li » Dans la deuxiĂšme liste « ul », glissez un composant « LoginStatus » dans la deuxiĂšme « li » Dans le rĂ©pertoire racine CrĂ©ez une forme web avec page maĂźtre « Main » appelĂ©e « Default.aspx » Dans le rĂ©pertoire racine, crĂ©ez une forme web avec page maĂźtre « Main » appelĂ©e « Login.aspx » Dans le rĂ©pertoire « Secure », ajoutez une forme web avec page maĂźtre « Main » appelĂ©e « Page1.aspx » Dans le rĂ©pertoire « Admin », ajoutez une forme web avec page maĂźtre « Main » appelĂ©e page2 Tapez le texte « Accueil », « Page1 » et « Page2 » dans les pages « Default.aspx », « Page1.aspx » et « Page2.aspx » respectivement Ouvrez « Main.master » en mode design Pointez les trois liens sur les pages « default.aspx », « page1.aspx » et « page2.aspx » respectivement. Le code de « Main.master » devra ĂȘtre comme suit : <form id="form1" runat="server"> <header> <ul> <li> <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/Default.aspx">Accueil</asp:HyperLink> </li> <li> <asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="~/Secure/Page1.aspx">Page 1</asp:HyperLink> </li> <li> <asp:HyperLink ID="HyperLink3" runat="server" NavigateUrl="~/Secure/Admin/Page2.aspx">Page2</asp:HyperLink> </li> </ul> </header> <div class="content"> <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </div> <footer> <ul> <li> <asp:LoginName ID="LoginName1" runat="server" /> </li> <li> <asp:LoginStatus ID="LoginStatus1" runat="server" /> </li> </ul> </footer> </form> .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; } Ouvrez la page « Login.aspx » en mode design Glissez un composant « Login » sur la page Ajoutez une feuille de style appelĂ©e « Site.css » Collez dedans le code CSS suivant : body, form { font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; margin: 0; padding: 0; } header { border-width: 7px; border-color: #F3C972; background-color: #6CB6FF; border-bottom-style: solid; margin: 0; padding: 1em 1em 0em 1em; } header ul, footer ul { margin: 0; padding: 0; list-style: none; } header ul li, footer ul li { display: inline-block; margin-right: 1em; padding: 0.5em; } header ul li:hover { background-color: #F3C972; } header a { color: black; text-decoration: none; } div.content { min-height: 400px; } .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; } Ouvrez « Main.master » en mode design Glissez « Site.css » sur la page pour appliquer le style Ouvrez la console de gestion des paquets « Nuget » En utilisant l’instruction « Install-Package », installez les paquets « JQuery » puis « AspNet.ScriptManager.JQuery » ExĂ©cutez en appuyant sur « F5 » pour voir la structure du site Etape 3 : Configuration Le but de cette Ă©tape est de configurer l’application de façon Ă  ce qu’elle se base sur la base « aspnetdb » pour l’authentification et l’autorisation Ouvrez le fichier web.config Dans la section « configuration », ajoutez une chaĂźne de connexion pointant sur la base de donnĂ©es « aspnetdb », celle qui est en dessous est un exemple <connectionStrings> <add name="comptesDB" connectionString="Data Source=.;Initial Catalog=aspnetdb;Integrated Security=SSPI;" /> </connectionStrings> .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; } On va configurer l’application de façon Ă  ce qu’elle prenne le mĂ©canisme « Forms » pour l’authentification. DĂšs que l’application demande Ă  l’utilisateur de s’authentifier, elle le redirige vers la page « Login.aspx » Dans la section « system.web », ajoutez une section « authentifcation » comme suit : <authentication mode="Forms" > <forms loginUrl="~/Login.aspx"> </forms> </authentication> .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; } On va configurer l’application de façon Ă  ce qu’elle utilise le fournisseur SQL pour identifier et valider les utilisateurs. Dans la section « system.web », ajoutez une section « membership » comme suit : <membership defaultProvider="SqlProvider" userIsOnlineTimeWindow="15"> <providers> <clear /> <add name="SqlProvider" type="System.Web.Security.SqlMembershipProvider" connectionStringName="comptesDB" applicationName="TestComptes" enablePasswordRetrieval="false" enablePasswordReset="true" requiresQuestionAndAnswer="true" requiresUniqueEmail="true" passwordFormat="Hashed" /> </providers> </membership> .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; } On va maintenant, configurer l’application de façon Ă  ce qu’elle en prenne en charge les rĂŽles Dans la section « system.web », ajoutez une section « roleManager » comme suit : <roleManager enabled="true" defaultProvider="roleProvider" > <providers> <clear/> <add name="roleProvider" type="System.Web.Security.SqlRoleProvider" connectionStringName="comptesDB" applicationName="TestComptes" /> </providers> </roleManager> .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; }   Etape 4 : CrĂ©ation des utilisateurs et des rĂŽles Le but de cette Ă©tape est d’utiliser l’outil de configuration ASP.NET pour crĂ©er les utilisateurs et les rĂŽles. Nous crĂ©erons deux utilisateurs « simple » et « admin ». Les deux appartiennent au rĂŽle « simple » tandis que le rĂŽle « admin » n’inclut que l’utilisateur « admin ». Dans le menu « projet », cliquez sur « Configuration ASP.NET » L’application suivante apparaĂźt Cliquez sur « SĂ©curitĂ© » Cliquez sur « CrĂ©er un utilisateur » Ajoutez l’utilisateur « simple », mot de passe : « simple$$ », confirmation : « simple$$ », adresse : « simple@hotmail.com », question : « question » et rĂ©ponse : « rĂ©ponse ». Ajoutez un autre utilisateur « admin », mot de passe : « admin$$ », confirmation : « admin$$ », adresse : « admin@hotmail.com », question : « question », rĂ©ponse : « rĂ©ponse » Cliquez sur l’onglet « SĂ©curit » Cliquez sur « Ajouter ou gĂ©rer les rĂŽles » Ajoutez un rĂŽle « simple » puis le rĂŽle « admin » A droite du rĂŽle « admin », cliquez sur le lien « gĂ©rer » Cliquez sur le lien « tous » Cochez sur l’utilisateur « admin » Cliquez sur le lien « PrĂ©cĂ©dent » A droit du rĂŽle « simple », cliquez sur « GĂ©rer » Ajoutez les deux utilisateurs au rĂŽle « simple » Etape 5 : SĂ©curisation des zones En utilisant les rĂŽles crĂ©Ă©s prĂ©cĂ©demment, nous ne permettrons l’accĂšs la zone « Secure » qu’au rĂŽle « simple » ou « admin » et la zone « admin » uniquement au rĂŽle « admin ». Revenez dans VS Ajoutez un fichier de configuration dans le rĂ©pertoire « Secure » Dans la section « system.web », ajoutez la section « authorization » comme suit : <authorization> <allow roles="simple,admin"/> <deny users="*" /> </authorization> .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; } La premiĂšre instruction « allow » indique que la zone peut ĂȘtre accĂ©dĂ©e par les rĂŽles « simple » et « admin » La deuxiĂšme section « deny » indique que l’accĂšs est refusĂ© Ă  tout autre utilisateur n’appartenant pas Ă  ces deux rĂŽles Dans le rĂ©pertoire « Admin », ajoutez un fichier de configuration Ajoutez la section « authorization » comme suit : <authorization> <allow roles="admin"/> <deny users="*" /> </authorization> .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; } ExĂ©cutez en appuyant sur « F5 » Cliquez sur le lien « Page1 » Authentifiez-vous avec (admin,admin$$) Remarquez que vous avez accĂšs Ă  toutes les pages DĂ©connectez-vous Authentifiez-vous avec (simple,simple$$) Remarquez que ce login, n’a accĂšs qu’à la page 1 Pour tĂ©lĂ©charger le code, cliquez ici

ASP.NET GridView Multi Select Using CheckBoxes and JQuery

Hi, In this tutorial, I will show you how to implement a multiselect grid view using checkboxes and JQuery. The GridView is a fantastic component but lacks a very useful feature that allows the multiple row selection. Using JQuery, we’ll put a workaround to extend the grid. First, let’s create an empty ASP.NET Web Application Project and install the JQuery package using the package manager console. Then, let’s create a new webform called “Default.aspx”. Let’s create a business class called “Check” and that represents a bank check : public class Check {   public DateTime IssueDate { get; set; }  public string CheckNumber { 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; } Now, let’s add a minimalistic repository class : public class CheckRepository { public IEnumerable<Check> GetList() { var list = new List<Check>(); for (int i = 0; i < 20; i++) { var cheque = new Check() { CheckNumber = string.Format("{0:00000000}", i + 1), IssueDate = DateTime.Now }; list.Add(cheque); } return list; } } .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; } In the default.aspx form, let’s add an object data source component and bind it to the “CheckRepository” class with the “GetList” method. Let’s add a GridView bound to the object data source having two bound columns : “CheckNumber” and obviously “IssueDate”. Our work starts here, we need an additional column that contains the selection checkbox. For this, let’s exploit the magic of template fields. The three gridview columns will look like this : <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="ObjectDataSource1"> <Columns> <asp:TemplateField> <HeaderTemplate> <input type="checkbox" id="cbSelectAll" /> </HeaderTemplate> <ItemTemplate> <input type="checkbox" name="ChequeSelected" class="cbSelectRow" value="<%# Eval("CheckNumber") %>" ></input> </ItemTemplate> </asp:TemplateField> <asp:BoundField DataField="CheckNumber" HeaderText="Number" SortExpression="NumeroCheque" /> <asp:BoundField DataField="IssueDate" HeaderText="Issue Date" SortExpression="DateEmission" /> </Columns> </asp:GridView> .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 checkbox that will select all rows is called “cbSelectAll” and the select row check box will have the css class “cbSelectRow”. The first thing to notice is that for the row checkbox, I have used the “value” attribute that will save the check id in the row checkbox. The idea is very simple, whenever a postback is triggered,, all the checkbox content will be sent with the form content. We’ll use the checkbox value to know which check have been selected by the user. Precisely, to trigger the postback, let’s add a simple asp.net button to the web form. I’ll add a very simple effect : the selected rows will be colored in green. To accomplish this, let’s create the lightGreen css class : <style type="text/css"> .lightGreen { background-color: lightgreen; } </style> .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; } A little jquery right now: a simple script to transform the containing row of the checked checkbox in green and another one the the “select all checkbox” that will allow to check (or uncheck) the checkboxes : $(function () { $('.cbSelectRow').change(function () { // detect if the checkbox is checked var checked = $(this).prop('checked'); // gets the table row indiect parent var trParent = $(this).parents('tr'); // add or remove the css class according to the check state if (checked == true) trParent.addClass('lightGreen') else trParent.removeClass('lightGreen'); }); // select all click $("#cbSelectAll").change(function () { var checked = $(this).prop('checked'); $('.cbSelectRow').prop('checked', checked).trigger('change'); });  }); .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 last thing to do is to intercept the postback in the web form and to display the selected checks by browsing the form data, quite simple, let’s modify the “Page_Load” method like this : if (IsPostBack) { // create a string builder to create the displayed string var builder = new StringBuilder(); builder.Append("Vous have selected the following checks :<br/>"); // get the selected checkboxes from the form data var checkString = Request.Form["ChequeSelected"]; if(checkString == null) return; // we'll need a split to get the individual ids var values = checkString.Split(','); foreach(var value in values) { builder.Append("<br/>"); builder.Append(value);  } Response.Write(builder.ToString()); } .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; } Let’s test and you’ll see it, it works ! The “Reponse”  line displays all the selected checks. But we still have an issue, when a postback is performed, we lose the selected checkboxes in the grid because it have been redrawn and plain HTML string do not support view state. To get through this problem, the solution is simple too. We’ll save the checked ids in a list called “checkedIds” : /// <summary> /// this lists stores the ids that have been selected /// </summary> private List<string> checkedIds = new List<string>(); .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; } Let’s change the “Page_Load” method to fill the list : protected void Page_Load(object sender, EventArgs e) { if (IsPostBack) { // create a string builder to create the displayed string var builder = new StringBuilder(); builder.Append("Vous have selected the following checks :<br/>"); // get the selected checkboxes from the form data var checkString = Request.Form["ChequeSelected"]; if(checkString == null) return; // we'll need a split to get the individual ids var values = checkString.Split(','); foreach(var value in values) { builder.Append("<br/>"); builder.Append(value); checkedIds.Add(value); } Response.Write(builder.ToString()); GridView1.DataBind(); } } .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 last line forces the gridview to “redraw”. This manipulation is still not sufficient to restore the display, we have to change the checkbox in order to reflect (or not) a previous selection : <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="ObjectDataSource1"> <Columns> <asp:TemplateField> <HeaderTemplate> <input type="checkbox" id="cbSelectAll" /> </HeaderTemplate> <ItemTemplate>  <input type="checkbox" name="ChequeSelected" class="cbSelectRow" value="<%# Eval("CheckNumber") %>" <%# NumeroChequeInclus(Eval("CheckNumber").ToString()) %>></input> </ItemTemplate> </asp:TemplateField> <asp:BoundField DataField="CheckNumber" HeaderText="Number" SortExpression="NumeroCheque" /> <asp:BoundField DataField="IssueDate" HeaderText="Issue Date" SortExpression="DateEmission" /> </Columns>  </asp:GridView> .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; } Notice that the checkbox will render something that the method “CheckNumber” returns by passing the current check number as argument. The method “CheckNumber” have to generate “"the “checked” attribute if the passed id is contained in the “checkedIds” list or an empty string otherwise. /// <summary> /// renders or not the checked attribute /// </summary> /// <param name="numero"></param> /// <returns></returns> public string NumeroChequeInclus(string numero) { if (checkedIds.Contains(numero)) return "checked"; return string.Empty; } .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 last thing to do is to modify the jquery script to restore the green background after a postback, the full script would be like this : $(function () { $('.cbSelectRow').change(function () { // detect if the checkbox is checked var checked = $(this).prop('checked'); // gets the table row indiect parent var trParent = $(this).parents('tr'); // add or remove the css class according to the check state if (checked == true) trParent.addClass('lightGreen') else trParent.removeClass('lightGreen'); }) // the each is used when postback is triggered with checked rows .each(function (index, element) { var checked = $(element).prop('checked'); if (checked == true) $(element).parents('tr').addClass('lightGreen'); }); // select all click $("#cbSelectAll").change(function () { var checked = $(this).prop('checked'); $('.cbSelectRow').prop('checked', checked).trigger('change'); });  }); .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; }   A working version of the app would look like this : The full source code is available here Enjoy !

Tutoriel 8.3 : Gestion de l’état

L’objectif de ce tutoriel (module 8) est d’apprendre Ă  utiliser trois mĂ©canismes de gestion de l’état : le cache, les cookies et l’état d’application. Etape 1 : CrĂ©ation d’un compteur de visiteurs en utilisant l’état de l’application L’objectif de cette Ă©tape est d’utiliser l’état de l’application pour implĂ©menter un compteur de visiteurs. L’objectif est aussi de faire la diffĂ©rence entre l’état d’une application et l’état d’une session. Ouvrez VS2012 CrĂ©ez une application ASP.NET vide appelĂ©e « TestEtat » Ajoutez une forme web appelĂ©e « Default.aspx » Glissez deux composants de type « Literal » dans la page et sĂ©parez-les par une balise « <br/> » Ajoutez une classe globale d’application appelĂ©e « Global.asax » Dans l’évĂšnement de dĂ©marrage « Application_Start », ajoutez le code suivant : 1: Application["visiteurs"] = 0; .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; } Dans le code de dĂ©marrage d’une session « Session_Start », ajoutez le code suivant : 1: int visiteurs = (int)Application["visiteurs"]; 2: ++visiteurs; 3: Application["visiteurs"] = visiteurs; 4: Session["code"] = new Random().Next(); Ouvrez la page « Default.aspx » en mode code behind Ajoutez le code suivant dans l’évĂšnement « Page_Load » : int visiteurs = (int)Application["visiteurs"]; ++visiteurs; Application["visiteurs"] = visiteurs; Session["code"] = new Random().Next(); .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; } ExĂ©cutez en appuyant sur « F5 » Remarquez le code de la session et le nombre de visiteurs Ouvrez l’application dans un autre navigateur Remarquez le code de la session et le nombre de visiteurs Revenez sur le navigateur oĂč s’est exĂ©cutĂ©e l’application en premier RafraĂźchissez la page en appuyant sur « F5 » Remarquez que le nombre de visiteurs a changĂ© et que le code de la session est restĂ© le mĂȘme   Etape 2 : Utilisation du cache L’objectif de cette Ă©tape est d’utiliser le cache avec expiration pour cacher une date. Une page simple rĂ©cupĂšre la date d’aujourd’hui qui est cachĂ©e pendant 30 secondes. On remarquera que grĂące au cache, la date ne change que chaque 30 secondes. Ajoutez une forme web appelĂ©e « CachePage.aspx » Glissez un composant « Literal » sur la page Ouvrez la page en mode code behind Dans l’évĂšnement « Page_Load » de la page, ajoutez ceci : 1: Literal1.Text = GetDate().ToString(); .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; } Dans la classe « CachePage », ajoutez la mĂ©thode suivante : 1: DateTime GetDate() 2: { 3: if (Cache["maintenant"] == null) 4: { 5: Cache.Add("maintenant", DateTime.Now, null, DateTime.Now.AddSeconds(30), System.Web.Caching.Cache.NoSlidingExpiration, System.Web.Caching.CacheItemPriority.Default, null); 6: } 7: return (DateTime)Cache["maintenant"]; 8: } ExĂ©cutez en appuyant sur « F5 » Remarquez que la date affichĂ©e ne change qu’aprĂšs 30 secondes en faisant des rafraichissements de la page dans le navigateur Etape 3 : Gestion des cookies L’objectif de cette Ă©tape est d’utiliser les cookies pour mĂ©moriser la premiĂšre visite d’un utilisateur. Ayant une expiration de 30 secondes, cette premiĂšre visite est rĂ©initialisĂ©e chaque 30 secondes. Ajoutez une page appelĂ©e « CookiePage.aspx » Glissez un composant de type « Literal » sur la page Ouvrez la page en mode code behind InsĂ©rez le code suivant dans l’évĂšnement Page_Load 1: var cookie = Request.Cookies["visite"]; 2: if (cookie != null) 3: { 4: DateTime d = DateTime.Parse(cookie["visite"]); 5: Literal1.Text = string.Format("Heure actuelle : {0}, premiĂšre visite : {1}", DateTime.Now, d); 6: } 7: else 8: { 9: Literal1.Text = "Bienvenue"; 10: var ck = new HttpCookie("visite"); 11: ck["visite"] = DateTime.Now.ToString(); 12: ck.Expires = DateTime.Now.AddSeconds(30); 13: Response.Cookies.Add(ck); 14: } Dans la premiĂšre ligne on teste l’existence du cookie. Si il n’existe pas alors il est crĂ©Ă© puis rattachĂ© Ă  la rĂ©ponse. ExĂ©cutez en appuyant sur « F5 » RafraĂźchissez plusieurs fois en appuyant sur « F5 » dans le navigateur VĂ©rifiez que ça se rĂ©initialise aprĂšs 30 secondes Pour tĂ©lĂ©charger le code, cliquez ici

Tutoriel 8.2: Gestionnaires et Modules HTTP

L’objectif de ce tutoriel (deuxiĂšme du module 8) est d’apprendre comment crĂ©er des handlers et des modules http personnalisĂ©s. Etape 1 : CrĂ©ation d’un handler personnalisĂ© L’objectif de cette Ă©tape est de crĂ©er un handler qui gĂšre des extensions spĂ©ciales : « datx » et « timx ». DĂšs que l’utilisateur de l’application tape une url dont l’extension est « datx », l’application lui descend la date d’aujourd’hui. DĂšs que l’utilisateur tape une url contenant l’extension « timx », l’application lui descend l’heure en cours. Ouvrez VS2012 CrĂ©ez une application ASP.NET vide appelĂ©e « TestExtensionsHTTP » Ajoutez un nouvel Ă©lĂ©ment au projet Dans la liste des modĂšles, choisissez « Handler ASP.NET » Dans le nom, entrez « DateTimeHandler »   Cliquez sur « Ajouter » La classĂ© gĂ©nĂ©rĂ©e sera comme suit : public class DateTimeHandler : IHttpHandler { /// <summary> /// You will need to configure this handler in the Web.config file of your /// web and register it with IIS before being able to use it. For more information /// see the following link: http://go.microsoft.com/?linkid=8101007 /// </summary> #region IHttpHandler Members   public bool IsReusable { // Return false in case your Managed Handler cannot be reused for another request. // Usually this would be false in case you have some state information preserved per request. get { return true; } }   public void ProcessRequest(HttpContext context) { //write your handler implementation here. }   #endregion } La propriĂ©tĂ© « IsReusable » indique si le handler peut ĂȘtre rĂ©utilisĂ© par plusieurs requĂȘtes La mĂ©thode « ProcessRequest » doit contenir le code permettant de traiter la requĂȘte http Dans le corps de la mĂ©thode « ProcessRequest », entrez les instructions suivantes var auth = context.Request.Url.GetLeftPart(UriPartial.Path); var tab = auth.Split('.'); var extension = tab[tab.Length - 1]; if (extension == "datx") context.Response.Write(DateTime.Now.Date.ToLongDateString()); else if (extension == "timx") context.Response.Write(DateTime.Now.ToLongTimeString()); Ouvrez le fichier « web.config » Ajoutez une section « system.webServer » Nous allons configurer l’application de façon Ă  ce que tous les documents dans la requĂȘte dont l’extension est « datx » ou « timx » soit traitĂ©e par « DateTimeHandler » Dans « system.webServer », ajoutez les Ă©lĂ©ments suivants : <handlers> <add type="TestExtensionsHTTP.DateTimeHandler" path="*.datx" verb="*" name="datxHandler"/> <add type="TestExtensionsHTTP.DateTimeHandler" path="*.timx" verb="*" name="timxHandler"/> </handlers> ExĂ©cutez en appuyant sur « F5 » Remarquez que parce qu’il n’y a aucune forme web dans notre application, un message d’erreur apparaĂźt (code 403) Dans la barre d’adresse du navigateur, tapez « Home.datx », par exemple http://localhost:numport/Home.datx Remarquez que la date d’aujourd’hui est affichĂ©e Dans la barre d’adresse du navigateur, remplacez « Home.datx » par « Hom.timx » Remarquez que c’est l’heure en cours qui est affichĂ©e Etape 2 : CrĂ©ation d’un module HTTP Le but de ce tutoriel est de crĂ©er un module refusant toutes les URLs contenant le mot « Test » malgrĂ© que la page existe. Le module gĂ©nĂšre alors une erreur 404. Ajoutez deux formes web Ă  l’application, l’une appelĂ©e « Default.aspx » et l’autre « Test.aspx » Dans « Default.aspx », ajoutez un lien hypertexte pointant sur la page « Test.aspx » Ajoutez un nouvel Ă©lĂ©mĂ©nt Dans le modĂšle, sĂ©lectionnez « module ASP.NET » Dans le nom, entrez « TestRefuseModule » Cliquez sur « Ajouter » Remarquez le code gĂ©nĂ©rĂ© par VS 2012 : public class TestRefuseModule : IHttpModule { /// <summary> /// You will need to configure this module in the Web.config file of your /// web and register it with IIS before being able to use it. For more information /// see the following link: http://go.microsoft.com/?linkid=8101007 /// </summary> #region IHttpModule Members   public void Dispose() { //clean-up code here. }   public void Init(HttpApplication context) { // Below is an example of how you can handle LogRequest event and provide // custom logging implementation for it context.LogRequest += new EventHandler(OnLogRequest); }   #endregion   public void OnLogRequest(Object source, EventArgs e) { //custom logging logic can go here } } La mĂ©thode « Init » est la mĂ©thode permettant d’initialiser les Ă©vĂšnements qu’on veut ajouter au cycle de vite de traitement de la requĂȘte Dans la mĂ©thode « Init », ajoutez le code suivant permettant d’affecter un gestionnaire d’évĂšnement Ă  l’évĂšnement « BeginRequest » qui se dĂ©clenche au dĂ©but de traitement de la requĂȘte http : context.BeginRequest += new EventHandler(context_BeginRequest); Ajoutez le gestionnaire d’évĂšnements « context_BeginRequest » comme suit : void context_BeginRequest(object sender, EventArgs e) { var ctx = (HttpApplication)sender; if (ctx.Request.RawUrl.Contains("Test")) throw new HttpException(404, "Non !"); } Le principe du gestionnaire est que dĂšs que l’URL contient le mot « Test », une exception est gĂ©nĂ©rĂ©e dĂ©clenchant l’erreur 404 http malgrĂ© l’existence de la ressource Appuyez sur « F5 » pour exĂ©cuter Dans la page d’accueil, cliquez sur le lien et remarquez que l’application s’exĂ©cute normalement. Ceci est dĂ» au fait que bien que le module soit finalisĂ©, il fallait le dĂ©clarer dans le fichier de configuration pour ĂȘtre intĂ©grĂ© par IIS Ouvrez le fichier « web.config » Dans la section « system.webServer » ajoutez les Ă©lĂ©ments suivants : <modules> <add type="TestExtensionsHTTP.TestRefuseModule" name="testModule"/> </modules> RĂ©-exĂ©cutez l’application et rĂ©-essayer d’appuyer sur le lien dans la page principale Pour tĂ©lĂ©charger le code, cliquez ici

Tutoriel 8.1: Configuration d’Applications ASP.NET

L’objectif de ce tutoriel (programmation avancĂ©e) est d’affecter des paramĂštres de configuration Ă  une application web et notamment les paramĂštres de localisation (« globalization »). A travers l’utilisation de la balise « location » ou d’un sous-rĂ©pertoire avec le fichier « web.config », vous allez trouver comment le mĂȘme message est affichĂ© en plusieurs langues dans des portions diffĂ©rentes de l’application. Etape 1 : PrĂ©paration L’objectif de cette Ă©tape est de crĂ©er une arborescence de dossiers de notre application web. Il s’agit aussi de crĂ©er un texte traduit en plusieurs langues (français, anglais et arabe) qui va ĂȘtre affichĂ© dans plusieurs zones selon la configuration en cours. Ouvrez VS2012 CrĂ©ez une application ASP.NET vide appelĂ©e « TestConfiguration » Ajoutez une forme web appelĂ©e « Default.aspx » Ajoutez deux rĂ©pertoires, l’un appelĂ© « Rep1 » et l’autre appelĂ© « Rep2 » Ajoutez une forme web dans le rĂ©pertoire « Rep1 » et appelez-la « Page1 » Ajoutez une forme web dans le rĂ©pertoire « Rep2 » et appelez-la « Page2 » L’arborescence de la solution devrait ressembler Ă  ceci :   Ouvrez la page « Default.aspx » et ajoutez-y deux liens hypertexte, l’un pour « Page1 » et l’autre pour « Page2 » Ajoutez un nouvel Ă©lĂ©ment au projet « TestConfiguration » A gauche, sĂ©lectionnez « GĂ©nĂ©ral » Dans le modĂšle, choisissez fichiez de ressources. Appelez-le, « MyStrings.resx » Dans la colonne « Nom » entrez « Bienvenue » Dans la colonne « Valeur », entrez « Bienvenue au tutoriel de Mr Mostefai Mohammed Amine » Maintenant, il s’agit d’ajouter le texte traduit en anglais et en arabe Ajoutez un autre fichier de ressources appelĂ© « MyStrings.en.resx » Dans le nouveau fichier de ressources, tapez « Bienvenue » dans la colonne « Nom » Tapez « Welcome to Mostefai Mohammed Amine's tutorial » dans la colonne « valeur » Ajoutez un fichier de ressources appelĂ© « MyStrings.ar.resx » Dans la zone « Nom » entrez « Bienvenue » Dans la zone « Valeur » entre « Ù…Ű±Ű­ŰšŰ§ ŰšÙƒÙ… في Ű§Ù„ŰšŰ±Ù†Ű§Ù…ŰŹ Ű§Ù„ŰȘŰčليمي Ù„Ù…Ű”Ű·ÙŰ§ÙŠ Ù…Ű­Ù…ŰŻ Ű§Ù„ŰŁÙ…ÙŠÙ† » Ouvrez la page « Default.aspx » en mode « code behind » Entrez le code suivant dans l’évĂšnement « Page_Load » de la page Response.Write(MyStrings.Bienvenue); Tapez le mĂȘme code dans l’évĂšnement « Page_Load » de « Page1.aspx » et « Page2.aspx » Etape 2 : Configuration L’objectif de cette Ă©tape est de changer la configuration de façon Ă  ce que la langue par dĂ©faut soit le français pour l’application, l’anglais pour « Rep1 » et l’arabe pour « Rep2 ». L’objectif est de dĂ©couvrir les deux moyens d’appliquer une configuration Ă  un rĂ©pertoire : la balise « location » et les fichier de configuration additionnels. Dans l’explorateur de solutions, ouvrez « web.config » Examinez la structure de ce fichier configuration> <system.web> <compilation debug="true" targetFramework="4.5" /> <httpRuntime targetFramework="4.5" /> </system.web> </configuration> Dans la section « system.web », ajoutez l’élĂ©ment suivant : <globalization culture="fr-FR" uiCulture="fr-FR"/> AprĂšs la section « system.web » et avant l’élĂ©ment fermant de configuration, ajoutez une balise location comme suit : <location path="Rep1"> <system.web> <globalization culture="en-US" uiCulture="en-US"/> </system.web> </location> La balise location dĂ©finit une localisation (langue) diffĂ©rente qui est l’anglais pour toutes les pages se trouvant dans le rĂ©pertoire « Rep1 ». Sur le rĂ©pertoire « Rep2 » cliquez sur le bouton droit de la souris Cliquez sur « Ajouter un nouvel Ă©lĂ©ment » Dans le modĂšle, choisissez « Fichier de configuration web » et laissez le nom Ă  « Web.config »     Ouvrez le nouveau fichier de configuration Dans la section « system.web », ajoutez l’élĂ©ment « globalization » comme suit : <globalization culture="ar-DZ" uiCulture="ar-DZ"/> Appuyez sur « F5 » pour exĂ©cuter Remarquez le changement de la langue du texte en parcourant les diffĂ©rentes pages Pour tĂ©lĂ©charger le code source, cliquez ici

Tutoriel 7.1: Intégration d’AJAX dans les applications web

L’objectif de ce tutoriel (associĂ© au module 7) est de montrer comment intĂ©grer les technologies AJAX dans les applications ASP.NET. La premiĂšre partie, utilise les dates pour montrer comment UpdatePanel permet uniquement Ă  des portions de page d’ĂȘtre actualisĂ©es. La deuxiĂšme partie consiste en la crĂ©ation d’un service web et son invocation depuis le client en utilisant JavaScript et JQuery. 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 – PrĂ©paration L’objectif de cette Ă©tape est de prĂ©parer l’application. CrĂ©er une nouvelle application ASP.NET vide appelĂ©e « TestAJAX » CrĂ©ez trois pages dans la nouvelle application « Default.aspx », « Partiel.aspx » et « Service.aspx » Dans la page web « Default.aspx » ajoutez deux liens pointant respectivement sur « Partiel.aspx » et « Service.aspx » avec la propriĂ©tĂ© « Text » Ă©gale Ă  : « Chargement Partiel » et « Service Web » respectivement. Ajoutez un modĂšle EntityFramework appelĂ© « AdventureModel » pointant sur la base de donnĂ©es « AdventureWorks ». Le nom du contexte doit ĂȘtre « AdventureContext ». Pour plus de dĂ©tails voir « Module 6 ». N’oubliez pas de cochez « Mettre au plusieurs ou au singulier les entitĂ©s gĂ©nĂ©rĂ©es ». Le modĂšle inclut une seule table « Product » et gĂ©nĂšre une seule entitĂ© « Product » Ajoutez une feuille de style appelĂ©e « Site.css » Ajoutez les rĂšgles suivantes Ă  la feuille de style : body { font-family: 'Gill Sans' , 'Gill Sans MT' , Calibri, 'Trebuchet MS' , sans-serif; } .asideBar { border: thin solid #919191; float: left; margin: 5px; background-color: #F8E9AD; padding : 5px; min-width : 200px; min-height : 400px; }   div.content { border: thin solid #0D86FF; float: left; margin: 5px; padding: 5px; }   div.clear { float : left; }   .loading { text-align: center; background-color: #C24B4B; color: #FFFFFF; margin-top: 2px; padding: 3px; } Ouvrez la page « Partiel.aspx » en mode source InsĂ©rez les balises suivantes aprĂšs la balise « div » du formulaire (« form ») : <div> <aside class="asideBar"> </aside> <div class="content"> </div> <div class="clear" /> </div> Ouvrez la page « Partiel.aspx » en mode design Faites glisser le fichier « Site.css » sur la page afin d’appliquer le style. Ouvrez la console du gestionnaire de paquets « Nuget » Installez « JQuery » en entrant « Install-Package JQuery » Etape 2 : ImplĂ©mentation de chargement partiel L’objectif de cette Ă©tape de permettre au dĂ©veloppeur de voir l’effet du chargement partiel en comparant entre le contenu de deux libellĂ©s. Elle montre aussi l’utilisation de l’UpdatePanel en conjonction avec l’UpdateProgress. Ouvrez la page « Partiel.aspx » en mode design Cliquez sur la barre latĂ©rale « aside » puis insĂ©rer un « Label » dedans A partir de la barre Ă  outils, ajoutez un « ScriptManager » (onglet extensions AJAX) en dĂ©but de page Ajoutez une source de donnĂ©es « EntityDataSource » et pointez-la sur l’ensemble « Products » du contexte « AdventureContext ». Si vous n’arrivez pas Ă  voir le contexte, compilez la solution en appuyant sur « F6 » Ajoutez un « UpdatePanel » dans la « div » dont la classe est « content » InsĂ©rez un deuxiĂšme « Label » Ă  l’intĂ©rieur de l’UpdatePanel que vous venez d’ajouter Ajoutez un « GridView » Ă  l’intĂ©rieur du composant « UpdatePanel » que vous venez d’ajouter. Configurez la source de donnĂ©es pour pointer sur la source de donnĂ©es « EntityDataSource » ajoutĂ©e prĂ©cĂ©demment. Configurez le « GridView » de façon Ă  ce qu’il ne contienne que les colonnes « ProductID », « Name » et « Color » Configurez la pagination du GridView en affectant « True » Ă  la propriĂ©tĂ© « AllowPaging » Ajoutez un composant « UpdateProgress » en dessous du « UpdatePanel » Dans la propriĂ©tĂ© « DisplayAfter », entrez 50 Dans la propriĂ©tĂ© « AssociatedUpdatepanelID » entrez « UpdatePanel1 » Affichez la page « Partiel.aspx » en mode source Dans la propriĂ©tĂ© « ProgressTemplate » de l’UpdateProgress insĂ©rez un div et du texte comme suit : <asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="50" AssociatedUpdatePanelID="UpdatePanel1"> <ProgressTemplate> <div class="loading">Chargement en cours...</div> </ProgressTemplate> </asp:UpdateProgress> La page en mode design doit ĂȘtre comme suit :   Le code ASPX gĂ©nĂ©rĂ© doit ĂȘtre comme celui-ci : <form id="form1" runat="server"> <div>   <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:EntityDataSource ID="EntityDataSource1" runat="server" ConnectionString="name=AdventureContext" DefaultContainerName="AdventureContext" EnableFlattening="False" EntitySetName="Products"> </asp:EntityDataSource> <aside class="asideBar"> <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> </aside> <div class="content"> <asp:UpdatePanel ID="UpdatePanel1" runat="server" AssociatedUpdatePanelID="UpdatePanel1" UpdateMode="Conditional"> <ContentTemplate> <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label> <br /> <asp:GridView ID="GridView1" runat="server" BackColor="LightGoldenrodYellow" BorderColor="Tan" BorderWidth="1px" CellPadding="2" ForeColor="Black" GridLines="None" AllowPaging="True" AutoGenerateColumns="False" DataKeyNames="ProductID" DataSourceID="EntityDataSource1"> <AlternatingRowStyle BackColor="PaleGoldenrod" /> <Columns> <asp:BoundField DataField="ProductID" HeaderText="ProductID" ReadOnly="True" SortExpression="ProductID" /> <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" /> <asp:BoundField DataField="Color" HeaderText="Color" SortExpression="Color" /> </Columns> <FooterStyle BackColor="Tan" /> <HeaderStyle BackColor="Tan" Font-Bold="True" /> <PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" /> <SelectedRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" /> <SortedAscendingCellStyle BackColor="#FAFAE7" /> <SortedAscendingHeaderStyle BackColor="#DAC09E" /> <SortedDescendingCellStyle BackColor="#E1DB9C" /> <SortedDescendingHeaderStyle BackColor="#C2A47B" /> </asp:GridView> </ContentTemplate> </asp:UpdatePanel>   <asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="50" AssociatedUpdatePanelID="UpdatePanel1"> <ProgressTemplate> <div class="loading">Chargement en cours...</div> </ProgressTemplate> </asp:UpdateProgress>   </div> <div class="clear" />   </div> </form> Passez en mode « Code Behind » en appuyant sur « F7 » Dans la mĂ©thode « Page_Load », affectez la date en cours aux deux libellĂ©s comme suit : protected void Page_Load(object sender, EventArgs e) { Label1.Text = DateTime.Now.ToString(); Label2.Text = DateTime.Now.ToString(); } ExĂ©cutez en appuyant sur « F5 » et naviguez jusqu’à la page « Partiel.aspx » Remarquez qu’en changeant la page en cours dans la grille, la date ne change que pour un seul libellĂ© alors que la page devait changer les deux Remarquez que le « UpdateProgress » s’affiche Ă  chaque fois qu’un lien de pagination est cliquĂ© Etape 3 : CrĂ©ation d’un service web WCF Dans le projet « TestAJAX », cliquez sur « Ajouter un Nouvel ElĂ©ment » Dans le modĂšle sĂ©lectionnez « Service WCF AJAX » Dans la zone « Nom », entrez « ProductService » Appuyez sur « OK » Remarquez que VS gĂ©nĂšre une classe de service avec une seule mĂ©thode « DoWork » comme suit : [ServiceContract(Namespace = "")] [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)] public class ProductService { // To use HTTP GET, add [WebGet] attribute. (Default ResponseFormat is WebMessageFormat.Json) // To create an operation that returns XML, // add [WebGet(ResponseFormat=WebMessageFormat.Xml)], // and include the following line in the operation body: // WebOperationContext.Current.OutgoingResponse.ContentType = "text/xml"; [OperationContract] public void DoWork() { // Add your operation implementation here return; }   // Add more operations here and mark them with [OperationContract] } Supprimez la mĂ©thode « DoWork » de la classe Ajoutez une mĂ©thode « GetProduct » dĂ©corĂ©e par l’attribut « OperationContract » L’attribut « OperationContract » stipule que la mĂ©thode peut ĂȘtre appelĂ©e comme service Changez le code de la mĂ©thode comme suit :   [OperationContract] public Product GetProduct(int id) { using (var context = new AdventureContext()) { return context.Products.FirstOrDefault(e => e.ProductID == id); } } Compilez en appuyant sur « F6 » et vĂ©rifiez qu’il n’y a pas d’erreur Ouvrez la page « Default.aspx » ExĂ©cutez en appuyant sur « F5 » Dans la barre d’adresse du navigateur, remplacez « Default.aspx » par « ProductService.svc » Remarquez les informations donnĂ©es sur le service permettant aux clients de l’invoquer. Etape 4 : Invocation du service web depuis JavaScript Le but de cette Ă©tape est d’utiliser le composant « ScriptManager » afin qu’il gĂ©nĂšre les proxies nĂ©cessaires Ă  l’invocation du service « ProductService ». Pour invoquer le services, des Ă©vĂšnements JQuery seront utilisĂ©s. Ouvrez la page « Service.aspx » en mode design Glissez un « ScriptManager » sur la page Cliquez sur la propriĂ©tĂ© « Services » du « ScriptManager » puis sur le bouton en pointillĂ©s qui apparaĂźt Cliquez sur le bouton « Ajouter » A droite, dans la propriĂ©tĂ© « Path », entrez « ~/ProductService.svc » Cliquez sur « OK » Ouvrez la page « Service.aspx » en mode source Ajoutez trois paragraphes (« <p> ») dont les deux derniers ont l’attribut « class » Ă  « info » Dans le premier paragraphe, ajoutez une balise « label » contenant le texte « NumĂ©ro : » Dans le premier paragraphe, ajoutez un contrĂŽle HTML (pas ASP.NET) de type bouton avec la propriĂ©tĂ© « ID » pour « btnChercher » et l’attribut « value » Ă  « Trouver Produit » Dans le deuxiĂšme paragraphe, ajoutez une balise « label » avec le texte « Nom : » Dans le deuxiĂšme paragraphe, ajoutez un contrĂŽle HTML « input (Text ») avec la propriĂ©tĂ© « ID » Ă  « txtNom » Dans le troisiĂšme paragraphe ajoutez une balise « label » avec le texte « Couleur : » Dans le deuxiĂšme paragraphe, ajoutez un contrĂŽle HTML « input (Text ») avec la propriĂ©tĂ© « ID » Ă  « txtNom » Le code devra ressembler au code qui suit : <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> <Services> <asp:ServiceReference Path="~/ProductService.svc" /> </Services> </asp:ScriptManager> <p> <label> Trouver : <input id="txtNumero" type="text" /></label> <input id="btnChercher" type="button" value="Trouver Produit" /> </p> <p class="info"> <label> Nom : </label> <input id="txtNom" type="text" />   </p> <p class="info"> <label> Couleur : </label> <input id="txtCouleur" type="text" /> </p> </div> En mode source toujours, faites glisser le fichier « JQuey-x.y.z.js » dans la page juste avant la balise «/head » fermante oĂč x.y.z est la version installĂ©e de JQuery En mode source, ajoutez le script « JavaScript » suivant : <script type="text/javascript"> $(function () { $(".info").hide(); $("#btnChercher").click(function () { var numero = $("#txtNumero").val(); ProductService.GetProduct(numero, function (data) { if (data == null) { alert('non trouvĂ© !'); $(".info").hide(); } else { $("#txtNom").val(data.Name); $("#txtCouleur").val(data.Color); $(".info").show(); } }); }); }); </script> La ligne suivante permet d’invoquer l’opĂ©ration « GetService » du service « GetProduct » avec comme paramĂštre la variable « numero ». Le deuxiĂšme paramĂštre est la fonction Ă  appeler lorsque l’appel rĂ©ussit. AJAX est bĂąti sur ce genre d’appel car le services s’exĂ©cutent d’une maniĂšre asynchrone, la fonction passĂ©e en paramĂštre est appelĂ©e « callback ». ProductService.GetProduct(numero, function (data) { if (data == null) { alert('non trouvĂ© !'); $(".info").hide(); } else { $("#txtNom").val(data.Name); $("#txtCouleur").val(data.Color); $(".info").show(); } }); ExĂ©cutez l’application en appuyant sur « F5 » Pour tĂ©lĂ©charger le code du tutoriel, cliquez ici

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 6.1 : Connexion aux bases de données en utilisant ADO.NET

L’objectif de ce tutoriel (premier du module 6) est d’explorer certaines capacitĂ©s de Visual Studio et ASP.NET Ă  gĂ©rer et Ă  crĂ©er des applications de bases de donnĂ©es. Etape 1 – Connexion Ă  AdventureWorks L’objectif de cette Ă©tape est d’utiliser l’explorateur de serveur de Visual Studio 2012 dans le but de se connecter Ă  une base de donnĂ©es. Ce tutoriel requiert que la base de donnĂ©es « AdventureWorks » soit jointe Ă  SQL Server. Pour tĂ©lĂ©charger cette base, accĂ©dez au site : http://sqlserversamples.codeplex.com/ Lancez VS 2012 Dans le menu, sĂ©lectionnez « Affichage Ă  Explorateur de Serveur » La fenĂȘtre ci-dessous s’affiche Sur le nƓud « Connexion de donnĂ©es », cliquez sur le bouton droit puis « Ajouter une connexion » La fenĂȘtre ci-dessous s’affiche : A cĂŽtĂ© de la zone « Sources de donnĂ©es », cliquez sur « Changer » La fenĂȘtre ci-dessous s’affiche Remarquez les bases de donnĂ©es auquel .NET peut accĂ©der   Cliquez sur « Annuler » Dans la zone « Nom du serveur » tapez « . » ou « .\SQLExpress » selon la version de SQL Server dont vous disposez Dans la liste se connecter Ă  la base, sĂ©lectionnez « AdventureWorksLT2008R2 »* Cliquez sur « Tester la connexion » pour vĂ©rifier que ça marche Cliquez sur « OK » Remarquez que VS a ajoutĂ© un nouveau nƓud sous les connexions de donnĂ©es pointant sur la base de donnĂ©es « AdventureWorks » DĂ©veloppez le nouveau nƓud crĂ©Ă© Le nƓud contient un enfant appelĂ© « tables », dĂ©veloppez-le et remarquez que les tables de la base de donnĂ©es sont listĂ©es Cliquez avec le bouton droit sur la table « Product » Cliquez sur « Afficher les DonnĂ©es de la table » Une grille s’affiche contenant tous les enregistrements de la table « Product » Etape 2 : CrĂ©ation d’une base de donnĂ©es L’objectif de cette Ă©tape est d’utiliser l’explorateur de serveur afin de crĂ©er une nouvelle base de donnĂ©es, d’y crĂ©er des tables et des donnĂ©es de test. Dans l’explorateur de serveur, cliquez avec le bouton droit sur « Connexions de donnĂ©es » Cliquez sur « CrĂ©er une nouvelle base de donnĂ©es SQL Server » Dans la zone « Nom du serveur », tapez « . » ou « .\SQLExpress » selon la version de SQL Server dont vous disposez Dans la zone « Nom de la nouvelle base de donnĂ©es », entrez « Formation » Cliquez sur « OK ». Dans l’explorateur de serveur, cliquez sur le nƓud « Tables » de la nouvelle base de donnĂ©es avec le bouton droit SĂ©lectionnez « Ajouter une nouvelle table » Ajoutez une colonne avec le nom « Numero », le type « int » qui n’accepte pas les valeurs vides Ajoutez une colonne avec le nom « Titre », le type « nvarchar(200) » qui n’accepte pas les vides Ajoutez une colonne avec le nom « Annee », le type « int » qui n’accepte pas les vides Cliquez avec le bouton droit sur la ligne contenant la colonne « Numero » et sĂ©lectionnez « ClĂ© Primaire » Dans la barre Ă  outils de VS, cliquez sur le bouton « Enregistrer » VS demande ensuite le nom de la table, entrez « Film » Cliquez sur « OK » Dans le nƓud « Tables » dans l’explorateur de serveur, cliquez avec le bouton droit sur la table « Film » SĂ©lectionnez « Afficher les donnĂ©es » En utilisant la fenĂȘtre nouvellement affichĂ©es, saisissez quelques films Fermez la fenĂȘtre Cliquez avec le bouton droit sur la base de donnĂ©es « Formation » dans l’explorateur de serveur Cliquez sur PropriĂ©tĂ©s La fenĂȘtre de propriĂ©tĂ©s s’affiche Remarquez la propriĂ©tĂ© « Connection String », c’est cette propriĂ©tĂ© que va utiliser les applications web pour se connecter Ă  la base de donnĂ©es Etape 3 : AccĂšs Ă  la base de donnĂ©es en mode connectĂ© L’objectif de cette Ă©tape est d’utiliser l’API ADO.NET afin de se connecter Ă  une base de donnĂ©es en mode connectĂ©. L’affichage se fera suite Ă  la crĂ©ation d’une connexion, d’une commande SQL ramenant tous les films puis la lecture et l’affichage des enregistrements un par un. CrĂ©ez une application ASP.NET vide appelĂ©e « TestADO » Ajoutez une forme web appelĂ©e « Default.aspx » Ajoutez un composant « Literal » Ă  la page « Default » Appuyez sur « F7 » pour accĂ©der au code behind Modifiez l’évĂšnement Page_Load comme suit : protected void Page_Load(object sender, EventArgs e) { int numero, annee; string titre, ligne; using (SqlConnection connection = new SqlConnection("chaine_connection")) { connection.Open(); using (DbCommand command = connection.CreateCommand()) { command.CommandText = "SELECT Numero, Titre, Annee FROM Film"; using (DbDataReader reader = command.ExecuteReader()) { while (reader.Read()) { numero = reader.GetInt32(0); titre = reader.GetString(1); annee = reader.GetInt32(2); ligne = string.Format("{0} | {1} | {2} <br/>", numero, titre, annee); Literal1.Text += ligne; } } } } } Remplacez « chaine_connection » par la chaĂźne de connexion de la base de donnĂ©es « Formation » que vous pouvez rĂ©cupĂ©rer Ă  partir de l’explorateur de serveur Appuyez sur « F5 » pour exĂ©cutez   Etape 4 : AccĂšs Ă  la base en mode dĂ©connectĂ© L’objectif de cette Ă©tape est de pouvoir utiliser les capacitĂ©s d’ADO.NET de se connecter Ă  une base de donnĂ©es en mode dĂ©connectĂ©. Il s’agira de la crĂ©ation d’un ensemble de donnĂ©es (DataSet) fortement typĂ© puis de peupler une table Ă  partir des rĂ©sultats du « DataSet ». Ajoutez au projet une nouvelle forme web appelĂ©e « Connected.aspx » Cliquez sur le projet « TestADO » avec le bouton droit puis cliquez sur « Ajouter un nouvel Ă©lĂ©ment » A gauche, sĂ©lectionnez « DonnĂ©es » SĂ©lectionnez le modĂšle ensemble de donnĂ©es « DataSet » Dans la zone « Nom », entrez « FormationDataSet » Cliquez sur OK Visual Studio crĂ©e un ensemble de donnĂ©es vide Affichez l’explorateur de serveurs A partir de la base de donnĂ©es « Formation », glissez la table « Film » sur la fenĂȘtre de l’ensemble de donnĂ©es Ouvrez la page « Connected.aspx » en mode conception A partir de la boĂźte Ă  outils, faites glisser un composant « Table » depuis l’onglet « Standard » Appuyez sur « F7 » pour passer au vue code Changez le code de la mĂ©thode « Page_Load » comme suit : TableRow row; TableCell cell; protected void Page_Load(object sender, EventArgs e) { cell = new TableCell(); cell.Text = dataRow.Numero.ToString(); row.Cells.Add(cell); using (FormationDataSet dataSet = new FormationDataSet()) { using (FilmTableAdapter adapter = new FilmTableAdapter()) { adapter.Fill(dataSet.Film); } foreach (TestADO.FormationDataSet.FilmRow dataRow in dataSet.Film.Rows) { row = new TableRow(); cell = new TableCell(); cell.Text = dataRow.Numero.ToString(); row.Cells.Add(cell); cell = new TableCell(); cell.Text = dataRow.Titre; row.Cells.Add(cell); cell = new TableCell(); cell.Text = dataRow.Annee.ToString(); row.Cells.Add(cell); Table1.Rows.Add(row); } } } Appuyez sur « F5 » pour exĂ©cuter Pour tĂ©lĂ©charger le code associĂ©, cliquez ici