Review of Telerik Toolsets for ASP.NET Web Forms and Blazor: Part 3

Here’s Part 3 of a guide for developers to familiarize themselves quickly with the overall idea of ASP.NET Web Forms and Blazor, and what Telerik has to offer for both technologies.

(Check out Part 1 here and Part 2 here.)

After comparing the pros and cons of ASP.NET Web Forms and Blazor and the respective Telerik toolkits for both web platforms, let’s move on how to start a brand new Blazor app as well as dive in to some simple real-life examples on how to build a submit form as well as to configure the databinding of the Web Forms grid and its Blazor counterpart.

Read: A Beginner's Guide to Blazor

First Steps

Suggestions for building a new Blazor App

When starting your new ASP.NET Blazor App, we highly suggest that you check our Introduction page: Welcome to Telerik UI for Blazor.

It contains the getting started, learning resources and next steps sections, which will guide you through the process to have a running app in no time.

Now, if you have an already existing project and want to achieve the same functionality in the new app, you will need to do the migration manually. Converting a Web Forms app to a new Blazor app will require some effort, but it is still possible to achieve.

Telerik UI for Blazor comes packed with samples you can use to learn its capabilities and apply them in real-case scenarios:

• Live Demos
• Documentation
• Knowledge Base
• Telerik UI for Blazor Sample Projects
• Telerik Blazor Blogs

Our team also prepared a detailed guide for getting started with Blazor: A quick start guide to productivity with Blazor by Ed Charbeneau.

We also thought that sharing some code in this document will benefit our readers to have a direct comparing glance at the syntax itself. The following two sections will present two different scenarios used commonly by our customers in any toolset:

• Submit Form Sample
• Data-Bound Grid Sample

Another common case is implementing hierarchy (detail/nested/child) grids and templates for the main grid items. Telerik Grid for Blazor provides this functionality built-in by default via the Detail Template option. This live dashboard app also uses the mentioned hierarchy feature: Sample Dashboard—Issues.

Here is another extremely easy to implement load-on-demand approach: Load data on demand in a Hierarchy Grid.

For achieving anything more specific or inquiring a POC sample, you can use the Forums or Ticketing system to contact our support experts to assist you in the process.

Submit Form Sample

Comparison example: basic form with input, button and validation

This example demonstrates basic implementation of a submit form to compare the syntax in both technologies.

Web Forms Page—SubmitFormSample.aspx

<form id="form1" runat="server">

    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">

        <Scripts>

            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

        </Scripts>

    </telerik:RadScriptManager>

    <telerik:RadTextBox ID="RadTextBox1" runat="server"

        EmptyMessage="Enter Value">

    </telerik:RadTextBox>

    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"

        ErrorMessage="*This field cannot be empty" ForeColor="Crimson"

        ControlToValidate="RadTextBox1" Style="display: block; margin: 10px 0 20px 0;">

    </asp:RequiredFieldValidator>

    <telerik:RadLabel ID="RadLabel1" runat="server" Text="Output"

        Style="display: block; margin-bottom: 20px;">

    </telerik:RadLabel>

    <telerik:RadButton ID="RadButton1" runat="server" Text="Submit Form"

        Primary="true" OnClick="RadButton1_Click">

    </telerik:RadButton>

</form>
 

Blazor Page—SubmitFormSample.razor

@using System.ComponentModel.DataAnnotations



<EditForm Model="@validationModel" OnValidSubmit="@HandleValidSubmit">

    <DataAnnotationsValidator />



    <TelerikTextBox @bind-Value="@validationModel.Text" Label="Enter Value"></TelerikTextBox><br /><br />



    <ValidationSummary></ValidationSummary>

    <p>@SuccessMessage</p>



    <TelerikButton Primary="true">Submit Form</TelerikButton>

</EditForm>

Web Forms Code-Behind—SubmitFormSample.aspx.cs

using System;



public partial class SubmitFormSample : System.Web.UI.Page

{

    protected void RadButton1_Click(object sender, EventArgs e)

    {

        RadLabel1.Text = "Form successfully submitted" +

            "<br/>Value: " + RadTextBox1.Text;

    }

}

Blazor server code logic (same page)

@code  {

    class TextValidationModel

    {

        [Required]

        public string Text { get; set; }

    }



    TextValidationModel validationModel = new TextValidationModel();

    string SuccessMessage = "Output";



    async void HandleValidSubmit()

    {

        SuccessMessage = "Form successfully submitted Value: " + validationModel.Text;

        await Task.Delay(1000);

        StateHasChanged();

    }

}

Data-Bound Grid Sample

Comparison example: grid configuration and binding

Another common scenario for real-time applications is to contain a grid component. This example shows the basic configuration of a Web Forms grid and its Blazor counterpart.

Telerik Grid for Web Forms AJAX

(Click to make image larger)

Telerik Grid for Blazor

(Click to make image larger)

Web Forms Page – RadGridSample.aspx

        <style>

            .rgFooter {

                font-weight: bold;

            }

        </style>

        <telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" CellSpacing="0"

            GridLines="None" Width="1500px" OnNeedDataSource="RadGrid1_NeedDataSource"

            AllowFilteringByColumn="true" AllowMultiRowSelection="true" ShowGroupPanel="true"

            Height="1000px">

            <ItemStyle Height="70px" />

            <AlternatingItemStyle Height="70px" />

            <ClientSettings AllowDragToGroup="true">

                <Scrolling AllowScroll="true" UseStaticHeaders="true" />

                <Selecting AllowRowSelect="true" />

            </ClientSettings>

            <MasterTableView AutoGenerateColumns="False" DataKeyNames="OrderID"

                EditMode="InPlace" CommandItemDisplay="Top" ShowGroupFooter="true">

                <CommandItemSettings ShowExportToExcelButton="true" ShowRefreshButton="false" />

                <Columns>

                    <telerik:GridClientSelectColumn UniqueName="SelectColumnName">

                        <HeaderStyle Width="55px" />

                    </telerik:GridClientSelectColumn>

                    <telerik:GridBoundColumn DataField="OrderID" DataType="System.Int32"

                        FilterControlAltText="Filter OrderID column" HeaderText="Order ID"

                        ReadOnly="True" SortExpression="OrderID" UniqueName="OrderID"

                        FilterControlWidth="40px" Aggregate="Count">

                        <HeaderStyle Width="100px" />

                    </telerik:GridBoundColumn>

                    <telerik:GridDateTimeColumn DataField="OrderDate" DataType="System.DateTime"

                        FilterControlAltText="Filter OrderDate column" HeaderText="Order Date"

                        SortExpression="OrderDate" UniqueName="OrderDate"

                        DataFormatString="{0:d}">

                    </telerik:GridDateTimeColumn>

                    <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:GridNumericColumn>

                    <telerik:GridBoundColumn DataField="ShipName"

                        FilterControlAltText="Filter ShipName column" HeaderText="Ship Name"

                        SortExpression="ShipName" UniqueName="ShipName">

                    </telerik:GridBoundColumn>

                    <telerik:GridBoundColumn DataField="ShipCity"

                        FilterControlAltText="Filter ShipCity column" HeaderText="Ship City"

                        SortExpression="ShipCity" UniqueName="ShipCity">

                    </telerik:GridBoundColumn>

                    <telerik:GridTemplateColumn ReadOnly="false">

                        <ItemTemplate>

                            <telerik:RadButton ID="RadButton1" runat="server" Text="Edit" CommandName="Edit">

                                <Icon PrimaryIconCssClass="rbEdit" />

                            </telerik:RadButton>

                            <telerik:RadButton ID="RadButton2" runat="server" Text="Delete" CommandName="Delete">

                                <Icon PrimaryIconCssClass="rbRemove" />

                            </telerik:RadButton>

                        </ItemTemplate>

                        <EditItemTemplate>

                            <telerik:RadButton ID="RadButton1" runat="server" Text="Update"

                                CommandName='<%# Container is IGridInsertItem?"PerformInsert":"Update" %>'>

                                <Icon PrimaryIconCssClass="rbOk" />

                            </telerik:RadButton>

                            <telerik:RadButton ID="RadButton2" runat="server" Text="Cancel" CommandName="Cancel" CausesValidation="false">

                                <Icon PrimaryIconCssClass="rbCancel" />

                            </telerik:RadButton>

                        </EditItemTemplate>

                    </telerik:GridTemplateColumn>

                </Columns>

            </MasterTableView>

        </telerik:RadGrid>

Blazor Page—RadGridSample.razor

<style>

    .excelButton {

        float: right;

    }

</style>

<TelerikGrid Data=@GridData FilterMode="@GridFilterMode.FilterRow" Pageable=true Width="1500px"

             SelectionMode="@GridSelectionMode.Multiple" Groupable="true" EditMode="@GridEditMode.Inline"

             Height="1000px">

    <GridToolBar>

        <GridCommandButton Command="Add" Icon="add">Add Product</GridCommandButton>

        <GridCommandButton Command="ExcelExport" Icon="@IconName.FileExcel"

                           Class="excelButton">Export to Excel</GridCommandButton>

    </GridToolBar>

    <GridColumns>

        <GridCheckboxColumn SelectAll="true"></GridCheckboxColumn>

        <GridColumn Field=@nameof(Order.OrderID) Title="Order ID">

            <GroupFooterTemplate>

                <b>Count : @context.Count</b>

            </GroupFooterTemplate>

        </GridColumn>

        <GridColumn Field=@nameof(Order.OrderDate) Title="Order Date">

            <Template>

                @(string.Format("{0:d}", (context as Order).OrderDate))

            </Template>

        </GridColumn>

        <GridColumn Field=@nameof(Order.Freight)>

            <Template>

                @(string.Format("{0:C}", (context as Order).Freight))

            </Template>

            <GroupFooterTemplate>

                <b>Sum : @context.Sum</b>

            </GroupFooterTemplate>

        </GridColumn>

        <GridColumn Field=@nameof(Order.ShipName) Title="Ship Name" />

        <GridColumn Field=@nameof(Order.ShipCity) Title="Ship City" />

        <GridCommandColumn>

            <GridCommandButton Command="Edit" Icon="edit"></GridCommandButton>

            <GridCommandButton Command="Delete" Icon="delete"></GridCommandButton>

            <GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</GridCommandButton>

            <GridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</GridCommandButton>

        </GridCommandColumn>

    </GridColumns>

    <GridAggregates>

        <GridAggregate Field=@nameof(Order.OrderID) Aggregate="@GridAggregateType.Count" />

        <GridAggregate Field=@nameof(Order.Freight) Aggregate="@GridAggregateType.Sum" />

    </GridAggregates>

</TelerikGrid> 

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(object sender, 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(column);

            

                    DataColumn[] PrimaryKeyColumns = new DataColumn[1];

                    PrimaryKeyColumns[0] = dataTable.Columns["OrderID"];

                    dataTable.PrimaryKey = PrimaryKeyColumns;

            

                  

                    for (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 (same page as above)

 @code {

                public class Order

                {

                    public int OrderID { get; set; }

                    public decimal? Freight { get; set; }

                    public DateTime OrderDate { get; set; }

                    public string ShipName { get; set; }

                    public string ShipCity { get; set; }

                }

            

                public IEnumerable<Order> GridData { get; set; }

            

                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

Both these animals are mammals but inhabit different environments where they excel. Similarly, both the Web Forms and Blazor are part of the ASP.NET family, but they have different advantages and strengths. When you begin working on a new app and want to decide which technology to pick, it would be a good idea to draw a picture of the expected result requirements and the resources you have at hand.

Rhinos are the fastest mammals weighing over a ton. They have a solid powerful build, which can cause the ground under them to tremble. Not only that, but they have a surprisingly rapid acceleration, too. Being in development since the era of ASP.NET for 18 years, Telerik UI for ASP.NET AJAX (RadControls for Web Forms) resemble this by providing a bulk of components of every kind which you can then use to build an app from the ground up in no time. You will have abundance of options, templates, forums, ready-to-go complex implementations tailored for any kind of scenario. And if you have some experienced devs on your fingertips to leverage this kind of tooling, Web Forms becomes a very strong contender.

Dolphins, on the other hand, are slick and nimble. They are also famous for their approachable attitude. Blazor allows people who have knowledge in server-side languages like C# to dive into the rich coral reef of Web Development. No JavaScript required (in the long run). Additionally, it follows modern trends and welcomes people familiar with reactive type of events from Angular, React or Vue. With a unique and frequent schedule of releases, it quickly catches up with other toolsets. This means that if you are anticipating a specific feature, you won’t need to wait for it couple of months. If building a functioning app in a quick and convenient way on Windows, Linux, and macOS matters to your team, definitely go on and create at least one Telerik Blazor app.

Telerik has strong presence and commitment for both these technologies and our dedicated and experienced support team is ready to assist with any migration questions that may arise.

You can also find a similar document explaining and comparing Telerik Toolsets for ASP.NET Web Forms and Core.

Read: Part 1 of this blog series

Read: Part 2 of this blog series