(#40) Link tag helper in asp.net core | What if CDN is not working? | Asp.Net Core tutorial

hi everyone in this video we will learn several things about link tag helper we will start from what is link tag helper what problem does link tag helper resolve how can we use this link tag helper into our application and the main topic how fullback works for basically people debug this link tag helper how it is working behind the scene you will learn loads of other things in this video so keep watching and at the last of video don't forget to tell me your feedback let's open the visual studio now here we are back to our book store application and in this book store application let's open the layout file this layout file is available inside this views folder and then inside the share folder insert this in the out file you can see that we are using environment tag helper and this environment tag helper is further development environment and the second one is for known development environment in this known development environment you can see that we are accessing a bootstrap minified file from our solution to increase the performance of our application we can also use CDN at this place the full form of sylveon is content delivery network and the main benefit of using Sirian is that it loads the file based on your geography location suppose if you are in America then it will load this file from the nearest server which is near to America if you are in China or England or India then based on your location the system will get the file from the nearest server so this is the first advantage second advantage is suppose we are trying to use Sirian for or bootstrap file and nowadays lots of applications are using bootstrap and since all these applications are using bootstrap it means they are also using CDN if they are using Sirian it means the data from that stadion network has already been downloaded into your browser and if that data is already downloaded into the browser then this browser will not hit the content delivery network again it will basically get the data from browser guests so these are the two main important benefit of using Sirian now let's use bootstrap CDN over here to get the bootstrap hidden you have to go to the official website of bootstrap which is get bootstrap comm here you can click onto the documentation here on this page you can find that we have a link and this link represents the CDN let's copy this one go back to the application and let's just paste it over here so for now let's comment this previous line let's see what all we have over here so we have Oriel it means stylesheet' href the URL for this file then we have integrity and at the last we have this cross-origin let's remove this integrity now and since we are working into the local HTTP environment so we do not need this HTTPS for now you can simply use HTTP and since we have made all the changes in known development environment so we have to run our application in known development environment and how can we do that we simply have to go to the properties then choose launch settings and here instead of using this two element we can use some other name suppose I am using production ok now let's press ctrl f5 to run this application here you can see that everything is working fine as expected if I right click on to the space and choose inspect go to network tab and click on this CSS to filter the URL again just reload this page this time you can see that we are getting this bootstrap code min dot CSS from disk s so this browser is not loading this file from Syrian Network it is simply getting from disk cache so this was one of the advantages of using Syrian Network if I right-click on this one and choose empty case and hot reference this time you can see that we are getting this bootstrap dot mean from this path and we are getting it from the server by this time every thing is working fine but since we are working on a network so there are some chances that there might be some issue into the server so for example there is some problem into this CDN server for example because of any region suppose this server is down and to make it down let's make some changes into the URL suppose we are using this URL and as you already know that this jewel does not exist on to this server it means this server is not working very well if I save all the changes go back to the browser this time you can see that our application is not working as expected here in the network tab as well you can see that we are getting the cancelled status it means this does not exist on to the server or the server is down because of some reason and here you can see the entire structure of this application has been disturbed nothing is working as expected over here so at this point if you are using Sirian then we might be in trouble at some time using serial is the best practice but if you are using Sirian then we can encounter this type of error so how can we resolve this type of problem and the answer is link tag helper can resolve this problem let's focus on to this link tag helper again suppose this is the server and this is my browser I'm sending some records from my browser to the server and the server is returning a page on this page suppose I have written a URL of a content delivery network or CDN then suppose I have these Celia networks now based on my location I will get the data from the nearest server and because of some reason suppose this server is not working so at that time our application will not work to resolve this problem we will use link tag helper and since you are talking about link tag helper so we will be using this link tag helper on door CS HTML pages just like other tie helpers this link tag helper also has few attributes let's focus on all of them first one is Acharya so this Acharya belongs to the Sirian path then we have ESP fallback href in case the part of the Sirian is not working then here in this es we fold back Acharya we give the path from a previous and folder structure then we have ESP fullback test class property and the value let's implement all these attributes into our application so here I will be using ESP then fallback href in case this hidden path is not working then I want my application to lower this bootstrap file from this place so let us copy this URL and let's paste it over here inside this fall back href let's use another attribute so ESP fullback test class so here we have to give a class the second converse ESP fullback test property and the value and now we will be working on these attributes first for the learning purpose let me put some values over here and then at the last we will discuss how these values are working so here I'll be writing as our only then I will light over here position and then here we can write absolute I will discuss the details of all these values in just a bit at this place you can see that still we are using this wrong path int or href let's save all the changes go back to the browser and just refresh this page at this place you can see that our application is working fine although we are not using the right path from the CDN still application is working fine if I click on any blur pace then you can see everything is working fine let's focus on to the URL as well so this bootstrap dot min dot CSS which is coming from the Sirian has been cancelled but this application is getting all the data from our local server let's update the path and let's make it correct so suppose we are using 4.4.1 which is the correct version go back to the browser and this time again this hard refresh it this time you can see that we are getting the data from our student Network and we are not getting any path from our local application so it means we have to solve the problem if student is working then we'll get data from Syrian if Syrian is not working then we'll get the data from our local application now let's learn how this link tag helper is working if I right-click on to the space and choose view page source at this place you can see that this is the line that we have written for the CDN so this is the arielle href integrity and the cross origin fine but below this thing you will see that there is some more code what is that code so we have one new tag with named meta so here you can see we have the meta the name of this matter is stylesheet full-back test then we have a new class then it has a new class and this class is coming from this attribute value so we have inserted SR only over here so this class is inserted into the meta tag now let's then how this link tag helper is working let's focus on to these attribute values so here in to this test class I have inserted SR only let's focus on to this SR only class let's open the bootstrap CSS file so it is available inside ww root Lib cuter bootstrap CSS and this bootstrap code CSS let's search for this SR only class so I am using this SR only class and this curse is available inside bootstrap file so it is not a magic this is just a logic focus on the loggia so I am using this I am using this SR only class and inside this class you can see that we have several properties the position is absolute width is 1 pixel we are just targeting this position property here you can see I am writing the name of property poison and the value is absolute now let's see how the system will verify from which path it has to lower the file so we have two parts one is Syrian second one is from our server how the system will know that see then file is not working flash this application will try to get the data from this Syrian Network file then insert this file there will be some stylesheet classes in those styles it classes it will focus on to this s only class and insert the SR only class it will try to get all the properties if the value of the position is absolute it means the Sirian is working fine in case the value of this position property is something different or we are not getting this sr only class altogether then this application will think that this eden is not working and at that time this folded href will work and we will get the data from this path ok this was the theory concept but how is this working let's focus on the script code if I right click on the space and choose inspect go to source and choose index from the left side okay here you can see that we are getting the same code this is the meta tag and then we have this script tag let's click on to this button to format this code okay so now you can see we are getting this meta tag and this is the script code so let's see how is this working here you can see we have four parameters a B C and D these parameters has the values from this link tag so one has this URL then second one has the fallback URL then we have this integrity and the other this cross-origin now let's focus on few more parameters here you can see that f fields document so basically it is trying to get the value from this meta tag and since the order of the CSS matters alone so first we are using this stadion file then we are creating this meta tag it means by the execution of this meta line all the CSS from the serial should be downloaded into this page and then we are verifying what is the value of this SR only class inside this SR only class we have written a property with named position and we are trying to get the value of that position property to absolute here is the logic if those values are equal then nothing happens everything is working fine if in case these values are not in equal then this is the code that is inserted into the link URL the value of a is poison B is absolute C is this path and D is all other attributes so it will combine the C and D and it will set it into this application at this point we can say that this is a very meaningful logic and it is not magnetic that you will use this SR only class you can use some other class as well but you have to define the property and the value from that new class and everything will work as expected that is all in this video I hope after watching this video the concept of link tag helper will be clear to you if you liked this video don't forget to hit the like button tell me your feedback into the comment section share this video subscribe to our Channel and you can also join this web gentle youtube channel below your video player you can see that there is a new button of join you can click on that button and you can join web content channel thank you for watching have a great day

Channel: WebGentle

Views: 9,891

Keywords: asp.net core, asp.net core tutorial, asp.net core 3.0, asp.net core 3.0 tutorial, asp.net core mvc 3.1, asp.net core mvc 3.1 tutorial, asp net mvc, asp net mvc tutorial, dotnet core, dotnet core mvc, asp.net mvc core 3, asp.net mvc core tutorial, asp.net mvc core course, dot net core tutorial, dot net core mvc tutorial, asp.net core 3.1, .net core, Link tag helper in asp.net core, Link tag helper, What if CDN is not working, asp-fallback-href

Id: wYSh8jGsT50

Length: 14min 0sec (840 seconds)

Published: Mon Apr 27 2020