Confirmation par e-mail avec l’interface utilisateur Telerik pour la boîte de dialogue ASP.NET Core

Dans cet article, nous examinerons une fonctionnalité souvent inaperçue : la possibilité d’envoyer des e-mails immédiatement à partir d’une boîte de dialogue de confirmation.

Aujourd’hui, je vais vous apprendre à concevoir une boîte de dialogue de confirmation qui demande l’approbation de l’utilisateur et envoie un e-mail lors de la confirmation, le tout dans votre application ASP.NET Core. Cette connexion transparente entre l’interaction utilisateur et le traitement backend améliore l’expérience utilisateur et rationalise le fonctionnement de votre programme.

Pour implémenter cette fonctionnalité, nous utiliserons l’interface utilisateur Telerik pour ASP.NET Core Dialogue composant.

Qu’est-ce que l’interface utilisateur Telerik pour ASP.NET Core ?

Progrès Interface utilisateur Telerik pour ASP.NET Core est une suite de bibliothèques d’interface utilisateur de qualité professionnelle composée de plus de 110 composants aux performances optimisées qui vous permettent de fournir plus rapidement des applications de haute qualité. Ses composants incluent la grille, le planificateur, le graphique, l’éditeur et bien d’autres, qui peuvent tous être personnalisés pour visualiser et gérer vos données. Il comprend également des thèmes préinstallés mais modifiables pour une apparence et une sensation professionnelles.

Ces composants sont des assistants HTML et Tag qui encapsulent les widgets de l’interface utilisateur HTML/JavaScript Kendo et les transportent vers .NET Core. Il répond à tous les besoins des applications en matière de gestion des données, de performances, d’UX, de conception et d’accessibilité, entre autres.

L’interface utilisateur de Telerik pour ASP.NET Core dispose d’un excellent support et d’une documentation primée, d’exemples de code et de formations. Vous pouvez commencer rapidement et générer de vrais résultats en quelques heures plutôt qu’en quelques mois.

Si vous voulez essayer, il est livré avec un essai gratuit de 30 jours. Il s’agit d’une excellente approche pour évaluer si elle répond à vos exigences et peut vous aider à réaliser des projets plus rapidement et plus efficacement. Que vous l’utilisiez déjà ou que vous l’appreniez pour la première fois, l’interface utilisateur Telerik pour ASP.NET Core vaut le détour !

Démarrage de la solution

Apprenons à utiliser l’interface utilisateur de Telerik pour ajouter une boîte de dialogue d’envoi d’e-mails sophistiquée afin de rendre vos applications ASP.NET Core plus attrayantes et efficaces !

1. Créez votre projet ASP.NET Core vide en suivant le menu Extensions de Visual Studio après avoir installé votre version d’évaluation ou votre licence :

2. Sélectionnez le dossier de destination :

3. Choisissez le framework cible et l’un des modèles disponibles. Dans cet article, j’utilise le modèle standard :

4. Suivez les étapes et terminez l’assistant :

Modification du code

Création du contrôleur

Nous avons commencé à créer l’interface dans le contrôleur Home et à l’ajouter au menu principal.

Au AccueilContrôleuron ajoute l’action pour le EnvoyerEmailConfirmation:

1.	    public IActionResult SendEmailConfirmation()
2.	    {
3.	        ViewData["Message"] = "Choose your plan";
4.	
5.	        return View();
6.	    }

Dans le dossier partagéau dossier _Layout.cshtmlnous ajoutons le menu d’options pour EnvoyerEmailConfirmation:

1.	  <kendo-responsivepanel name="responsive-panel" auto-close="false" breakpoint="768" orientation="top">
2.	      @(Html.Kendo().Menu()
3.	          .Name("Menu")
4.	          .Items(items =>
5.	          {
6.	              items.Add().Text("Home").Action("Index", "Home", new { area = "" });                            
7.	              items.Add().Text("Contact").Action("Contact", "Home", new { area = "" });
8.	              items.Add().Text("Confirmation").Action("SendEmailConfirmation", "Home", new { area = "" });
9.	          })
10.	      )
11.	  </kendo-responsivepanel>

Création de la vue fichier SendEmailConfirmation.cshtml dans le Voir dossier:

1.	@{
2.	    ViewData["Title"] = "Available Plans";
3.	}
4.	
5.	<section class= “jumbotron text-center”>
6.	    <div class="container">
7.	        <h1 class="jumbotron-heading">@ViewBag.Title.</h1>
8.	        <p class="lead-text text-muted">@ViewBag.Message</p>
9.	    </div>
10.	</section>
11.	
12.	<div class="row mb-3">
13.	    <div class="col-md mt-3 mb-3">
14.	        <div class="k-card">
15.	            <div class="k-card-header">
16.	                Basic
17.	            </div>
18.	            <div class="k-card-body">
19.	                <p>Ideal for small businesses or startups, this plan offers a cost-effective solution to kickstart your marketing efforts. You’ll receive 4 custom-designed monthly content cards, perfect for enhancing your social media presence and engaging with your audience. This plan includes basic customization options to align with your brand identity.</p>
20.	            </div>
21.	            <div class="k-card-actions">
22.	 
23.	            </div>
24.	        </div>
25.	    </div>
26.	
27.	
28.	    ...

Création des boutons d’option

Nous devons ajouter les options au plan de sélection de l’utilisateur final. Pour plus de commodité, j’ajouterai uniquement le code du forfait de base :

À la division <div class="k-card-actions"> on ajoute les boutons Annuler et Confirmer:

1.	    @(Html.Kendo().Button()
2.	        .Name("cancelBasic")
3.	        .Content("Cancel")
4.	        .Events(ev => { ev.Click("closePage"); }))
5.	
6.	    @(Html.Kendo().Button()
7.	        .Name("confirmBasic")
8.	        .Content("Confirm")
9.	        .ThemeColor(ThemeColor.Primary)
10.	        .HtmlAttributes(new { type = "button", param = "BASIC" })
11.	        .Events(ev => {  ev.Click("sendConfirmation"); }))

Le confirmerBasique Le bouton ajoute le type de régime chaîne dans l’attribut param en utilisant le HtmlAttributes() méthode.

La couleur primaire dépend du thème utilisé. Ajoutez-le au bouton en utilisant la méthode ThèmeCouleur()avec la propriété ThemeColor.Primary.

Nous répétons le processus pour les forfaits pro et premium.

Création de la boîte de dialogue

Créons le dialogue :

1.	@(Html.Kendo().Dialog()
2.	            .Name("dialog")
3.	            .Title("Plan confirmation") 
4.	            .Width(400)
5.	            .Modal(true)
6.	            .Visible(false)
7.	            .Actions(actions =>
8.	            {
9.	                actions.Add().Text("Cancel").Action("closePage");
10.	                actions.Add().Text("Send").Action("sendEmail").Primary(true);
11.	           }))

Dans ce code, nous avons ajouté le Visible(false) option qui empêchera la boîte de dialogue d’apparaître lors du chargement de la page.

Nous avons également configuré nos boutons d’action. Nous avons le Annuler et le Envoyer boutons dans cet exemple. Les actions spécifiées pour les boutons sont définies dans les fonctions JavaScript ci-dessous :

1.	<script>
2.	    let typePlan = "";    
3.	
4.	    function sendEmail() {
5.	
6.	        var TypePlan = typePlan;
7.	
8.	        $.ajax({
9.	            url: '/SendEmail/SendEmail',
10.	            type: ‘POST’,
11.	            data: { TypePlan: TypePlan },
12.	            success: function (response) {
13.	                $('#dialogSuccess').data("kendoDialog").open();
14.	            },
15.	            error: function (error) {
16.	                $('#dialogError').data("kendoDialog").open();
17.	            }
18.	        });
19.	    }
20.	    function sendConfirmation() {
21.	        typePlan = this.element.attr("param");        
22.	        $('#dialog').html("<p>You are about to confirm your " + typePlan + " plan.</p>");
23.	        $('#dialog').data("kendoDialog").open();
24.	    }     
25.	
26.	    function closePage() {
27.	        window.location.href = '@Url.Action("Index", "Home")';
28.	    }
29.	</script>

Dans le sendConfirmation() fonction, nous lisons le plan type à partir du param attribut, ajoutez à la boîte de dialogue le contenu HTML du message portant le nom du plan et appelez l’attribut open() méthode pour afficher la boîte de dialogue.

Ajout de boîtes de dialogue supplémentaires en cas de réussite et d’erreur lors de l’envoi de l’e-mail de confirmation :

1.	@(Html.Kendo().Dialog()
2.	        .Name("dialogSuccess")
3.	        .Title("Success")
4.	        .Content("<p>Your subscription confirmation was send to your email account.<p>")
5.	        .Width(400)
6.	        .Modal(true)
7.	        .Visible(false)
8.	        .Actions(actions =>
9.	        {
10.	            actions.Add().Text("Close").Action("closePage").Primary(true);
11.	        }))
12.	
13.	@(Html.Kendo().Dialog()
14.	        .Name("dialogError")
15.	        .Title("Error")
16.	        .Content("<p>Occured an error sending your subscription to your email account. Please, try again later.<p>")
17.	        .Width(400)
18.	        .Modal(true)
19.	        .Visible(false)
20.	        .Actions(actions =>
21.	        {
22.	            actions.Add().Text("Close").Action("closePage").Primary(true);
23.	        })) 

Code derrière

Dans ce cas, nous créons un Controller SendEmailController.cs spécifique qui est appelé depuis JavaScript ajax :

1.	$.ajax({
2.	            url: '/SendEmail/SendEmail',

Code source pour SendEmailController.cs :

1.	using Microsoft.AspNetCore.Mvc;
2.	using System.Net.Mail;
3.	using TelerikAspNetCoreApp1.CodeCS;
4.	
5.	namespace TelerikAspNetCoreApp1.Controllers;
6.	public class SendEmailController : Controller
7.	{
8.	    public IActionResult SendEmail(string typePlan)
9.	    {
10.	        try
11.	        {
12.	            var email = new EmailSender(new SmtpClient());
13.	
14.	            email.SendEmail("customer@email.com", "Confirmation " + typePlan, "This is the confirmation for your plan " + typePlan);
15.	            
16.	            return StatusCode(StatusCodes.Status200OK);
17.	        }
18.	        catch 
19.	        {
20.	#if (DEBUG)
21.	            return StatusCode(StatusCodes.Status200OK);
22.	#else
23.	            return StatusCode(StatusCodes.Status500InternalServerError);
24.	#endif
25.	        }
26.	    }
27.	}

Nous pouvons créer un dossier appelé CodeCS et ajoutez le EmailSender classe:

1.	namespace TelerikAspNetCoreApp1.CodeCS;
2.	 
3.	using System.Net.Mail; 
4.	
5.	public class EmailSender
6.	{
7.	    private SmtpClient _smtpClient;
8.	
9.	    public EmailSender(SmtpClient smtpClient)
10.	    {
11.	        _smtpClient = smtpClient;
12.	    }
13.	
14.	    public void SendEmail(string emailTo, string subject, string message)
15.	    {
16.	        var mailMessage = new MailMessage("noreply@progress.com", emailTo, subject, message);
17.	        _smtpClient.Send(mailMessage);
18.	    }
19.	}

Pour que ce code fonctionne, ajoutez votre SmtpClient() paramètres, ajustez le MailMessageet obtenez le emailTo de votre utilisateur actuellement connecté.

Résultat

Voici la page principale pour choisir le plan :

Pressage Confirmer sur la case Premium affiche la boîte de dialogue de confirmation :

Pressage Envoyer soulève le message de réussite :

Consultez le code source sur mon GitHubet vous pouvez le débourser à tout moment.

Conclusion

Avec l’interface utilisateur Telerik pour ASP.NET Core, il est facile pour les boîtes de dialogue d’envoyer des événements aux actions. Les utilisateurs peuvent faire plus en moins de temps car ils peuvent accéder immédiatement à de nombreuses tâches différentes.

Inscrivez-vous pour un essai gratuit sur le site Telerik pour commencer immédiatement à créer des solutions de données précieuses. Même pendant votre essai gratuit, vous bénéficierez de l’aide de l’équipe Telerik, la meilleure du secteur.