Blazor Brilliance: Master Query String Handling with This Game-Changing Enhancement! 🚀

Hello friends and family you're welcome back to  net code Hub channel I am Frederick and I'm happy   to meet you today in this video we are going  to talk about how to enhance component routing   parameters using query strings maybe if today is  the first time of you hearing query strings you be   asking yourself what is query string if is that so  then query string it is a one way of passing data   from one component in another this cuts across  in Blazer application and other Frameworks as   well by this time around we are focusing on Blazer  so how do you communicate data from one component   to another in a routing form that is when we can  use Query string you know there are so many ways   of doing that query string is one of them okay so  today we're going to see some enhancements made   to query string parameters in Blazer this is not  actually new in net 8 because this was introduced   in net 6 way back in net 6 but I think most of us  have been using the old one I'll take you through   the old one and now I'll also take you to the new  one and um you compare both you're going to see   that the new one is very simple and it is easy  to implement it doesn't need a lot of quot just   two lines of quotes and boom you are done I'll  introduce you to last don't worry now before I   jump into this uh please make sure you subscribe  to this Channel and also hit on that Bell as you   can see down there so you never miss out any of  our upcoming content um of this channel I have   also started a project that is uh e-commerce and I  have the first one um completed it is on the video   description I also put it there so you can also  watch that too when this video ends and you've   learned something new or you are okay with this  please don't forget to give this video a thumbs   up if you want to show an appreciation by Buy  buy me a hot coffee I also accept it yeah and   please check the description I have the link over  there I do offer training session for people who   are interested in Blazer or net Technologies  talking about Blazer which is a web assembly   and server netet Mar and Mar Blazer hybrid and  also web service that is known as a web API so   if you're interested check the description  as well I have an email there you can just   hook me up maybe I'll leave the video source  code at a GitHub and I'll also put the link   link under the video description so without Much  Ado let's jump into the visual studio as you can   see it has been open already and we're going  to see how to handle eight query strings in   the old way then we come to the new way which was  introduced in the way back to um framework of 6.0 upwards so I have my visual studio open and  I have a project created that is actually a   Blazer web assembly what I'm going to show you  here cuts across so you can use Query string in   Blazer assembly or Blazer server application okay  so let's first go through the the old method now   there are several ways of making this happen  I'm going to teach you one so that's this is   going to be the one that we used to do then aside  from that I'll just have to I'll show you the the   current one I'm talking about you know this is not  actually the current one but for those who don't   know it is urrent to them right now let's see so  I have this if I go to solution explor I'm going   to have this folder as pages and we're going to be  using the homepage and the counter okay so let's   change this as a parient maybe you can change  this as a counter to your chart component or   we can maintain this as it is you can maintain it  here okay so we going to um send it in the form of   a query from the homepage to the counter so the  hom page is going to be the parent and now the   counter is going to be the chart or the homepage  going to be the sender and now the counter is   going to be the receiver all right good so now  we have that in mind let's see so first let's   uh rename this components and I'm going to say  this going to be um a parent uh let's say this   is a parent component and I'm going to show you  two ways so the first one let's say there is an   old one so it tells you that the old method that  we used to do okay so let me say old parent okay   and I'm going to have the look at the counter as  a old child as well so old chart okay this just   a naming that I'm using for my component for you  to get the better understanding it do necessarily   mean that if you want to perform this query string  um person of data through query string you need to   create an old child or old parent component no  you don't have to do that okay this is just for   this lesson okay now we have this so I'm going  to change this to old child then the old parent   going to be the homepage for this okay so let's  maintain it at the homepage okay so let's clear this in order for you to understand this better  I would like to create a form let's say you are   creating a form and aside from if I click on  maybe save form I want to submit this data   from the first component that's the old parent  component into the chart component then we go   there in the chart component and I receive the  form data okay we can use a whole lot of TS to   do that okay here we're going to use add AR which  comprise of the key and the value so we're going   to have the key and the value which going to be  the model name and the values okay so let's go   to the solution here and let's create a folder  and maybe you're going to name this as product   so let's have this created a class created and  maybe the name of the is going to be product   whereby going to have maybe product ID product  name and maybe an amount so let's have this and   there going to be an ID you're going to have have  maybe product name so this is going to be string   and this is going to be name then let's have one  more and this going to be um maybe decimal or   so and this is going to be an amount okay so we  have these properties so this tell you that you   can create a property as a model and I'm pass it  to a query parameter or a query string to another   page okay so we have this I believe you have this  class created you can also change this product to   even something else that you has come to your mind  you can put the name in here okay so now we have   this let's go to the old parent and that is the  sender um component so yeah this what going to do   we have to create a form whereby you're going to  pass in this data all right so let's have at code   then maybe you're going to say product then I'm  going to say my product equal to new so you create   instantiate it then we can now create a simple  form to handle that so we have an edit form in here okay so now let's have the model  so this model referen you this my product then let's say on submit so with unsubmit we can have access to maybe um sent to  chart something like this now we come in here   and I'll create this method so we say this is  void we create a method here and now let's have   the input the first one is an ID so we going  to see input is it number or so I think input number so let's have this let me pause this and  and create this component to handle the properties   here all right so this just a small cheat okay  so this what I have it's just an edit form which   has a model of the instance of the product that  we created we have unsubmit if I click on this   button I want to get this method filed and we have  the ID for the input number we have the input text   and we have the number for the amount and this  what we have we have a button as a submit type   which going to submit to this method and that's  what we have defin in here okay so now that we   have this we can run this and see the interface  how it looks like very beautiful simple one let's see all right so this what we have you can see we  have have an ID name amount and now the uh there's   an amount and our name okay so if I click on this  you want to um gather the whole data here and I'll   send it to the Chart component and now in order  to do this we're going to be using a dictionary   parameters we're going to use a dictionary which  comprise of the the string or the key value pair   okay so um why is this useful this is useful when  you want to send a single data or multiple data   that's a complex data example is a model you you  can also send one data type such as integer or   a string okay or Boolean expression or maybe  a decimal or Etc you can send one um in that   so using dictionary it support the single data  and also multiple data too so maybe you can try   hands on that and see now let's go in there and  now write a code behind this if I click on this   button what should happen let's see that so let me  just give a space send to chart and that's that's   fine now in here the first thing that we're going  to do you're going to create create an instance so   let's say this parameter so it's equal to we have  a new dictionary and now with this dictionary it   compris of a string and that is a key that's going  to open and what is the value the value here it is   an object so this object could be any form could  be a model it could be a data type so that is an   object here now once you have that we are going  to we open like this and in here we are going to   specify the object in here okay so here as you can  see from the dictionary it has the string and now   the value we also provide the key and the value  here the key must be string because you said the   key must be string and then this object could be  that the value could be any form so we made this   as a globalize so here going to be a container  which going to contain everything but the key   must be a string that is what we said okay so  in here we first have a key and now the key is   going to be maybe um let's have a look we can  just have access to the first one is an ID then   what is the value here the value is going to be  my product do ID so that is a value now in here   we're going to make a duplicate of this and now  let's have a look the next one is going to be um   name and I'm going to say my product dot I know  you know what I'm going to write isn't it that   is the name isn't it so the last one here it is  so add it and let's move on and that's going to   be an amount and I'm going to say my product  dot dot an amount okay so this is what we have   here now control K you can format it to well so  this what we have in our dictionary that we're   going to use as a query string so it's going to  for formalize it or formate this now in forming   this you're going to have an ID which going to  respond to the value here is going to have a   name as a key key which going to respond to the  name here it's going to have an amount going to   respond to the amount okay now once you have this  set and done we now go in there and now inject   our navigation manager to have access to navigate  um event so let's inject navigation manager and I   will say this is nav manager so we can just grab  this and I come down here and we're going to say   navigation manager. navigate you and in here  what we're going to do here is we're going to   specify the same navigation manager dot now take  note we have get URI with query parameters we're   going for this because we going to use diary  which comprise of the string and the object   you can see this compris of a dictionary an I read  only meaning there's no you can't apply any sort   of um formatting to it you can't edit you can't  delete it just read only and now you can see we   have it has a string as a key and it has object  as a value and that is exactly what you've done   here okay so let's go in for this now the very  first thing to uh specify here it is a component   name so that is a route and now we want to go for  this old child I believe you know this old child   it is coming from this component Old Chart so we  can just copy this to make sure we are doing the   right thing okay aside from that let's specify  this the dictionary and that's going to be our   parameters so in order to waste time you can just  go in there and I'll grab this and I'll paste it   okay so this is all that we need to do and maybe  we can set this to n that's fine okay now as soon   as I click on this it's going to create this as  a query parameters so it's going to be the ID   and it's going to be the value the ID is going to  be the name here and that's going to be the key   we have the name as an value we have the keyy  as an amount and we have the amount here here   as what as a value okay now how do we accept  or receive this let's find answer on it first   so first of all let's click on run let's run  this again and I try to click on this button   passing something and let's see the formation how  it's going to for uh formalize in the address bar   that's fine we have it set and open ready now  so let's pass in the ID of one maybe we have the   name as let's use net code H so and let's have  an amount in here 1 two 3 we have this amounts   so 1 two 3 that is fine if I click on send Let's  see we see we have the O chart that is right here   we have the ID as one and you can see that we  have I don't know I can zoom that we have the   name as net code H we have an amount as one two  three isn't it now we can see we have navigated   to the chat component so here how do you retrieve  this from the query how do you retrieve them and   I'll store them here so we can perform another  action with this let's have a look on how to do that so let's navigate to the Old Chart and  now in here as soon as the page loads this   we're going to do we're going to create let's  clear all this because we don't need any here   okay so maybe we can have access to my product  and uh let's have say product then my product so   equal to new we instantiate it now when the  page loads so we're going to have override   and uninitialized you can use this method  so that it gets poate as soon as the page   rendered now the very first we're going to  do here is let's have access to we can use   okay so let's use this my product because  you assigned it here already so we can do   that but first of all let's get the URI so URI  is equal to take not this is an old one the one   that we used to do okay so equal to new then  you can see you have this URI and let's pass   in this navigation so we have to inject this  let's go in here and I grab this navigation manager and let's paste it somewhere here  so you can just grab this and in here you   can say navigation manager dot you're going  to have access to this URI okay so we St the   URI here now aside from that let's go in  there and now make some extraction let's   extract let's pick the the query string from  the URL that we have so we're going to say my product so my product. ID okay so this equal  to then going to have HTTP utility we can use   this utility and I think this coming from this  name space control period it's coming from this   system. web and Dot we going access to pass  so you see pass query string and now in here   we specify the URI do query so who there's a  query dot going to have access to this query   and in here you want to when you get the UR  you want to filter you want to get this you   want to get the type so we going to use get  and now we're going to specify the name in   here so what is a Name ID okay so we specify  the ID receive it but why are we having this   it is saying that cannot convert this string  into ID so it means you have to convert the   value here into an ID so we can cat it here or  store it here so for now let's have our string   and this is an ID so once you store this  as an I String value here we can go in here and what we can do next is we're going to say my  product ID is equal to so we going to have end.   pass and we can specify in this ID so it's going  to store this as an ID onto this maybe one thing   that we can also do here is we can since we have  this we can actually copy this okay and Cat it   here so we're going to say this is a HTTP utility  let's say utility URL let's put that utility Ur   I so is equal to then let's store this here so  we just have to grab this we grab this and now   with this we just have to say do get so we get the  ID section I believe this is very simple because   we're going to do it so we finish the whole prop  uh properties in the model yes so once we have   this ID we can just go in here and I specify the  next one as a string so here we're going to say my product let's grab this so dot then you're going  to have access to name is equal to then let's see   HTTP utility URI we're going to copy this then Dot  and you're going to have get you can see that have   it and now let's specify the the the key here that  is the name we're going to do same and this time   around it's going to be amount so this amount you  have to also do same to this and this what you're   going to do do here let's stall it as so an amount  is equal to this get amount and that's going to be   an amount okay so let's convert it into a decimal  so we can type cast it and see so um um my product   do amount is equal to so we can also use decimal  do pass then here I believe we have this pass DOT   then pass we have that then let's pass in this  amount let's save that so you can see we have the   name we have the ID we have an amount in here and  that's what we have uh received from the query um   parameters now here let's display it so I'm going  to have access to maybe H4 and you're going to say   this going to be an ID now this ID going to say  my product let's have at my product do ID okay   so here let's make a duplicate and we're going to  say this is name and now this is going to be the amount and now is it's a matter  of change here to name and amount okay so we have this set now  let's run this and see so let's refresh this so let's try our hands on it and see we  have an ID as one we have the name here as net code then let's have an amount 1 2 3 so if I  click on send let's see so we see that here   able to retrieve this from the URI in here as  you can see the amount is specified the name is   specified and now the the ID is also specify  this is an old stuff this is the way that we   used to do it now let's have a look with the  new one that we can actually um work with this   you can see when you check this we we made a  lot of code in here okay the help of the new   one all this code are going to be scrapped  off going to have a simple one let's have   a look at that okay so first for what we're  going to do here is let's comment all this CU   we going to be using this so let's comment it  and let's push it down here okay all right now   the very first thing that we're going to do  here is let's have this property set in here   and this going to be a parameter and here let's  have this is going to be an integer and at this   end let's make this as a string and this is ID  Okay so when we have this ID you can just put   it let's make itable and let's have the next one  so we can make a copy of this okay now here is name and we have this as an amount okay so when we have this as an amount  this is what we're going to do you know query   string they are all string so it's better that you  treat them as a string and now when setting them   to the model we now convert them into the normal  data type okay so when receiving them since they   are query strengths you must passing strength to  receive them that's why I made an ID as strength   and also the amount as strength now when the page  initializes this is what you're going to do we   have to specify okay so it's better I put this on  top like this so you know it well okay and after   doing this the very first thing to do here is to  add is Supply so Supply parameter from query and   let's grab this and also put it here and here  okay when the page loads we have this my model   instance created already so we're going to say  my model then dot ID okay so let's my mod. ID   is equal to in. pass then you're going to pass  in this ID then the next one is my product do name so it's equal to this name  and you're going to have uh my   product do amount is equal to  decimal do pass then passing the amount and that is all so there is an amount  that we pass in as a string and it's going to   convert this into a decimal form for us now  this also a string so it's an ID we're going   to convert into an integer and I'll stall that  so this what we are doing now we're going to   repeat the same thing in here now let's  save this and now let's refresh this and see so now let's try hands on it and see I  passing one and I'm going to pass in maybe   in the same net code app let's pass in the amount  99 and I let's click on send to chart and I let's   you can see that we have it here we'll be able  to retrieve the ID the name and the amount in   here so if you compare this code to this which  one do you think you go in for what do you need   to hear is to specify all this and that is all  and one good thing about this here is you know   when you check this old p and that is a sender you  can see that these are the keys and now when you   go to the component and I click on it you can  see we have the keys in here but you can even   change the keys from this section you know this  is a receiver and the receiver must the name of   the receiver must match with the key here is a  name and that place the here too is what is a   name maybe I want to change this to customer  name or maybe channel name so let's see now   with this if I change this to channel name see  what going to happen you're going to have an   error here whoa I want to make it lower case so  this is channel case what I a channel case well   this going to be so this channel name I think so  that's fine so we have this channel name and we   going to have access to this to this channel name  over here and we have it set okay now let's try   this and see what going to happen once you have  changed this to channel name so let's refresh this now let's try this and see I have an IDE  of 12 I have the name as net code and I have   the amount here 5688 if I C consent to this  you can see we did not receive the name we   receive an amount and ID the name is over here  net C but we did not receive it because when you   check this the sender and the receiver they do  not have the same or common um parameter or or   key name the the par parent or the sender has the  name over here but when you go to the receiver it   has channel name so in order to handle that  we can there's an introduction of this that   you can specify it as a Cascade parameter you  know we have to pass in this name and now this   name it tells you that if the key or the the  receiver name has changed then refer this or   make a reference to the specific key that you  want to um extract and that is the name so if   I check you see old parent that is a name and  I make reference to the new parent here the   receiver here why it has the name change  it has this reference me to the specific   key that we want in the query string now let's  save this and let's refresh and see what we have now so now let's give a try once more and see  so I'm going to have 23 I'm going to have um   net code I'm going to say net code up Channel  then maybe amount 2 4.88 87 if I click on send   to CH now see we have it set here all right so  that is it I believe you've gotten the concept   of this how to use this Supply parameter from  query attribute instead of writing a whole lot   of code to initialize and I grab the query  string or grab the URI and I'll extract the   section from it using a whole bunch of code  here is has been simplified now you can use   this to extract it as well and even try to  change some of the those as soon as you want   to do that that is it for this video thank you  guys for watching if you know you've enjoyed   something here please don't forget to like  this video to subscribe to this channel if   you haven't done so and let's keep in touch  because new ones will be coming and um they   actually helpful as well thank you and I'm  going to catch you up in the next video

Channel: Netcode-Hub

Views: 1,881

Keywords: BlazorDev, QueryStringTips, WebMagic, CSharpTricks, AspNet, DevTips, CodeMagic, DotNetDev, WebOptimize, TechHacks, DotNetEnhancement, BlazorWASM, ServerHandling, WebEnhance, WebDevBoost, .NETDevelopment, BlazorFramework, WebAssembly, CodeEnhancement, SoftwareDevelopment, ProgrammingMagic, WebAppTips, PerformanceBoost, WebDesignTricks, WebServerOptimization, Blazor, Query Strings, Routing, Navigation in blazor, WASM, Blazor Server, Blazor App

Id: OG83JTXqyjI

Length: 28min 46sec (1726 seconds)

Published: Sat Dec 02 2023