Pass data from cshtml to cshtml; .cs to .cshtml, and URL GET parameters with ViewData[]

in this video we're going to see how to move data across a c-sharp razor page that is from one cshtml page to another cshtml page or from a code behind which is a cs to a cshtml page and from the get url into this entire flow so let's start by taking a look at how our project is organized when we deploy the project we see that a web page is rendered and if i hold control and press u we'll see we have html head body header so on and so forth and then down here we have 2002 plant diary 2022 privacy and also take a look at this we have a div class tech center welcome to plant diary catalog your plants where they are when they have been watered and fertilized so look at this but then also just remember one or two things from up here as well let's return to visual studio and we see well okay here's something we were gonna look at which is this uh welcome to plant diary but that's not the whole page right so where did all that other stuff come from let's go to solution explorer and take a look at shared under pages and then layout cshtml what you see in here is that this is where all of the other stuff is as a matter of fact that index.cshtml gets injected right here on line 35 where we have render body so the layout cshtml is essentially a template and then all of the other pages get injected into that middle part but one other thing that we'll notice when we look at the page is that the title and the tab bar here changes as i navigate from one page to another so you see here it says privacy policy here it says home page and then dash plain places 2020. so how's that possible if it's all getting included within this template called layout.cshtml well up at the top where the title is you see there's this thing called view data title which is essentially you can think of that like a variable or a value that gets passed in but passed in from where well let's go back to solution explorer again and take a look at index.cshtml and take a look up here at the top of the page you see that home page is assigned to view data view data title on the other hand if we go to privacy privacy policy is assigned to that variable so that view data square bracket with a name in the middle is a way that we can pass data from one cshtml page to another but of course it doesn't stop there because we can also assign values to variables and the code behind and then pass that value from the code behind to the cshtml page let's take a look at that now when we access a web page usually for the first time or if it's just a read operation it typically uses the get http action as a matter of fact in our code behind we see a method here called public void on git and that is the method that will be invoked when we access this page with a get request a get request is the vast majority of web pages that you visit with the url so a url is essentially making a get request post request is also common that's typically when you're entering data into a form or uploading an image and then submitting it because post indicates that you are modifying some data creating some data or something like that where git is essentially a read-only operation so if there's any prep work we want to do to get the page ready we want to do it and on this on git so i'm going to make that i'm going to access that view data variable and we'll call this one square bracket and then brand and i'm going to set it equal to my plant diary now the idea here is that we could have this page just serve my plant diary or we could do a more of a franchise model where you can essentially use this page and configure it to your needs example when i worked in point of sale i worked in a for a point of sale software company for about 10 years and it was a core point of sale system that was sold to retailers and then retailers could put their own logo on it could put their own color scheme their own branding so that's effectively what we're doing here we're not going to hard code plant diary here we're going to pass the brand name up through a parameter so we'll say brand equals my plant diary but let's break this down a little bit more let's declare some variables and remember when we have a variable we need a name and a type so the type says how we organize the zeros and ones that are in the in the computer and the name is something unique we can't reuse the name across multiple variables because it has to be unique so we'll say string brand equals boom and then i'm going to say view data brand equals brand now this is effectively the same as i had before i'm just introducing another variable but gives me a little opportunity to talk about variables and how to concatenate them together so we can say int which represents a whole number type year started equals 2006. so we can say brand plus year started maybe i'll say brand plus established and then you're started like so okay so now everything looks good here and now we are taking all of this stuff and we're putting it into this variable now by the way why does this variable look different than the other variables the other variables don't have square brackets well the other variables are meant to hold one piece of data where view data is an array and an array means it's going to hold multiple pieces of data of the same type and this is something that has already been declared so we don't need to give it a type we're just uh we're just assigning a value to it but specifically we're assigning a value to the cubbyhole or the mailbox or the parking space that's named brand so we want that to be unique within this view data collection we're just saying okay identify all this is brand so we'll save this and now let's go back to the index.cshtml and see how we can pull it out this gets interesting because you see line four we have something similar but it's what we just did we're taking a value and we're assigning it to this view data collection what we want to do is the opposite we want to grab the view data brand from the code behind pull that value out and save it into a variable and the variable we will use in our cshtml page so just a little different there i'm going to save our brand equals view data brand note that we want to keep that name in quotes the same as what we have in the code behind var means kind of you know let the compiler figure out the type so loosely typed brand well that is the same name as this variable that i created in the code behind but it doesn't have to be i mean it doesn't hurt because we can connect the dots and realize what it is but it doesn't have to be so uh now instead of welcome to plant diary i'm going to say welcome to at brand so notice i can declare a variable up here in this part up here and then i can use the variable in the cshtml by prefacing it with the at symbol so cshtml it's a mixture of c sharp and html you can basically put the two together so you see a mix of true html and a mix of programming as well that rhymes let's take a look at how it looks when we run it let me see sure enough it says welcome to my plant diary established 2006. so we see that we're pulling this data from the cshtml to there sorry from the code behind to the cshtml page let's go a step further and see if we can change it even more by adding a get parameter up here in the url using a get parameter is actually quite simple we simply say request dot query and then in the square brackets this probably looks a little bit familiar we put the name from the name value pair that we're going to place in the url which we'll see in just a moment so let's go ahead and call this brand again with capital b this time and we'll save this to in brand uh so string in brand equals request query brand and then what i'll say is if we'll say if it's not null and its length is greater than zero then we'll go ahead and assign this in brand temporary variable to the brand variable so essentially we're just giving it a default the default is my pl my plant diary but if we do get something from the url we'll use that instead and we're using this if test to use that instead but let me quote the infamous bob ross and say let's have some fun while we're here why don't we go ahead and also change the tab title instead of just home page let's let's change it to brand so we'll get to see this happen a couple different ways okay and save and deploy and let's watch the first time it renders we see there's no no name value pair in the url so it just goes to the default my plant diary established 2006 and once again the tab is my plant diary established 2006 but watch this i'll start with a question mark and then we can put name value pairs after the question mark so i'll say brand equals your plant diary the plus sign in a url is typically an escape character for a space so watch what happens when i press enter notice that this changes to your plant diary and also the tab up at the top here changes to your plant diary so we've seen that we can successfully pull in a query parameter into the code behind page pass that from the code behind page to the cshtml page and then pass it from the csa html page to the layout page which determines the title so we have all of our plumbing together before i leave you though one word of warning remember that our index cshtml is injected into that layout cshtml page so you notice there's not an html head title body in the cshtml page and that is correct there shouldn't be but if we look at layout cshtml there we see the head the title the body and remember that each of our individual pages is going to get injected here so occasionally when i'm looking at the c-sharp razor page i'll see someone add the head the title the body right there not knowing it's actually getting injected into a bigger template so just be careful of that in any case i hope this video was helpful and as always i look forward to reading your comments thank you

Channel: Brandan Jones

Views: 3,319

Keywords: C#, GET, Razor, Request.Query, ViewData, array, codebehind, cs, cshtml, parameter, pass

Id: kGsP2pFxoTk

Length: 11min 10sec (670 seconds)

Published: Wed Sep 07 2022