Blazor Tutorial C# - Part 1 | Blazor Basics in 30 Mins [Blazor Development] | Razor Pages

Hi, Welcome to Coding Droplets. We are starting  a new video tutorial series today. In this tutorial series you will learn how to develop web  applications in blazer. The framework we are using in the series is Dotnet 5. So I will  fully walk you through the entire process. We will start from really basics and move to the  advanced concepts gradually. So first let's see What is Blazer? So we are now in the Microsoft  official website and here we can see what they have mentioned about blazer. So blazer lets  you build interactive web UIs using C# instead of javascript. Blazer apps are composed of  reusable web UI components implemented using c# html and css. Both client and server code is  written in c# that is a highlight in this. Now in our normal application we used to develop  the client side in javascript but here we can use c# code to develop both client and server-side  code. okay. allowing you to share code and libraries. fine, now blazer. now the next thing  what I need to explain is, we will be looking to all these points in detail in our coming sessions  so the next thing. I just need to just highlight the point blazer can run your client-side c#  code directly in the browser using web assembly because it's real .Net running on web assembly  you can reuse the code and libraries from server side parts for your application alternatively  blazer can run your client logic on the server Client UI events are sent back to the server  using Signalr, a real-time messaging framework once execution completes the required UI  changes are sent to the client and merged to the DOM so here in blazer we have two different  options. We can we can develop two types of application one is normal server side application  and the second one is web assembly application so that the second kind of application will run  the application completely in the client side the entire dlls and all other libraries  needed for application will get downloaded to the client's device and it can run completely  locally. So we will be seeing all these things in detail in our upcoming sessions. Now  let's see a demo blazer application. So this is just a demo application which will  get created if we create a new blazer project. So here you can see now we are in the home page. So  in the home it is showing some hello world, welcome to our new app.. welcome to your new app and all. And here in the left side it is showing some menus and now i just need to show you something  when i am clicking a menu option say the counter you can just see that the pageview is not  getting refreshed it is directly navigating to the counter page without a page refresh okay  now i'm going back again to home and coming back to counter again so the url is getting  changed but there's no page refresh happening and here you can see there is a button click  me so i am clicking on that one two three it is showing some incremental values so the same  kind of application we will be able to develop in normal.net uh normal asp.asp.net project but we  have to use some javascript for showing this kind of incremental values without page refreshing  okay but i will show you the source code here there will be no javascript at all uh let us move  to the source code so you will be able to see that there is no source there is no javascript  implemented in this now let's see this so here you can see there is a h1 tag counter and a p  tag then counter count here they have declared a variable count current current count and here  there is a count actually so here it is declared as a private variable so this is completely  c-sharp code not a javascript and when we are clicking on it here there's an on-click event  it is calling the incremental increment count method so increment count is just incrementing  this variable so first the value will be 0 then once we click on this it will become 1 then 2 so  it is just incrementing and the values are showing real time in the page so this is blazer we can  create a completely interactive application using c sharp code so we have to discuss a lot many  things about blazer application development there are not many concepts so we will  be discussing each and everything in our videos but we will not be able to include  everything in a single video so this series will be having multiple videos in it it will be a  step-by-step process so in the video description i will mention the playlist of this tutorial  series so inside the playlist you will be able to see the whole videos of blazer beginner to  advanced tutorial so please subscribe to our youtube channel named coding droplets if you have  not subscribed yet and also press the bell icon so that you will get notified once we upload new  videos so now let us start with the basics of blazer so first i'm going to create a new project  so i'm clicking on create a new project button and we have to choose a project template so i'm  searching for blazer here so when you search for blazer you can see two different templates  the first one is blazer web assembly app and the second one blazer server app so we will be  discussing about blazer web assembly app in our upcoming sessions now let us start with blazer  server app so i'm clicking on next and here okay let let me save it in my desktop itself  and i'm naming it as blazer server app demo now clicking on next and the target framework i'm  choosing dotnet 5 and i don't need to configure for https so that it be unchecked and clicking  on create button to create the project so it has start creating the project you can see  a new folder has been created in my desktop so the project creation is i think yeah  it has completed now the project files you can see here in solution explorer we have  startup.cs class program.cs class and some razer files so many things so now the project has  been created now let's start discussing about the basic things of blazer so the first thing what i  need to explain is about razor files so in blazer we will develop our application using razer files  so each pages will be a razer file so here you can see when we click on pages we have index dot  razer then counter dot razor these are some sample or demo files which will get created  automatically once we create the project so we don't need all this anyway  first to explain about razer files i'll do one thing i'll open the index dot razer  and let me close this we don't need this tab fine so this is the index page so here you can  see there is an h1 tag hello world anyway we don't need all this i'm removing everything and saving  it so the first thing what i need to explain in rays of uh in razor file is routing so here you  can see at the right page then slash so this means this particular page is the root page or we can  say that this is the initial page which will get loaded when a user access our application okay  in the same way for explaining the details or for explaining about routing i will create one more  page raiser page so let it be raises page empty okay i'm loading templates i'm choosing razor  component here fine i'm naming it as test doubt razer now so test out razor has been  created now here i'm giving a page slash test so this means this particular  page the url for this particular page is slash test so before the slash our  application main base url will be there and after that slash test and here i am  doing one thing i'm just giving a message this is a test page okay now let's run our  application and i'll show you how this works so now it is lo uh it is running in localhost with  this port number so now it has loaded the index page the root page and i am just providing the  url here slash test and you can see the message what we have given here this is a test page okay  so that is working fine now i need to show you one more thing if i need the same page to be accessed  with one more url what i can give is page slash sample okay now let me run the application and i am giving slash test first so it  is working fine now going back to home now i am giving slash sample so again you can  see the same page got loaded so we can give as many roundings we need for a single page  okay now i'll do one thing uh the rate page slash example slash one let's see how this works okay now i am giving in the same way  example slash page one and you can see again the same page got loaded so this is how  the routing works in blazer so let me close this and stop yeah the app got stopped so here in razer  this at sign means we are going to start a c-sharp expression so after that sign we can start a  c-sharp expression so i'll show you in detail so now let me close this test dot raiser  we don't need it anymore we will do all the testings in this index dot raiser so we  can use uh we can provide slash sorry at code then opening curly braces okay  five we can use c sharp code here so first what i'm doing is i'm declaring a  private variable private string user name okay and i'm just assigning some  value to the username see john let's assume our the name of the user is john  and here i'm giving head s3 tag and here i'm showing a message hello now what i need  to show is i need to show hello john okay so we have to use this variable here so  in razer what we can do is we can just start with add sign then provide the variable name username so now let's run this  application so it should show hello john yes here it is showing okay fine now i need i'm creating one function private method string display or not display get user name  okay and here i am returning the username value so now if you need to use this method what  we can do is we can just provide it like this at get username now let me run the application so  for a change what i'm doing is user name plus to understand it is working like this i'm adding  thomas along with this username in this method but in the variable it is only john so now let's  see whether it is showing hello john thomas and you can see that this showing clearly hello  john thomas so this is how we can use the add sign in a razor page so here the add sign means we are  starting a c-sharp expression after this at sign okay now after this we can just give the normal  html things like welcome to our application and okay and i'm doing one thing  i'm making this application as application bold so we can provide  those things here and now i'm running it yeah see now this is a single line so in this john  thomas is actually fetched from that method and after that it is showing the rest of the things  in the html component or from the html okay now let me stop the application okay  so this is how you can use a variable now let me show you some more things  here now for example i need to show another value or let it be  a p tag so i need to show uh the sum of two values or sum of some 2 plus 3  or something okay so i'm just showing it like this sum equal to so now you might  be thinking uh instead of what we can do is one option is we can use a  method here get sum okay so now written 2 plus 2 and here what i'm doing is get some this is  one option okay but here i am going to show you explicit expression so how we can yes now you can  see the sum is showing as 4 2 plus 2 is equal to 4 fine now here we what i'm going to do is i need  to show i need to mention it explicitly so what i'm going to do is one option is okay you might  be thinking we can provide it like this but this won't work so at sign means we are going to start  a c sharp expression but this thing won't work now explicit c sharp expression means we can start  uh with a at psi and we can open a parenthesis and inside the parenthesis we can give 2 plus 2  and close it now this will work i will show you again just showing some equal to sum is 4  but if i am giving without this parenthesis it will not show it will throw an  error i think yes it will show here that there is an error okay so this won't  work actually so for explicit expression we have to start with that uh outside and open  parenthesis and inside the parenthesis we can give the c sharp expression okay so this  is the one thing what i need to explain now another thing is a button click so i'll do  one thing i'm creating a button here okay now okay uh i'm creating a new method private void change name okay now here what i'm doing is i'm assigning user name equal to peter  okay and here now instead of this method i'm just using this variable okay so first the you will be the value for  this username will be john and once we click this button i need to call this  method so for that what we can do is at on click equals change we can provide the method  name change name we can to call this we have to call this method so i have provided  it change name now let me run the application sorry there is no the button is not visible so inside the button we have to okay we have to  show some text uh change name now let me run it so now our application is working it is running so  you can see hello joan welcome to our application and this is the button for change name now  once i click this button i will show you what how interactive is blazer in the normal  web application or a normal asp.net application if we click a button and we assign some value to a  variable nothing will happen but here now you know that we are showing this name from that variable  we have given add sign username here so whatever value in that variable it will get displayed here  so once i change the value immediately it will change the value here so you can see now i'm going  to click it so now i clicked it and immediately the name got changed this is what i need to show  you how interactive blazer is so hope you liked it give me a thumbs up for this video so we are  going more detail or more in detail about blazer in our upcoming sessions okay so blazer is a  very very interactive web application and we are having lot many things to discuss about blazer  so next thing what i need to show you is how to provide this on click event explicitly  instead of calling this method we can provide this on click event explicitly so let me  show you how we can do that first i am starting with an earth sign and opening  the parenthesis now again we can start we can open and close parenthesis then such  that this is this should be a lambda expression and inside this lambda  expression i am giving the same things username is equal to theta phi now this  change name method is not getting called here but still it works why because this is how we can  provide the on click event explicitly so let's see how it works i'm running the application  now to test it the application is loading clicking on change name and you  can see immediately the name got changed so this is explicit declaration uh click event  or event declaration okay now the next thing what we are going to see is how we can implement  the conditions like if condition and loops for loops and all so first let us check if conditions  so here i'm creating one more variable private in user type or not user type  something like okay test num is equal to 1 okay and here we can start  with an at sign and i'm providing here if uh providing this condition here  if test num is equal to 1 then here we are showing one ptac num is one else p tag again then num is not 1 now let's see this  so now here we have declared num as sorry the test num variable we have initiated the value so  we have provided the value here it has one here now i'm running the application  so now it should show num is one the application is getting  compiled yeah it is running now and you can see now it is showing num is  one now i'm stopping the application and i'm doing one thing i'm changing the value to  some pen okay and running the application again and now you can see num is not 1 so this  is how we can implement if conditions in razer page now the next thing what we are  going to do is implementing four loops so for that i am doing one thing  i am creating a for loop here for in i is equal to 0 i  less than 10 i plus plus okay and inside that i'm creating a p tag and here i'm showing value of i is at  the rate sorry yeah here we have to provi uh what i'm going to show you what i'm  going to display is the value of i so at i now let me run the application and you can see value of i is equal to 0 value  of i1 till 9. so the for loops are working okay now let me discuss one more event  here we can overwrite one event on initialized so all initialized is an event  which will get executed once the razer page is loaded okay so here what i'm doing  is i'm creating a private list of string and i'm naming it as names okay fi and in on  initialized i am assigning some values or some strings to this list so is equal to new  list okay of string now the first is value zero one and here two three four five six seven eight nine  now instead of this for loop i'm using four each or name in or name in names okay then we are using p tag and here i am showing at  name the current value of name now let me run this and here you can see now it has printed or it has the for each loop has worked and there are  several p tags value 0 2 0 3 0 4 0 5 and so on ok so this is how we can implement if conditions  and 4 loop methods in our blazer razor file so now we are going to see about markup  string so markup string means if we need to display html contents from a variable so i will  show you then you will understand now for example here value 1 i need to display it  in bold so i have given the b tag so here in the string itself i am giving the html  tags and the value 4 should be italics okay 5. so now what we have to do is we have to instead of giving it like this i need  to mention it explicitly okay and here i have to provide markup string  then name okay now let's run this and now you can see the value one is in  bold and your value four is in italics so this is how we can use markup string to this  is how we can display markup string in blazer so in this video we have covered  some basics of blazer development so we have covered implementing c sharp and  html code in the same reserve file then routing functionality then declaring variables methods  etc within the razer file and using those in html then using loops and conditions within razer  file usage of markup string to dynamically render html in razer files so hope you enjoyed the video  and we will be discussing more things in detail some more advanced methods or some more advanced  concepts in the upcoming videos so stay tuned and hope you like this video please like and share the  video so see you in the next video thank you all

Channel: Coding Droplets

Views: 71,529

Keywords: blazor tutorial, blazor tutorial c#, blazor server tutorial, blazor webassembly, blazor webassembly tutorial, blazor server, blazor c#, asp.net core, asp.net core blazor, blazor tutorial for beginners, blazor web app tutorial, blazor app tutorial, .net 5, blazor tutorial 2021, razor pages, blazor, blazor crash course, learn blazor, how to use blazor, .net blazor, blazor app, blazor web app, blazor web, blazor introduction, blazor 2021, blazor c# demo, blazor c# overview

Id: dY_AWdCzsCY

Length: 31min 43sec (1903 seconds)

Published: Mon Nov 15 2021