Ensembles d'outils Telerik pour les formulaires Web ASP.NET et Blazor: partie 3

Voici la troisième partie d'un guide permettant aux développeurs de se familiariser rapidement avec l'idée générale des formulaires Web ASP.NET et de Blazor, et ce que Telerik a à offrir pour les deux technologies.

(Consultez Partie 1 ici et Partie 2 ici .)

Après avoir comparé les avantages et les inconvénients des formulaires Web ASP.NET et Blazor et des boîtes à outils Telerik respectives pour les deux plates-formes Web, passons à la création d'une marque. nouvelle application Blazor et découvrez des exemples simples de la vie réelle sur la façon de créer un formulaire de soumission ainsi que sur la configuration de la liaison de données de la grille Web Forms et de son homologue Blazor.

Read: A Beginner's Guide to Blazor [19659005] Premiers pas

Suggestions pour créer une nouvelle application Blazor

Lorsque vous démarrez votre nouvelle application ASP.NET Blazor, nous vous suggérons fortement de consulter notre page d'introduction: Bienvenue dans l'interface utilisateur Telerik pour Blazor .

Il contient la mise en route, les ressources d'apprentissage et les étapes suivantes sectio ns, qui vous guidera tout au long du processus pour avoir une application en cours d'exécution en un rien de temps.

Maintenant, si vous avez un projet déjà existant et que vous souhaitez obtenir les mêmes fonctionnalités dans la nouvelle application, vous devrez effectuer la migration manuellement . La conversion d'une application Web Forms en une nouvelle application Blazor demandera un certain effort, mais cela reste possible.

L'interface utilisateur Telerik pour Blazor est livrée avec des exemples que vous pouvez utiliser pour connaître ses fonctionnalités et les appliquer dans des scénarios réels:

Notre équipe a également préparé un guide détaillé pour démarrer avec Blazor: Un guide de démarrage rapide de la productivité avec Blazor par Ed Charbeneau .

Nous avons également pensé que partager du code dans ce document profiterait à notre les lecteurs ont un coup d'œil direct sur la syntaxe elle-même. Les deux sections suivantes présentent deux scénarios différents couramment utilisés par nos clients dans n'importe quel ensemble d'outils:

• Exemple de formulaire de soumission
• Exemple de grille liée aux données

Un autre cas courant est la mise en œuvre de grilles hiérarchiques (détail / imbriquées / enfant) et modèles pour les éléments de la grille principale. Telerik Grid for Blazor fournit cette fonctionnalité intégrée par défaut via l'option Modèle de détail . Cette application de tableau de bord en direct utilise également la fonction de hiérarchie mentionnée: Exemple de tableau de bord – Problèmes .

Voici une autre approche de chargement à la demande extrêmement simple à mettre en œuvre: Charger des données à la demande dans une grille hiérarchique .

Pour obtenir quelque chose de plus spécifique ou pour demander un échantillon de POC, vous pouvez utiliser le Forums ou système de billetterie pour contacter nos experts de l'assistance afin de vous aider dans le processus.

Soumettre un échantillon de formulaire

Exemple de comparaison: formulaire de base avec entrée, bouton et validation

Cet exemple montre l'implémentation de base d'un formulaire de soumission pour comparer la syntaxe des deux technologies.

Page Web Forms — SubmitFormSample.aspx

 
 
 
 
 
 
 
 <telerik: ID RadTextBox = " RadTextBox1 "runat =" server "
 EmptyMessage =" Enter Value "> 
 
 <asp: RequiredFieldValidator ID =" RequiredFieldValidator1 "runat =" server "
 ErrorMessage =" * Ce champ ne peut pas être vide " ForeColor = "Crimson" 
 ControlToValidate = "RadTextBox1" Style = "display: block; margin: 10px 0 20px 0; "> 
 
 <telerik: RadLabel ID =" RadLabel1 "runat =" server "Text =" Output "
 Style =" display: block; margin-bottom: 20px; "> 
 
 <telerik: RadButton ID =" RadButton1 "runat =" server "Text =" Submit Form "
 Primary =" true "OnClick =" RadButton1_Click "> 
 
 

Page Blazor — SubmitFormSample.razor

 @using System.ComponentModel.DataAnnotations 

 
 

 
 
 @SuccessMessage 
  Submit Form  ] 
  

Web Forms Code-Behind — SubmitFormSample.aspx.cs

 using System; 
 public partial class SubmitFormSample: System.Web.UI.Page 
 {
 protected void RadButton1_Click (expéditeur de l'objet, EventArgs e) 
 {
 RadLabel1.Text = "Formulaire soumis avec succès" + 
 "
 Value:" + RadTextBox1.Text; 
} 
} [19659035] Logique du code serveur Blazor (même page) 
 @code {
 class TextValidationModel 
 {
 [Required]
 chaîne publique Text {get; ensemble; } 
} 
 TextValidationModel validationModel = new TextValidationModel (); 
 string SuccessMessage = "Output"; 



  


               



 async void HandleValidSubmit () 
 {
 SuccessMessage = "Formulaire envoyé avec succès Valeur:" + validationModel.Text; 
 await Task.Delay (1000); 
 StateHasChanged (); 
} 
} 
 Data-Bound Grid Sample
 Exemple de comparaison: configuration de grille et liaison [19659007] Un autre scénario courant pour les applications en temps réel consiste à contenir un composant de grille. Cet exemple montre la configuration de base d'une grille Web Forms et de son équivalent Blazor.
 Telerik Grid pour Web Forms AJAX
  
 (Cliquez pour agrandir l'image) 
 Telerik Grid for Blazor
  
 (Cliquez pour agrandir l'image) 
 Page Web Forms - RadGridSample.aspx

 <telerik: RadGrid ID = "RadGrid1" runat = "server" AllowPaging = "True" CellSpacing = "0" 
 GridLines = "None" Width = "1500px" OnNeedDataSource = "RadGrid1_NeedDataSource" 
 AllowFilteringByColumn = "true" AllowMultiRowSelection = "true" ShowGroupPanel = "t rue "
 Height =" 1000px "> 
 
 
 
 
 
 
 <MasterTableView AutoGenerateColumns =" ​​False "DataKeyNames =" OrderID "
 EditMode =" InPlace "CommandItemDisplay =" Top "ShowGroupFooter =" true "> 
 
 
 
 
 
 <telerik: GridBoundColumn DataField =" OrderID "DataType =" System.Int32 "
 FilterControlAltText = "Colonne Filter OrderID" HeaderText = "Order ID" 
 ReadOnly = "True" SortExpression = "OrderID" UniqueName = "OrderID" 
 FilterControlWidth = "40px" Aggregate = "Count"> 
 
 ] 
 <telerik: GridDateTimeColu mn DataField = "OrderDate" DataType = "System.DateTime" 
 FilterControlAltText = "Filter OrderDate column" HeaderText = "Order Date" 
 SortExpression = "OrderDate" UniqueName = "OrderDate" 
 DataFormatString = "{0 : d} "> 
 
 <telerik: GridNumericColumn DataField =" Freight "DataType =" System.Decimal "
 FilterControlAltText =" Filter Freight column "HeaderText =" Freight "
 SortExpression =" Freight " UniqueName = "Freight" FilterControlWidth = "140px" 
 Aggregate = "Sum" FooterAggregateFormatString = "Sum: {0: C}"> 
 
 <telerik: GridBoundColumn DataField = "ShipName" 
 FilterControlAlt "Filtrer la colonne ShipName" HeaderText = "Ship Name" 
 SortExpression = "ShipName" UniqueN ame = "ShipName"> 
 
 <telerik: GridBoundColumn DataField = "ShipCity" 
 FilterControlAltText = "Filter ShipCity column" HeaderText = "Ship City" 
 SortExpression = "ShipCity" UniqueName = "ShipCity" > 
 
 
 
 
 
 
 
 
 
 
 
 <telerik: RadButton ID = "RadButton1" runat = "server "Text =" Update "
 CommandName = '<%# Container is IGridInsertItem?"PerformInsert":"Update" %>'> 
 
 
 
 
 
 
 
 
 
 
 Blazor Page — RadGridSample.razor

 <TelerikGrid Data = @ GridData FilterMode = "@ GridFilterMode.FilterRow" Pageable = true Width = "1500px" 
 SelectionMode = "@ GridSelectionMode.Multiple" Groupable = "true" EditMode = "@ GridEditMode.Inline" 
 Height = "1000px"> 
 
  Ajouter un produit 
 <GridCommandButton Command = "ExcelExport" Icon = "@ IconName.FileExcel" 
 Class = "excelButton"> Exporter vers Excel [19659101] 
 
 
 
 
  Count: @ context.Count 
 
 
 
 
 
 
 
 
  Sum: @ context.Sum 
 
 
 
 
 
  
  
  Mise à jour 
  Annuler 
 
 
 
 
 
 
 
 Web Forms— RadGridSample.aspx.cs
 using System; 
 using System.Data; 
 using Telerik.Web.UI; 
 public partial class RadGridSample: System.Web.UI.Page 
 {
 {
 ] Protected void RadGrid1_NeedDataSource (expéditeur de l'objet, GridNeedDataSourceEventArgs e) 
 {
 RadGrid1.DataSource = GetGridSource (); 
} 
 private DataTable GetGridSource () 
 {
 DataTable dataTable = new DataTable (); 
 DataColumn column = new DataColumn () ; 
 column.DataType = Type.GetType ("System.Int32"); 
 column.ColumnName = "OrderID"; 
 dataTable.Columns.Add (column); 
 column = new DataColumn ( ); 
 column.DataType = Type.GetType ("System.DateTime"); 
 column.ColumnName = "OrderDate"; 
 dataTable.Columns.Add (column); 
 column = new DataColumn (); 
 column.DataType = Type.GetType ("System.Decimal"); 
 column.ColumnName = "Freight"; 
 dataTable.Columns.Add (column); 
 column = new DataColumn (); 
 column.DataType = Type.GetType ("System.String"); 
 column.ColumnName = "ShipName"; 
 dataTable.Columns.Add (column); 
 column = new DataColumn (); 
 column.DataType = Type.GetType ("System.String"); 
 column.ColumnName = "ShipCity"; 
 ] DataTable.Columns.Add (colonne); 
 DataColumn [] PrimaryKeyColumns = new DataColumn [1]; 
 PrimaryKeyColumns [0] = dataTable.Columns ["OrderID"]; 
 dataTable.PrimaryKey Primarys 19659047] 
 pour (int i = 0; i <80; i ++) 
 {
 DataRow row = dataTable.NewRow (); 
 row ["OrderID"] = i; 
 row ["OrderDate"] = new DateTime (2016, 9, 15) .AddDays (i% 7); 
 row ["Freight"] = i * 10; 
 row ["ShipName"] = "ShipName" + i; 
 row ["ShipCity"] = "ShipCity" + (i% 15); 
 dataTable.Rows.Add (row); 
} 
 return dataTable; 
} 
} 
 Blazor Code (même page que ci-dessus)
 @code {
 public class Order 
 {
 public int OrderID {get; ensemble; } 
 public décimal? Fret {get; ensemble; } 
 public DateTime OrderDate {get; ensemble; } 
 chaîne publique ShipName {get; ensemble; } 
 chaîne publique ShipCity {get; ensemble; } 
} 
 public IEnumerable  GridData {get; ensemble; } 
 protected override void OnInitialized () 
 {
 GridData = Enumerable.Range (0, 80) .Select (i => new Order () 
 {
 OrderID = i, 
 ] Freight = i * 10, 
 OrderDate = new DateTime (2016, 9, 15) .AddDays (i% 7), 
 ShipName = "ShipName" + i, 
 ShipCity = "ShipCity" + ( i% 15) 
}); 
} 
 
 Conclusion
 Rhino vs Dolphin
 Ces deux animaux sont des mammifères mais vivent dans des environnements différents où ils excellent. De même, les formulaires Web et Blazor font partie de la famille ASP.NET, mais ils présentent des avantages et des points forts différents. Lorsque vous commencez à travailler sur une nouvelle application et que vous souhaitez décider quelle technologie choisir, il serait judicieux de dessiner une image des résultats attendus et des ressources dont vous disposez.
 
 Telerik a une forte présence et un engagement fort pour ces technologies et notre Une équipe d'assistance dédiée et expérimentée est prête à répondre à toutes les questions de migration qui pourraient survenir.
 Vous pouvez également trouver un document similaire expliquant et comparant  Telerik Toolsets for ASP.NET Web Forms and Core .
   Lire: Partie 1 de cette série de blogs 
   Lire: Partie 2 de cette série de blogs