Create a Single Page Web Application using C#

my name is Zaid I'm a current student at Ojai tea Wilsonville and I'm hoping to graduate next year with a bachelor's degree in health informatics a health informatics has a variety of fields that it's touched on for instance SQL database networking a variety of business classes and programming which I want to touch on today now behind me what we have is a peacock but it's actually a c-sharp textbook and under underneath it says in a nutshell this is a one 1,000 page textbook and I'm gonna save you some time today I'm going to keep it very simple so you don't have to go through through these pages and I'm going to show you how to build a simple web page application using Visual Studio Express for web that's the software we'll be using today to design our project so what we're going to do is obviously click on a new project go to visuals visual sharp here and create an empty web application after that it's going to direct us to this window here what we have on the right is a solution Explorer the solution Explorer allows us to view the different pages that we have in our in our design menu here also it allows us to to store pages or code in certain folders and easier to access them on the below that we have a properties field which really allows you to edit the properties of your tools of your design tools for instance the font the size or the name of it on the Left we have a toolbox which we'll be using in a second and what that toolbox does it gives you design options or design tools that you can use to a place in your web application and the first thing we're going to do is right-click on our project and we're going to add a new item which is going to be a web form at that we upload that we get this page right here and what we have currently is generic programming code c-sharp code that has pretty much all it has is is a empty page that's all it is at its current state now down here you have a design window you have a split window and a source window the source is the code of your design the design is the actual look the user is going to see and the split is both I'm going to close out of this output and we're going to keep things very simple today so what we're going to want to do is build a building application that allows us to input user data in a specific spot and after we click a button it's going to output that data for so let's keep it simple I'll type in hello my name is and I'll add a textbox so after so the user is going to be able to put in type something into into this text box which right now we're not going to give it any requirements or any maximum length or minimum length fields we're going to keep it very simple after that textbox we're going to add a button which the user can click on to give it an output which will place a couple rows later so we can see right underneath what we're going to create now I'm going to open this up in our web browser and it's going to show us it's going to show us what we've created so far so what we have is exactly what we saw in our design window and I can type in my name here and after I click a button unfortunately nothing shows up and what we want to see is that instead of this label we want to see my name pop up again so let's go back to our design first thing we want to do is stop debugging so you can actually take a look at your code first thing that I'd like to do is make this a bit more user friendly as well as easier for us to program which we'll do in a second so what I want to do is go through my tools and edit their ID as well there as well as their text to make it easier for both the user and us when we're referring to it and when the users looking at our tools so I'm going to click on this text box go over to the properties field and I'm just going to rename the ID and I'm gonna rename the ID text name that way later on what I'm referring it to it I know exactly what it is and it's very simple for me and I'm going to go to this button and I'll leave the ID open so the ID is really for you when you're programming and we're going to scroll all the way to the top here where it says text now this is what the user sees this is what the public sees and we don't want it to say button let's at least rename it to okay and so now the user will see okay now down here in the label section I don't want anything to be visible until until this button processes my input so what I'm going to do is actually just delete the text and the user is not going to see anything and I will go down to the ID as well and change that to the output so I know where I want to go so we can actually take a look at this right now as well in our web browser and we can see what changes we've made and as you can see it's much more user-friendly so now it says hello my name is I'll type in Zaid but once I click OK we have nothing that pops up we want we want we want my name to be displayed here after I push this button so what we want to do now is now that we're done designing our webform we want to give this button some functionality we want to give it some meaning we wanted to do something so let's stop debugging and the way to do that you just simply double click on the button so right right here what we have is actually another page that's opened up and these two webform pages they actually work together the dot aspx it's simply the code of your design so as you can see it has coded for us the text box it's coded for us the button and it's placing as well as the label down here the dot aspx dot CS which you'll see up here it's the actual functionality or the meaning behind those buttons so these two these two web forms work together so what we're going to want to do here is as you can see here it says a button click so once a button is clicked on what we want to see is we want to see the output which is a text file we want the output to equal the the the input which is which is our text that name which is our text name text-box here so we've quoted it we've quoted that in into our button click and right now if we go back to our web browser which I have Google Chrome set as default we should get the result that we're hoping to get from the start we still have the same form so now after I click OK my name should arise magically down at the bottom there it is hello my name is 8 was what was I push okay my name is popped up now if we use Jenny for instance and click OK Jenny pops up so there it is for you what we've done today is created a simple single page web application that allows us to place something in a text box and after we click a button it gives us our desired output I hope that after this procedure and video you're able to do the same

Channel: zeidrizvic1

Views: 184,966

Rating: 4.4808588 out of 5

Keywords: C# (Programming Language), Microsoft Visual Studio (Software), Web Application, Programming Language (Literary Genre), Single Page Design

Id: J7aStGi3hE8

Length: 9min 3sec (543 seconds)

Published: Sun Jan 19 2014