Je suis heureux de dire qu'aujourd'hui, nous publions notre tout premier article sur ASP.NET. Dans ce screencast, je vais vous montrer comment implémenter une fonctionnalité de recherche simple sur votre site web personnel. Nous allons passer en revue de nombreuses nouvelles fonctionnalités d'ASP.NET 3.5, telles que LINQ et de nombreux contrôles AJAX fournis avec Visual Studio / Web Developer..
* Cliquez sur l'icône plein écran pour agrandir la vidéo.
Déclaration de mission
Nous allons construire une fonctionnalité de recherche simple pour notre site. Nous allons créer un site simple qui contient un seul champ de texte et un seul bouton. Lorsque le bouton est cliqué, nous écrirons du code LINQ qui extraira les informations applicables de notre base de données et les affichera sur la page. De plus, nous autoriserons les post-révisions de page partielles en utilisant le panneau de mise à jour et les contrôles de progression de la mise à jour.
Que souhaitez-vous savoir
Dans ce screencast, je suppose que vous avez une certaine connaissance du cadre. Donc, même si je vais tout expliquer au mieux de mes capacités, je compte sur vous pour savoir certaines choses.. Si vous êtes un novice complet, laissez un commentaire et nous travaillerons à la publication prochaine d'un article "From Scratch"..
Étape 1: Création de la base de données
Je vais créer une base de données "Blog". Par souci de simplicité, je n’ajouterai que quelques colonnes: "BlogId", "BlogTitle", "BlogContents". En situation réelle, vous devez ajouter des éléments tels que "BlogAuthor", "BlogFeaturedImage", "CommentsId", etc.. Après avoir rempli ces colonnes avec du contenu de charabia, nous sommes prêts à créer notre formulaire Web..
Étape 2: Le contrôle Listview
Ce qui est merveilleux avec le contrôle de liste, c’est qu’il vous permet de garder un contrôle à 100% sur votre marge. Au lieu d'avoir à gérer des tables, je peux spécifier tout ce qui me plaît.
LayoutTemplate: Ce modèle sert à emballer chaque article. Par exemple, si chaque élément se trouvait à l'intérieur d'une balise "li", vous pouvez ajouter une balise "ul" dans votre modèle de mise en page sous la forme d'un "wrap"..
ItemTemplate: Cela décrira la disposition de chaque élément de la base de données. Si, par exemple, nous avons 10 entrées de blog dans la base de données, il y aura ensuite 10 éléments.
Dans le modèle d'élément, j'ai spécifié que le contrôle listview ne devrait afficher qu'un lien hypertexte. Cet hyperlien aura son attribut text égal à quelle que soit la valeur dans la base de données pour la ligne associée. Je vais également définir la propriété NavigateUrl (le href) sur une nouvelle page. Cette page entry.aspx servira de modèle pour chaque entrée. Nous spécifierons quelle entrée doit être affichée via la chaîne de requête. (Plus à ce sujet dans le screencast.)
Étape 3: LINQ
LINQ est un modèle de programmation qui vous permet d'accéder à de nombreuses formes de données différentes en utilisant la même syntaxe. Avec LINQ to SQL, il permet une méthode de communication fortement typée avec votre base de données relationnelle. Imaginez pouvoir utiliser la même requête pour accéder à XML, à des objets, à des bases de données relationnelles, à des API, etc. C'est un modèle incroyable et constitue sans aucun doute ma nouvelle fonctionnalité préférée dans ASP.NET 3.5..
Plutôt que d'incorporer du code SQL directement dans votre code derrière des fichiers, vous pouvez maintenant traiter chaque colonne de vos tables de base de données comme tout autre objet. Ceci est accompli en créant une classe LINQ to SQL. Cette classe crée automatiquement les objets de base de données pour vous..
Protected Sub btnSubmit_Click (expéditeur ByVal en tant qu'objet, ByVal et As en tant que System.EventArgs) gère btnSubmit.Click Dim db en tant que nouveau BlogDBDataContext () Dim q = de b dans db.Blogs _ Où b.BlogContents.Contains (txtSearch.Text.Text.Trim ( )) Ou _ b.BlogTitle.Contains (txtSearch.Text.Trim ()) _ Sélectionnez b lv.DataSource = q lv.DataBind () End Sub
Lorsque l'utilisateur clique sur le bouton "Rechercher", ce code récupère uniquement les entrées de la base de données contenant la valeur entrée dans la zone de texte de recherche. Ces valeurs seront retournées et stockées dans la variable "q". Nous avons ensuite défini la source de données de notre contrôle listview sur "q" - et l’a identifié..
Étape 4: AJAXifier notre page
Dans cette simple démonstration, le fait que toute la page soit postée ou non ne fera aucune différence. Toutefois, dans un site de taille moyenne à grande, effectuer un post-traitement complet peut être pénible. Nous allons envelopper le contenu de notre contrôle listview dans un panneau de mise à jour afin de n'actualiser que ces informations spécifiques..
Notez la balise "Déclencheurs". Si notre bouton était imbriqué dans le panneau de mise à jour, celui-ci s'actualiserait automatiquement lorsque l'utilisateur clique sur le bouton. Cependant, dans ce cas, notre bouton est en dehors du panneau de mise à jour. Dans de tels cas, nous devons ajouter un "ASyncPostBackTrigger" qui pointe vers le bouton qui déclenchera la publication du panneau de mise à jour.
Étape 5: Commentaires de l'utilisateur
Lors de la mise à jour partielle de la page, l'utilisateur peut parfois devenir perplexe. Il peut lui sembler que la page ne répond simplement pas. Pour compenser, nous allons ajouter l'omniprésent "icône de chargement" à la page. Cela fournira à l'utilisateur des informations lui permettant de savoir que la page est en cours de traitement. Nous pouvons utiliser le contrôle "Update Progress" pour accomplir cette tâche.
Dans le modèle de progression, j'ai ajouté une balise d'image contenant mon icône de chargement. Ainsi, pendant le rafraîchissement du panneau de mise à jour, cette icône de chargement s’affiche. Une fois le post terminé, l'icône disparaîtra..
Vous avez fini
Bien que cet article ait été un peu rapide, le screencast décrit chaque méthode étape par étape. Si vous avez des questions supplémentaires, veuillez laisser un commentaire et nous ferons de notre mieux pour vous aider. Ce que j'ai fourni aujourd'hui est un moyen simple de rechercher votre site. Cependant, dans la réalité, vous implémenterez probablement une méthode de recherche plus avancée. J'aimerais entendre vos réflexions sur les meilleures façons d'accomplir cela..
Si vous souhaitez plus de tuts ASP.NET, faites-vous entendre! Laissez un commentaire et exprimez votre opinion. Ce cadre est trop puissant pour être ignoré. Digg it, SU it, DZone il! Merci à tous! Bye Bye!
Abonnez-vous aux screencasts hebdomadaires
Vous pouvez ajouter notre flux RSS à vos podcasts ITUNES en procédant comme suit:
Une fois ITUNES chargé, cliquez sur l'onglet "Avancé"
Share
Accentsconagua
