In Web design
How to create web project in Visual Studio 2019 - read the full article about web design errors, Web design and from kudvenkat on Qualified.One
Youtube Blogger
Hey guys, I am Venkat. In this video and in our upcoming videos in this series, well discuss how to create a real world Blazor WebAssembly application from scratch. Well 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. Ill include the link in the description of this video. In our case, we want to create a Blazor WebAssembly app, so lets select this template and then click Next. Provide a name for the project. Im going to name it "BlazorProject". A location where you want this project to be created. Lets create it in "C:Projects" folder and a name for the solution. Lets 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 lets select that and as far as authentication type is concerned, for now lets select "None" and Im 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, lets see this in action. In Visual Studio, with all the three check boxes checked, lets 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 doesnt 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 thats 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, lets quickly see this in action. I have another brand new instance of Visual Studio 2019 running. Lets create a new project. We want to create a Blazor web assembly project. So, lets search for Blazor. Select Blazor WebAssembly App and then click "Next". Provide a name for the project. Lets call this "BlazorWasm" and we want to create it in "C:Projects" folder and the solution name is also "BlazorWasm" and lets click "Next". Target framework - .NET 5.0. Authentication Type - None. Were going to leave ASP.NET Core hosted checkbox unchecked and then lets 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 dont have that ASP.NET Core Server project. As a matter of fact, we dont 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 were going to use sp.net core server to host our Blazor web assembly project, so were 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, well 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, Ive 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, Ill have it available on my blog and include the link in the description of this video. Now, heres 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 youre 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, youre 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, lets open that and in the section, lets 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 lets open it. Just one line of code here, builder.services.AddSyncfusionBlazor(). We have a red squiggly and thats because we are missing a namespace - Syncfusion.Blazor. Lets bring that in by pressing CTRL. With all these changes so far, lets 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 youre wondering, where are all these components coming from? Well, theyre 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, lets 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 lets 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, well see how were going to make use of this function. At the moment, we have a lot of compilation errors and all of them are because were 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, lets 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, lets create that public property first. As you can see, were calling this property Employees and we are going to initialize this Employees property with the data this private "LoadData" method returns. Next, lets 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 dont need all this html here, so lets 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 dont 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, were displaying four properties - EmployeeId, FirstName, LastName and Email. Were also specifying custom header text. With all these changes in place, lets 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, lets 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. Im 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. Well discuss implementing some of these features in our upcoming videos. Thats it in this video. Thank you for listening.
kudvenkat: How to create web project in Visual Studio 2019 - Web design