Création d’une page de destination à Blazor

Apprenez à créer des sections d’une page de destination dans Blazor – Navigation Bar, section Héros, section Customer Logos, sections de fonctionnalités, section de tarification et une section de formulaire.

Dans cet article, nous explorerons certaines des sections communes utilisées pour créer des pages de destination, à quoi ils servent et comment nous pouvons les créer rapidement grâce à la progression de l’interface utilisateur de Telerik pour Contrôles du blazor. Je me suis inspiré du modèle sous licence du MIT dans le référentiel pages impressionnantes. Commençons!

Qu’est-ce qu’une page de destination?

Une page de destination est une page Web conçue pour convertir les visiteurs en prospects ou clients. En règle générale, ces sites se concentrent sur l’encouragement des utilisateurs à effectuer une action spécifique, éliminant les distractions telles que les bannières, les liens vers d’autres pages Web ou les barres latérales inutiles. Une autre caractéristique de ces pages est qu’ils incluent souvent une forme de contact, en plus d’avoir une structure adaptée à la conversion.

Comment créer des pages de destination avec Blazor?

Pour mettre en pratique ce qui est décrit dans cet article, vous pouvez créer un nouveau projet Blazor ou ajouter un nouveau composant de type page à un projet existant. Dans mon cas, je vais créer un projet à partir de zéro, pour lequel j’ai suivi ces étapes:

1. Créer un nouveau projet en sélectionnant le Application Web Blazor modèle, avec un Mode de rendu interactif se mettre à Serveuret un Emplacement d’interactivité se mettre à Par page / composanten laissant l’option pour intégrer les composants d’échantillonnage sélectionnés.
2. Suivre guide d’installation Pour les composants de Telerik Blazor pour les intégrer dans le projet.
3. Accéder au fichier situé dans wwwroot | app.css et ajoutez les styles suivants à la fin du fichier:

.landing-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 5%;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 20;
    background: #171B20;
    width: 100vw;
}

.top-row{
    padding-left: 0;
}

.top-row{
    background: #26b050;
}

.logo {
    width: 50px;
    height: 50px;
}

.nav-links {
    display: flex;
    gap: 20px;
    align-items: center;
}

.nav-link {
    text-decoration: none;
    color: white;
    font-size: 16px;
    transition: color 0.3s;
}

    .nav-link:hover {
        color: #6c72e8;
    }

.hero-section {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    text-align: center;
    padding: 5%;
    background: url('assets/images/background/dots.svg') center/cover no-repeat;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(24,27,32,0.9) 30%, rgba(0,0,0,0.25) 65%);
    z-index: -1;
}

.hero-title {
    font-size: 48px;
    font-weight: bold;
    text-transform: uppercase;
    margin: 0;
    background: linear-gradient(93deg, rgba(233,92,255,1) 12%, rgba(210,125,255,1) 49%, rgba(159,121,255,1) 93%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-subtitle {
    font-size: 18px;
    margin-top: 20px;
    max-width: 450px;
}

.hero-buttons {
    margin-top: 20px;
    display: flex;
    gap: 20px;
    justify-content: center;
}

.dashboard-container {
    margin-top: 40px;
}

.dashboard-image {
    width: 100%;
    max-width: 950px;
    min-height: 450px;
    border-radius: 16px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}

.section {
    padding: 60px 5%;
    text-align: center;
}

.pricing-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.pricing-card {
    width: 380px;
    margin: 20px;
    padding: 20px;
    background-color: #1d2127;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}

.footer {
    display: flex;
    justify-content: space-around;
    padding: 40px 5%;
    background-color: #111;
}

.footer-column {
    max-width: 250px;
}

    .footer-column h2 {
        font-size: 24px;
        margin-bottom: 20px;
    }

.footer-link {
    color: white;
    text-decoration: none;
    display: block;
    margin-bottom: 10px;
    transition: color 0.3s;
}

    .footer-link:hover {
        color: #483cf4;
    }

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.item {
    background: #121418;
    color: rgba(255, 255, 255, .8);
    font: 36px/200px sans-serif;
    text-align: center;
    margin: 0;
    border: none;
    position: absolute;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, .8);
    border-width: 0px;
}

.k-scrollview {
    margin: 0 auto;
    border: none;
    border-width: 0px;
}

.carousel-style {
    border: none !important;
}

    .carousel-style .k-scrollview-nav .k-link {
        background-color: #4B0082;
    }
        .carousel-style .k-scrollview-nav .k-link.k-primary {
            background-color: #3F51B5;
        }
.k-form-label,
.k-form-hint,
.k-label {
    color: #ffffff !important;
}

.k-input,
.k-textbox,
.k-dropdown,
.k-multiselect {
    color: #ffffff !important;
}

.k-validation-message {
    color: #ffffff !important;
}

4. Dans la même feuille de style, modifiez les styles suivants:

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 0;
    background-color: #181B20;
    color: white;
}
...

.content {
    font-family: "Poppins", sans-serif;
}

5. Pour utiliser la police poppins, allez à App.razor et ajouter la ligne suivante dans le Head section:

<head>
    ...
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
    <ImportMap />
    ...
</head>

Une fois les étapes précédentes terminées, nous sommes prêts à créer la page de destination.

Création d’un nouveau composant de type page

La première étape que nous allons franchir est de créer un nouveau composant de type Page de rasoir pour ajouter le contenu de la page de destination. Pour ce faire, cliquez avec le bouton droit sur le Composants dossier et ajoutez un nouveau Composant de rasoir. Vous pouvez le nommer ce que vous voulez; Dans mon cas, je l’ai nommé LandingPage.razor. Nous modifierons ce composant en ajoutant un @page Directive pour le transformer en page et l’attribuer comme l’itinéraire initial de l’application. Enfin, nous spécifierons le rendermode comme InteractiveServer:

@page "https://www.telerik.com/"
@rendermode InteractiveServer

<h3>LandingPage</h3>

@code {

}

Pour éviter les problèmes avec les itinéraires, vous devez modifier le @page directive du Home.razor page à une valeur différente, comme:

@page "/Home"

Si vous exécutez l’application à ce stade, vous verrez la page nouvellement créée affichée à l’écran:

Auparavant, nous avons mentionné qu’une page de destination ne devrait pas avoir d’éléments distrayants, nous devons donc supprimer le menu de navigation de l’application actuelle.

Pour supprimer le menu de navigation de l’application, nous devons créer un nouveau mise en page fichier qui définit comment l’application sera rendue. Actuellement, nous avons une disposition définie dans le Composants | Mise en page | MainLayout.razor Le fichier, qui, si vous examinez, comprend des éléments tels qu’une barre latérale.

Dans le Mise en page dossier, créez un nouveau Composant de rasoir nommé EmptyLayout.razor avec le contenu suivant:

@inherits LayoutComponentBase

<TelerikRootComponent>
    <main>
        <article class="content">
            @Body
        </article>
    </main>
</TelerikRootComponent>

Avec cela, nous utilisons @Body Pour rendre le contenu tout en supprimant des éléments inutiles comme la barre latérale. L’étape suivante consiste à aller à LandingPage.razor et spécifiez que nous voulons utiliser la nouvelle disposition via le @layout directif:

@using LandingPageBlazor.Components.Layout

@page "https://www.telerik.com/"
@layout EmptyLayout

<h3>LandingPage</h3>

@code {

}

Lorsque vous exécutez l’application, vous verrez que la page occupe désormais l’espace disponible complet:

Voyons maintenant comment ajouter des éléments à la page de destination.

Création de l’en-tête pour la page de destination

Le premier élément que nous ajouterons à notre page de destination est un en-tête qui représentera un menu de navigation. Ce n’est pas le même menu de navigation d’application mais plutôt un menu qui permet à l’utilisateur de se déplacer rapidement entre les sections de la page. Ceci est utile car l’utilisateur pourrait avoir déjà visité la page de destination et vouloir naviguer rapidement vers une section spécifique (comme la section de paiement), nous devons donc rendre cette tâche aussi simple que possible.

Pour créer cet élément, nous pouvons utiliser le Télérikapbar Control, qui nous permet de créer rapidement un menu supérieur, y compris l’espacement entre les éléments comme indiqué dans l’exemple suivant:

<TelerikAppBar ThemeColor="dark">
    <AppBarSection>
        <img src="assets/logo/logo.png" alt="Logo" class="logo" />
    </AppBarSection>
    <AppBarSpacer></AppBarSpacer>

    <AppBarSection>
        <a href="#about" class="nav-link">About Us</a>
    </AppBarSection>
    <AppBarSeparator></AppBarSeparator>

    <AppBarSection>
        <a href="#pricing" class="nav-link">Pricing</a>
    </AppBarSection>
    <AppBarSeparator></AppBarSeparator>

    <AppBarSection>
        <a href="#features" class="nav-link">Features</a>
    </AppBarSection>
    <AppBarSeparator></AppBarSeparator>

    <AppBarSection>
        <a href="#company" class="nav-link">Company</a>
    </AppBarSection>
    <AppBarSeparator></AppBarSeparator>

    <AppBarSection>
        <TelerikButton OnClick="@(() => {})">Get Started <i class="bi bi-arrow-right"></i></TelerikButton>
    </AppBarSection>
    <AppBarSeparator></AppBarSeparator>
</TelerikAppBar>

Dans le code ci-dessus, nous utilisons le TelerikAppBar composant, auquel nous ajoutons des sections en utilisant le AppBarSection étiqueter. Cela nous permet d’inclure le code HTML avec le contenu souhaité. Vous pouvez voir que dans mon cas, j’utilise des liens et même un TelerikButton Pour exécuter une méthode C # si nécessaire. Le AppBarSpacer et AppBarSeparator Les balises vous permettent d’ajouter de l’espace entre les éléments du TelerikAppBarrésultant en une conception finale qui ressemble à ceci:

Création de la section des héros

La première section de contenu rencontrée par l’utilisateur est la section des héros. Dans cette section, les fonctionnalités d’un produit sont généralement mises en évidence, des boutons d’action rapide sont ajoutés, etc. Dans notre cas, nous allons ajouter un curseur affichant des images de produit. Nous ferons cela en utilisant le TelerikCarousel Control, qui fournit un moyen facile et rapide d’implémenter des carrousels non seulement d’images mais également de tout contenu personnalisé dont vous avez besoin.

Le TelerikCarousel Le contrôle fonctionne en définissant une source de données avec un ensemble de propriétés que nous afficherons dans le carrousel. Dans mon cas, comme je n’ai qu’à afficher des images, j’ajouterai une classe avec les propriétés ID et ImagePathen plus de créer une liste avec cinq objets du modèle créé:

@code {
    public IEnumerable<CarouselModel> CarouselData = Enumerable.Range(1, 5).Select(x => new CarouselModel
        {
            ID = x,
            ImagePath = "assets/images/home/dashboard.png"
        });

    public class CarouselModel
    {
        public int ID { get; set; }
        public string ImagePath { get; set; }
    }
}

La section des héros ressemble à ce qui suit:

<section id="hero-section" class="hero-section">
    <div class="hero-bg"></div>
    <h1 class="hero-title">
        AI Powered<br />Coding Simplified
    </h1>
    <p class="hero-subtitle">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Error adipisci corrupti accusamus reiciendis similique assumenda nostrum fuga dicta vitae ipsum.
    </p>
    <div class="hero-buttons">
        <TelerikButton OnClick="@(() => {})" Size="lg" ThemeColor="info">Get Started</TelerikButton>
        <TelerikButton OnClick="@(() => {})" Size="lg" Class="secondary" ThemeColor="light">Learn More</TelerikButton>
    </div>
    <div class="dashboard-container">
        <TelerikCarousel Data="@CarouselData" Width="950px" Height="450px" Class="carousel-style">
            <Template>
                <div class="item">
                    <img src="assets/images/home/dashboard.png" alt="Dashboard" class="dashboard-image" />
                </div>
            </Template>
        </TelerikCarousel>
    </div>
</section>

Lors de l’exécution de l’application, vous verrez comment le curseur avec des images s’affiche dans l’application:

Maintenant, voyons comment créer une section de fonctionnalités.

Ajout d’une section de logos de marque

Quelque chose qui renforce la confiance entre les prospects d’une application, est de présenter que les entreprises ont compté sur eux pour utiliser leurs produits. Pour cette raison, nous ajouterons une section dédiée sur notre page de destination pour afficher les logos de certaines sociétés, incorporant l’interactivité pour en faire une section dynamique.

De la bibliothèque de l’interface utilisateur de Telerik, nous utiliserons le Composant de conteneur d’animation du blazorpour ajouter rapidement des effets de fondu et de décoloration aux éléments en enroulant simplement la section de code HTML souhaitée, comme démontré dans l’exemple suivant:

<section class="section" id="mySection">
    <h2>Trusted by Brands You Know</h2>
    <div style="overflow: hidden; white-space: nowrap; max-width: 800px; margin: 0 auto;">
        <TelerikAnimationContainer @ref="animationContainer"
                                   AnimationType="AnimationType.ZoomIn"
                                   AnimationDuration="1000"
                                   Width="800px">

            <div style="display: inline-block; animation: scroll 10s linear infinite;">
                <img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/blogs/author-images/progress-blog-default-logo-transparent.png" alt="Progress" style="height:50px; width:50px; margin: 0 20px;" />
                <img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/blogs/author-images/progress-blog-default-logo-transparent.png" alt="Progress" style="height:50px; width:150px; margin: 0 20px;" />
                <img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/blogs/author-images/progress-blog-default-logo-transparent.png" alt="Progress" style="height:50px; width:150px; margin: 0 20px;" />
                <img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/blogs/author-images/progress-blog-default-logo-transparent.png" alt="Progress" style="height:50px; width:150px; margin: 0 20px;" />
                <img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/blogs/author-images/progress-blog-default-logo-transparent.png" alt="Progress" style="height:50px; width:150px; margin: 0 20px;" />
                <img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/blogs/author-images/progress-blog-default-logo-transparent.png" alt="Progress" style="height:50px; width:150px; margin: 0 20px;" />
            </div>

        </TelerikAnimationContainer>
    </div>
</section>

Dans le code ci-dessus, vous pouvez voir qu’une série d’images de logo (représentant les logos de l’entreprise) est imbriquée dans un div. De plus, nous avons configuré le TelerikAnimationContainer contrôle avec un AnimationTypeun AnimationDurationun Width et un @refqui est utilisé pour contrôler l’effet d’animation. Cette configuration est nécessaire comme TelerikAnimationContainer peut être réutilisé pour afficher d’autres types de contenu selon les besoins.

Pour compléter le code du rasoir, nous ajouterons une référence au contrôle dans la section du code et spécifiez que l’animation doit démarrer le chargement de la page:

@code {

    private TelerikAnimationContainer animationContainer;
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {            
             await animationContainer.ShowAsync();
        }
    }
    ...
}

Cependant, le code ci-dessus a un problème pour notre cas d’utilisation spécifique. Le problème est que, si l’utilisateur commence par visualiser le menu de navigation et la section Héros, il peut manquer l’animation du logo car elle s’exécute immédiatement après la publication de la page. Idéalement, nous ne devrions voir l’animation que lorsque l’utilisateur défile vers cette section. Cela peut être corrigé avec ces étapes:

1. Accédez à la App.razor fichier et ajouter un <script> tag à la fin du <body> Tag avec le contenu suivant:

<body>
    ...
    <script>
        window.observeElement = (elementId, dotNetHelper) => {
            const element = document.getElementById(elementId);
            if (!element) {
                console.error("Element with id: " + elementId + " was not found");
                return;
            }
            const observer = new IntersectionObserver(entries => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        dotNetHelper.invokeMethodAsync('OnSectionVisible');
                        observer.unobserve(entry.target);
                    }
                });
            });
            observer.observe(element);
        };
    </script>
</body>

2. Dans LandingPage.razorAjoutez la directive suivante:

@inject IJSRuntime JS

3. Enfin, dans la section Code de LandingPage.razormodifiez le OnAfterRenderAsync Méthode et ajouter le OnSectionVisible méthode:

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {            
        
        await JS.InvokeVoidAsync("observeElement", "mySection", DotNetObjectReference.Create(this));

    }
}

[JSInvokable]
public async Task OnSectionVisible()
{        
    await animationContainer.ShowAsync();
}

Le code ci-dessus permet à l’animation de s’exécuter uniquement lorsque l’utilisateur défile vers la section correspondante, comme indiqué ci-dessous:

Maintenant, voyons comment afficher les sections de fonctionnalités.

Création d’une section de fonctionnalités

La section suivante que nous créerons est la section des fonctionnalités du produit. Cette section est utile pour présenter tous les avantages du produit qui vous distingue de la concurrence. Ici, vous pouvez ajouter du contenu tel que des descriptions des fonctionnalités, des aspects techniques, des avantages et toute autre information qui peut aider vos clients à choisir votre solution.

Nous avons besoin d’un contrôle flexible et nous permet de diviser le contenu en plusieurs lignes et colonnes pour créer la disposition nécessaire. Heureusement, dans le catalogue Telerik, il y a un Composant de grindlayout de Blazorqui permet d’organiser le contenu dans un format de grille avec des lignes et des colonnes. Pour l’utiliser, définissez simplement le composant TelerikGridLayout, spécifiez les lignes (GridLayoutRows) et les colonnes (GridLayoutColumns), puis placer les éléments dans leurs positions correspondantes. Vous trouverez ci-dessous un exemple de son utilisation:

<section class="section" id="features" style="width: 1420px; margin: 0 auto;">
    <TelerikGridLayout ColumnSpacing="120px" VerticalAlign="GridLayoutVerticalAlign.Center">
        <GridLayoutColumns>
            <GridLayoutColumn Width="850px"></GridLayoutColumn>
            <GridLayoutColumn Width="450px"></GridLayoutColumn>
        </GridLayoutColumns>
        <GridLayoutRows>
            <GridLayoutRow Height="auto"></GridLayoutRow>
        </GridLayoutRows>
        <GridLayoutItems>
            <GridLayoutItem Column="1" Row="1">
                <img src="assets/images/home/coding.png" alt="Coding" style="width: 100%; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.2);" />
            </GridLayoutItem>
            <GridLayoutItem Column="2" Row="1">
                <h3>Streamlined Coding</h3>
                <div>
                    <h4><i class="bi bi-check-all"></i> AI Powered</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </div>
                <div>
                    <h4><i class="bi bi-check-all"></i> Locally Run</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </div>
            </GridLayoutItem>
        </GridLayoutItems>
    </TelerikGridLayout>
</section>

Le code ci-dessus rendra le contenu en deux colonnes et une ligne:

Maintenant, voyons comment créer une section qui affiche différentes options de paiement.

Création de cartes avec les détails du plan de paiement

Une section que vous voudrez probablement inclure dans vos pages de destination est la section Options de paiement. N’oubliez pas que notre objectif est de convertir l’utilisateur en fournissant toutes les informations nécessaires sur le produit, y compris les détails du paiement.

Pour y parvenir, nous pouvons utiliser le Composant de carte Blazorce qui facilitera la définition du contenu pour l’en-tête de chaque carte (CardHeader), corps (CardBody) et le pied de page (CardFooter). En tant qu’avantage, nous pouvons combiner le contenu de la carte avec le code HTML ou ajouter d’autres composants, comme indiqué dans l’exemple suivant:

<section class="section" id="pricing">
    <h3>Simple Pricing</h3>
    <div class="pricing-cards">
        <TelerikCard Class="pricing-card">
            <CardHeader>
                <h3>
                    <span style="font-size: 32px; font-weight: bold;">$9</span>
                    <span style="font-size: 24px; color: #ccc;">/mo</span>
                </h3>
            </CardHeader>
            <CardBody>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, explicabo!
                </p>
                <hr />
                <ul style="list-style: none; padding: 0;">
                    <li>Lorem ipsum dolor sit amet.</li>
                    <li>Lorem, ipsum.</li>
                    <li>Lorem, ipsum dolor.</li>
                    <li>Lorem ipsum dolor sit.</li>
                </ul>
            </CardBody>
            <CardFooter>                
                <TelerikButton OnClick="@(() => {})">Get Now</TelerikButton>
            </CardFooter>
        </TelerikCard>        
        <TelerikCard Class="pricing-card">
            <CardHeader>
                <h3>
                    <span style="font-size: 32px; font-weight: bold;">$19</span>
                    <span style="font-size: 24px; color: #ccc;">/mo</span>
                </h3>
            </CardHeader>
            <CardBody>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, explicabo!
                </p>
                <hr />
                <ul style="list-style: none; padding: 0;">
                    <li>Lorem ipsum dolor sit amet.</li>
                    <li>Lorem, ipsum.</li>
                    <li>Lorem, ipsum dolor.</li>
                    <li>Lorem ipsum dolor sit.</li>
                </ul>
            </CardBody>
            <CardFooter>                
                <TelerikButton OnClick="@(() => {})">Get Now</TelerikButton>
            </CardFooter>
        </TelerikCard>
        <TelerikCard Class="pricing-card">
            <CardHeader>
                <h3>
                    <span style="font-size: 32px; font-weight: bold;">$49</span>
                    <span style="font-size: 24px; color: #ccc;">/mo</span>
                </h3>
            </CardHeader>
            <CardBody>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, explicabo!
                </p>
                <hr />
                <ul style="list-style: none; padding: 0;">
                    <li>Lorem ipsum dolor sit amet.</li>
                    <li>Lorem, ipsum.</li>
                    <li>Lorem, ipsum dolor.</li>
                    <li>Lorem ipsum dolor sit.</li>
                </ul>
            </CardBody>
            <CardFooter>                
                <TelerikButton OnClick="@(() => {})">Get Now</TelerikButton>
            </CardFooter>
        </TelerikCard>
    </div>
</section>

Le code précédent affichera trois cartes avec des options d’abonnement, qui ont fière allure:

Ajoutons maintenant un formulaire de contact à la page.

La dernière section que nous ajouterons à la page est un formulaire de contact, afin que les clients potentiels puissent nous contacter s’ils ont des questions supplémentaires. Pour cette tâche, nous utiliserons un Composant de formulaire de blazorce qui nous permet de créer facilement toutes sortes de formes. Nous allons commencer par définir le modèle de données auquel le formulaire se liera, avec les informations que nous devons collecter, ainsi que pour définir une instance du modèle et une méthode que nous pouvons utiliser pour traiter la soumission des informations:

private Contact contact = new Contact();

public class Contact
{
    [Required(ErrorMessage = "Name is required")]
    public string Name { get; set; }

    [Required(ErrorMessage = "Email is required")]
    [EmailAddress(ErrorMessage = "Enter a valid email address")]
    public string Email { get; set; }

    
    public string Phone { get; set; }

    [Required(ErrorMessage = "Subject is required")]
    public string Subject { get; set; }

    [Required(ErrorMessage = "Message is required")]
    public string Message { get; set; }
}

private void HandleSubmit()
{
}

Ensuite, dans la section Razor du code, nous définissons le formulaire à l’aide d’un TelerikFormavec FormItems configuré en fonction du type de données d’entrée, ainsi qu’un TelerikButton Pour gérer la soumission des informations, comme indiqué dans l’exemple suivant:

<section class="section" id="contact" style="display: flex; flex-direction: column; align-items: center;">
    <h3>Contact Us</h3>
    <div>
        <TelerikForm Model="@contact" Width="500px" OnSubmit="@HandleSubmit">
            <FormValidation>
                <DataAnnotationsValidator />
            </FormValidation>
            <FormItems>
                <FormItem Field="@nameof(Contact.Name)" LabelText="Name" Hint="Enter your name" />
                <FormItem Field="@nameof(Contact.Email)" LabelText="Email" Hint="Enter your email address" />
                <FormItem Field="@nameof(Contact.Phone)" LabelText="Phone" Hint="Enter your phone number (optional)" />
                <FormItem Field="@nameof(Contact.Subject)" LabelText="Subject" Hint="Enter the subject of your inquiry" />
                <FormItem Field="@nameof(Contact.Message)" LabelText="Message" Hint="Enter your inquiry or comment" EditorType="@FormEditorType.TextArea" />
            </FormItems>
            <FormButtons>
                <TelerikButton ButtonType="ButtonType.Submit">
                    Send
                </TelerikButton>
            </FormButtons>
        </TelerikForm>
    </div>
</section>

Le résultat de l’exécution avec le code mis à jour ressemble à ceci:

Comme vous pouvez le voir, lorsque l’application est déployée, nous obtenons un bon formulaire qui servira à recevoir des questions ou des commentaires des utilisateurs.

Conclusion

Tout au long de cet article, nous avons exploré comment créer des sections d’une page de destination, y compris la barre de navigation, la section des héros, la section des logos clients, des sections de fonctionnalité, une section de tarification et une section de formulaire. Nous avons également vu comment utiliser l’interface utilisateur de Telerik pour les commandes de Blazor afin de créer rapidement les sections de la page de destination. Maintenant, c’est à votre tour de continuer à explorer plus d’idées pour créer les meilleures pages de destination.

Essayez de Telerik UI pour Blazor