How to create web project in Visual Studio 2019

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
alt
kudvenkat ,
Youtube Blogger
alt

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