Hey guys, I am Venkat. In this video and in our upcoming videos in this series, we'll discuss
how to create a real world Blazor WebAssembly application from scratch. We'll be using Visual
Studio 2019 and .NET 5.0. Fire up Visual Studio 2019. Click on "Create a new project". On this
screen, search for "Blazor". As you can see from the search results, we have two Blazor templates.
As the names imply, Blazor Server App template creates a Blazor server project and it runs on the
server. Blazor WebAssembly app template creates a Blazor web assembly project and it runs in the
client browser. We discussed the differences between Blazor server and Blazor WebAssembly
in detail in this video. I'll include the link in the description of this video. In our case,
we want to create a Blazor WebAssembly app, so let's select this template and then click
Next. Provide a name for the project. I'm going to name it "BlazorProject". A location
where you want this project to be created. Let's create it in "C:\Projects" folder and
a name for the solution. Let's name the solution "BlazorWebAssemblyTutorial" and then click "Next".
Target Framework, we have two choices .NET Core 3.1 and .NET 5.0. Dot Net 5.0 is the latest,
so let's select that and as far as authentication type is concerned, for now let's select "None"
and I'm going to check all these three check boxes - Configure for HTTPS, ASP.NET Core Hosted
and Progressive Web Application. We discussed what is a progressive web app in detail in this video.
If you want to check it out, I will include the link in the description of this video. What does
this check box ASP.NET Core hosted do? Well, three projects are created when this checkbox
is checked. YourProjectName.Server, .Client and .Shared. Actually, let's see this in action. In
Visual Studio, with all the three check boxes checked, let's click on this "Create" button.
There we go, we have three projects created - BlazorProject.Client, BlazorProject.Server
and BlazorProject.Shared. The Server project that is the project with .Server in its name hosts the
Blazor Client project. The Blazor client project runs directly in the client browser. So, when the
first request is made, everything the application needs, that is the compiled application,
its dependencies and the dot net run time are downloaded to the client browser from
the server where it is hosted. The server that hosts the Blazor client application doesn't
necessarily have to be an ASP.NET Core server. You can host it on any server. With the "ASP.NET Core
hosted" check box checked, we get a server project that hosts the Blazor client project and that's
what exactly happened now. If we do not check this check box, we get only one project and we can host
our Blazor web assembly project on any server of our choice. Actually, let's quickly see this
in action. I have another brand new instance of Visual Studio 2019 running. Let's create
a new project. We want to create a Blazor web assembly project. So, let's search for Blazor.
Select Blazor WebAssembly App and then click "Next". Provide a name for the project. Let's
call this "BlazorWasm" and we want to create it in "C:\Projects" folder and the solution name is
also "BlazorWasm" and let's click "Next". Target framework - .NET 5.0. Authentication Type - None.
We're going to leave ASP.NET Core hosted checkbox unchecked and then let's click "Create".
There we go, our project is created and notice in the solution explorer,
we now have only one project and that is our Blazor web assembly project. we don't have that
ASP.NET Core Server project. As a matter of fact, we don't necessarily have to always
host Blazor WebAssembly project in an asp.net core server, we can host it
in any server of our choice. The only difference is when we check the checkbox ASP.NET Core hosted,
we get an asp.net core server project using which we can host our Blazor WebAssembly project. Now,
in our case we're going to use sp.net core server to host our Blazor web assembly project, so we're
going to use this solution that we have created with "ASP.NET Core hosted" checkbox checked. Now,
we also have a third project with ".Shared" in its name. As the name implies, it contains resources
that are shared by both - client and server projects. If we expand the "Dependencies" folder
and take a look at the "Project Dependencies" notice, this client project has a dependency
on the shared project. Similarly, if we take a look at the dependencies of the server project,
it also has a dependency on the "Shared" project. Now, as we progress through this course, we'll be
building "Employee Management System" that allows us to create, read, update and delete employees
and for that, the following are the three model classes we need. Gender, actually Gender is an
enum, not a class and then, these two classes - Department and Employee. In the interest of time,
I've already created these three model classes in the Shared project. Notice, we have our
Department, Employee and Gender. So, if you want to follow along and need the code for these three
models, I'll have it available on my blog and include the link in the description of this video.
Now, here's what we want to do, display a list of employees using data grid component. The grid that
we are using here is Syncfusion Grid component. It is very powerful and offers several features
like adaptive UI, touch support, globalization and localization, sorting, paging, filtering,
supports all the CRUD operations, aggregated column values, export to excel, pdf and csv. We
will discuss implementing some of these features in our upcoming videos. Now, if you're wondering
why should we use Syncfusion Blazor components? Well, there are over 70 plus components and all
these work with both Blazor server and client side projects seamlessly. Every component is fine-tuned
to work with a high volume of data, so performance should not be an issue. Very good documentation
and unlimited dedicated support from Syncfusion. You will be amazed by the power and functionality
these components bring to your Blazor apps. They are very easy to integrate, configure and use.
Each Syncfusion Blazor component is available as a separate Nuget package. In our case,
we want to use the Syncfusion grid component. So, in the solution explorer,
right click on the Blazor client project and select this option - Manage Nuget
Packages. Make sure, you're on the "Browse" tab and then search for
"Syncfusion.Blazor.Grid". Select the first option and then click "Install". As you can see,
this package has a dependency on several other packages. All these dependencies will also be
automatically installed. So, click OK. I Accept. There we go, the grid component is successfully
installed. Next, for styling we need to reference Syncfusion Bootstrap theme file in index.html file
and index.html file is in this "wwwroot" folder. So, let's open that and in the section,
let's include a reference to Syncfusion Bootstrap theme file. Next, we need to include two using
declarations in this "imports.razor" file - Syncfusion.Blazor and Syncfusion.Blazor.Grids
and finally we need to register Syncfusion Blazor service and in a Blazor web assembly
project we do that in this "Program.cs" file. So let's open it. Just one line of code here,
builder.services.AddSyncfusionBlazor(). We have a red squiggly and that's because we are
missing a namespace - Syncfusion.Blazor. Let's bring that in by pressing CTRL.
With all these changes so far, let's run our solution by pressing CTRL + F5.
There we go, our app is up and running. At the moment, we are at the root application URL and we
are looking at index.razor component. When I click on "Counter", the URL changes to "/counter" and we
are looking at the "counter" component. Similarly, when we click on "Fetch data", again the URL
changes to "fetchdata" and we see the "fetchdata" component. If you're wondering, where are all
these components coming from? Well, they're coming from the "Pages" folder. So, if we take a look at
this "Pages" folder, notice we have our three components here - index, fetchdata and counter.
At the moment, the index component displays this "hello world" message. Instead, let's use
the Syncfusion Grid component and display list of employees. So, from the pages folder, open
"index.razor". We want to write some C# code in this component. So, for that let's include @code
block. Let me paste, a private function here. The code inside this function is very straightforward.
This function is called "LoadData" and it is returning us list of employee objects. So, what
we are doing inside this function is, creating four different employee objects, finally we are
creating a list of employee objects, adding those four employee objects to this list and returning
the list. In a bit, we'll see how we're going to make use of this function. At the moment,
we have a lot of compilation errors and all of them are because we're missing the namespace
in which this "Employee" class is present. If you remember, this Employee model class is present in
this project BlazorProject.Shared. So, let's bring in that namespace.
Now, this file "index.razor" is a blazer component and every Blazor component has a lifecycle method
called "OnInitialize". Notice what happens when I type "override" and then press the spacebar,
we see all the methods that we can override. I want to override OnInitialized.
As the name implies, this method is automatically executed when the component is completely loaded
and initialized. In Blazor, we usually use this OnInitialized method to load the data our
component needs. To hold on to the data we need a public property in this component. So, let's
create that public property first. As you can see, we're calling this property Employees and we are
going to initialize this Employees property with the data this private "LoadData" method returns.
Next, let's display the list of employees we have in this "Employees" property
using the Syncfusion grid component. The grid component is in this namespace
Syncfusion.Blazor.Grids. We don't need all this html here, so let's delete that
and include Syncfusion grid component and the tag for that is SFGrid. SF by the way stands for
Syncfusion. Obviously, we need to specify the data source and for that we use DataSource property
and remember our list of employees are present in this "Employees" property and to reference
this property we use "@" and then the name of the property. Now, if we take a look at this Employee
class, we have got several properties here. Now, I don't want to display all these properties,
I only want to display selected property values and for that, inside this grid we use GridColumns.
In here, we specify the list of properties we want to display. In our case, we're displaying four
properties - EmployeeId, FirstName, LastName and Email. We're also specifying custom header text.
With all these changes in place, let's run our project by pressing CTRL + F5.
There we go, we have our list of employees displayed as expected but we have this big
red license validation message. Obviously, to fix this, we have to include a valid
license key and we do that in the Main() method of this Program.cs file. So, let's open that
and in the Main() method here, all we need is this one line of code.
We need a valid license key. If you want to just try sync fusion components, you can
use their trial version. You can also use their community license. All the Syncfusion components
are free to use with a community license. To qualify for the community license you should meet
two conditions - Your annual gross revenue must be less than $1 million US dollars and must not have
more than 5 developers. I already have a community license and to get the license key, navigate to
this URL - Syncfusion.com/account/downloads and then click on this button - "Get License Key".
Here, select the platform. I'm actually going to select all and then click Get License Key.
We see the license key here. Let me copy it to clipboard and then paste it right here.
There we go, we no longer have the license validation message. This Syncfusion grid component
is very powerful and it offers several features like sorting, paging, filtering, supports all the
CRUD operations, aggregated column values, export to excel, pdf and csv. We'll discuss implementing
some of these features in our upcoming videos. That's it in this video. Thank you for listening.