Single-Page Application with ASP.NET & jQuery Hands-On

single page applications are the way to go if you want to build state-of-the-art web applications but if you look around there are so many big frameworks out there that just seem to take ages to learn let me tell you something you don't need a framework like angular to build single page apps plain JavaScript and jQuery do the trick and more importantly you have to build a fast and reliable back-end and that's what you will learn in this course the singer page app you will built in this course is a simple shopping list application that uses every crud operation with HTTP requests calling a restful web service using web api - which saves your data persistently in a sequel server database so make yourself ready to learn some jquery html5 and CSS for the front-end and considering the backend we will use microsoft's asp.net web api - for our rest service and entity framework with code first migration to communicate with the database on top of that you will learn how to publish your single page app with Internet Information Services or short IAS on a Windows server so that everyone can access your new single page application I'm Patrick and I have built several web applications professionally as freelancer and employee and over the years I've learned so many things that you just don't have to do I want to save you time because in my opinion it's better to know the crucial and most important parts quick so that you can get your singer page app out there in no time sounds good let's get started [Music] hi there welcome and thank you very much for joining the single page application with asp.net and jQuery hands-on course I'm Patrick and I will guide you through every lecture you will see me writing the actual code and explaining every detail so that you will be able to write a single page application by yourself with jQuery Web API and entity framework now let's have a look at the complete package of what you will learn throughout this course the singer page application we will build together is a simple shopping list app the user of our app will be able to create its own shopping list add items to the list and manipulate these items by checking them off or deleting them to access the items the user has created on her computer she can call the corresponding shopping list ID in the URL that way the list can actually be used in the grocery store from a smartphone our application won't win any design awards that's because learning Web Design is not the goal of this course but we will change a little bit of the design so that you get an idea of how cascading stylesheets can be implemented in the application and this already leads us to the first big section the whole course is organized in four main sections the first one will cover everything front-end or client related you will write the HTML CSS and also the JavaScript code for your single page application this means that by the end of the first section your singer page application will already work but unfortunately no data will be saved persistently and you won't call any web services it's the front end logic that will be ready for the following sections in the next section you will build the web service with asp.net Web API here you will learn to write the HTTP requests get post put and delete and how to call them with jQuery and Ajax from the front-end communication between front-end and back-end is key in these lectures now although you will learn all about the crud operations meaning create read update and delete persistence will be covered in the subsequent section in this section you will finally learn how you can save all the shopping lists and items persistently in a database we do that with the help of entity framework and the so called code first migration after these three sections you will be able to build your single page application from start to finish completely by yourself but it doesn't stop there to be able to build a real-world application that can be accessed in the web you have to know how you can publish your app to Internet Information Services on a Windows server also you might want to use an actual sequel server for your database this is covered in the last section okay so far our roadmap but first let's start small let me explain what the single page application actually is and how it works in the next lecture so what actually is a single page application or in short the spa well in essence a single page application is a single page or a single website as the name implies that you load within your browser when this website has finished loading you stay at the single page the whole time you're working with the data given by this website this means when you click on a form or on a button you actually don't jump to a new page instead the content you see on this page will be replaced by new content without leaving the current website this provides a more fluid user experience similar to a desktop application and usually works faster because you just load a small part of the page instead of the whole thing to make this clear let's use our shopping list application as an example we start the web application and see an input fields and the button to create a new list when we do that and hit the button the content of our application has changed but we actually did not jump to another page you don't even see a loading icon in the upper left corner of the browser let's do it again and pay attention to the address bar of the browser when we click create the browser did not seem to do anything but the content has actually changed now how is this done there are different ways to change the content of the current page for example a solution for small applications with little content like our shopping list app would be to simply load the complete HTML of a page and make particular parts for example divs of this page invisible or visible just as you need it for bigger applications or to reduce data load in general it's better to load HTML parts when you need them and replace these parts with the existing code in a container here is a short example as you can see two disks are in this HTML snippet but one is hidden with CSS statement display:none now when we want to see the other div we can just display it and hide the other one quite simple and works like a charm but as mentioned be careful with bigger projects if your single page app will have lots of content it does not make sense to put all the HTML code on this page this would increase the loading time dramatically hence you might lose lots of visitors and it would be a lot harder to maintain your application so let's have a look at the next example you see a diff which will be used as a container we have the same content as before but when we want to change the displayed content we actually remove the HTML code in the container and replace it with the new one that way the HTML code is only loaded when needed but let's dig a bit deeper you're here to learn something so let's call the HTML replacements by the proper name have a look at this HTML codes and the resulting page we can also display it like this since HTML is a so-called markup language well it stands for hypertext markup language the code is always organized in a tree structure the first node or a root node in this tree is the div container then we see the input field the button and an unordered list with its corresponding list items all these little parts are described as objects there is even a convention how to represent and interact with these objects it's the document object model or short the DOM and the tree you see here may also be called a Dom tree so now you know these content replacements a single page application does are actually manipulations to the objects of the Dom tree the changed appearance of a single page app usually is the result of a web service call the user clicks a button javascript is used to communicate with the server the server sends back the result and then JavaScript is changing our page to make things simple at first we won't use the actual web service call in the next section of this course instead we will manipulate the Dom directly with JavaScript or jQuery however in the subsequent section we will cover the whole web service process by using web api to finally build and use the service for the most part of this course you will only need visual studio and browser in all the lectures you will see visual studio 2017 Community Edition and Google Chrome the community edition of Visual Studio is available for free and can be downloaded on the corresponding website the same holds true for Google Chrome we use Chrome because we need the developer tools of the browser if you are familiar with Firefox or any other browser and its developer tools you can also choose that browser if you have no idea what developer tools in a web browser ah don't worry I will explain everything when we need them of course as soon as we cover entity framework and publishing yoga application we will also need Microsoft sequel server Express Edition which is also available for free but it's not necessary to download it now Visual Studio and chrome are the only tools we need so far one last important hint though when you install Visual Studio 2017 make sure to check asp.net and web development during the installation so that you'll have all the libraries available when we need them welcome to the first section where you will write actual code in this section you will learn to build a client or front-end respectively you will build the website with HTML add some Styles with CSS and even implement the logic of your single page application with jQuery this means that by the end of this section using a page app will already work but only offline and the changes you have made to your shopping list will be removed after you refresh the page but don't worry you will learn how to save all changes persistently later on of course for now let's start with the front end of the single page app let's start our project by creating a new web application in Visual Studio we go to file new project and then from the templates we choose a visual c-sharp web asp.net web application and since we are going to build a shopping list app we can call this project simple shopping list for example and then click OK and as you can see here there are many templates you can choose from additionally to that you can select if you want to use asp.net MVC Web API and you can even activate individual authentication with asp.net identity apart from that you also see the singer page application played here that visual studio provides for us but we won't use this template in this course instead we will simply build an empty web application but also add Web API so that we get all the preparations and references we need for our web service so empty web app Web API now click OK okay now after the project has finished loading make yourself familiar with the file structure you see here in the solution Explorer you see a bunch of files and folders here but try not to get confused I'll explain the details when we need them for now it's already interesting to know that these two folders here models and controllers will be used by the Web API since the web api uses the model-view-controller pattern which will be explained in the corresponding section for now the next thing we want to do is add an HTML file so we right-click the project and then go to add and then HTML page and we simply call it index.html ok now as you can see if the route studio has generated some code for us and now we want to test if this web application already works to do that we move our cursor between the body text and write something like test here now we save our file and then we go to file view in browser and as you can already see here Google Chrome is mentioned in this menu entry that's because chrome is the default browser on this machine so when we click it Google Chrome will start and you can already see that everything works just fine great so far the project is ready and now we can start to write some HTML and CSS as you already know a single page application can already have all HTML or don't on its actual page but several parts might just be hidden in our shopping list web application we will have two different views the first view simply shows a text field for the name of the new shopping list and a button to create this new shopping list the second view will display the just created list and you will have the possibility to add new items of course for now we will start with the first view and the first thing we will do for that is simply create a new div for that meta so between the body tags we remove this test string here and start by adding a new div like that so this will be the first view and what you want to have in this view is a title of the application a text field where we put in the name of the new shopping list and the button to create the list so we start with simple header like that and our application is called simple shopping list ok then the next thing would be an input fields with the type text again it will be the name of the shopping list you want to create so we can also add a placeholder something like you lists and last not least of course a button to create our shopping list ok now save that and let's have a look how this will look in the browser this time we don't have to use file view in browser we can simply switch to Chrome and just reload the page well it's functional I'd say but it's not very pretty so let's change that by adding some CSS we go back to visual studio and this time we add a CSS file again by right-clicking the project then go to add and then stylesheet and we call this file styles.css okay now before we can actually use this cascading style sheet file we have to make sure that our HTML page knows the CSS file we can simply do it by dragging and dropping the styles.css from the solution Explorer into the head tags of the HTML page okay great now the page knows the file and now we can actually write some CSS code here in the body part of the CSS file we change the overall appearance of the page so for example if you want to change the background color of our page we can do this here and maybe give it a hex code like this one which is simply some kind of blue and we can also change the font of the overall page and set it to Arial for example give the text another color like white and also change the alignment of the text and set it to Center okay these are only some tiny changes for now but again let's have a look we go to Chrome and reload the page okay much better now I think and now let's start to add the second view again we start by adding a new div and again we have an input field and the button and of course a header so let's go back to visual studio and make the changes so similar to the first view we add another div like that we also have a header but this time it will be the title of the list so maybe something like new list and again and input text fields we had a place over but it's a new item in this case because in this text field we will enter the name of the title of the item you want to add to our shopping list and again we need a button that will be used to add this item and now in this second you we will actually display all the items of our shopping list so we can start doing that just for the sense of creating a mock-up in this case we will start with an unordered list and add some list items to see the results so maybe we need a salad not Salda a salad we also need a classic milk and maybe some tomatoes okay one last thing we have to add is well you want to be able to delete the shopping list items and check them off so for every single list item we need buttons to do that so in between the Li tags we add the button D for deletion and another one like C for checking this off and we can copy that and put it into the other list items okay again this is just a mock-up of course later on we will replace the list items with the real items we want to create but for now let's have a look we go to Chrome again and reload the page well it kind of works but the second view looks a bit strange as you can see here these bullet points for the single list items the buttons look strange here and of course we see both views at the same time I'd say we have to change that so first let's cover the design of the second you with adding some new CSS so we go back to our style.css and this time I start with the unordered list and as you can see here for the beginners this ul is the same unordered list I use here so if I write down the UL tag in the CSS file it makes changes to the UL Dom elements of our page okay now what I want to do is first remove the bullet points and I can do that by changing the list style type and set it to none another thing I want to do is give the holdest maximum width of 300 pixel and then also a little margin change like that okay the next thing would be the single list items we will give them a minimum height like 20 pixel also we change the alignment of the text so it's left we change the background color of our list items also the color of the text which will be some dark grey also some changes in the padding and margin bottom so that there will be a bit space between the single list items okay and the last thing I want to add is the buttons in the list items as you can see here I use the Li and directly after that the button this means this style changes only only used the buttons in between the Li tags and what I want to do with these is changing the float and also the margin like that okay so again we change the appearance of the unordered lists of the single list items enter button in the list items itself so let's save that and have a look again reload the page well okay now we won't win an award with this of course but I think the list looks better than before again we will replace the list with real items later of course but for now the next thing we should do is remove this second view now how can we do that there is also a possibility to do this with style sheets actually but we won't do that in the CSS file we will add the style in the HTML element or the Dom element itself so again this is our first view and this one is the second view we won't we don't want to see in the beginning so what we can do we can go directly into the div tag with the div element and add a style and this time use the property display and set it to none so that the whole diff and the content in the div is invisible we go back to Chrome and reload the page perfect so now we have our correct entrance and actually already the next thing we have to do is adding some logic or intelligence with JavaScript or jQuery before we start writing some JavaScript code we will add jQuery to our project if you don't know it already jQuery is a powerful JavaScript library which makes many many JavaScript LT easier especially when it comes to browser compatibility so for example you write something for Chrome which doesn't work in Internet Explorer and which is not that uncommon to be honest and yeah if you use jQuery then it will handle these issues for you additionally to that you can access Dom elements with jQuery quite faster than with plain JavaScript so let's add jQuery now there are many ways to do this of course you could go to the home page of jQuery and download the library and put it into your project but I think the easiest way to add the library is with the nougat package manager so we access the manager with tools you get package of manager and then manage you get packages for solution and here you can already see the installed libraries we have but we wanna browse for a new one you can already see jQuery down here but just in case you don't see it you can look for jQuery Yenta and that already is to this date in version 3 1 1 so we want to install it for our simple shopping list project it install and that's ok for us and as you can see a new folder was added for us the scripts folder where we can see all the JavaScript files in this case all the jQuery files it comes in different versions there's the whole library and also a minimized version here and we will use the minimized one because it just has a lower size so the next thing we have to do is make this library available to our page and similar to this yes s file we created in the last lectures we will simply drag and drop the Jake library in between the head tags of our HTML page so now our application already knows jQuery and now the next thing we have to do is add a file for our code we will write because we don't want to change any code of the library here so we right-click the scripts folder go to add and this time Java Script file and we will call it app is ok again we have to make it available to our app so drag and drop it here save it perfect ok now let's go to our fjs now to test this there is one simple way to actually do this with jQuery there is a built-in function that will be called when the document has finished loading so for example if we press reload in chrome and then it takes a few seconds or milliseconds to load the page and when everything is done this function will be called and we will use this function to simply write some kind of text into the console so let's do this now if you don't know jQuery we start with the dollar sign which is the jQuery identifier so this means that we want to use a function of the jQuery library and then we can access the document which is our page in essence and this document has a built-in function called ready with that way we can already call it but nothing would happen so what we have to do here is give this ready function an argument and we will give them a new function like that and then we want to access the console and simply write something like ready console info just means that you want to write some text into the console we could also use console lock or console error then the text would be written in red color but I'm used to use info here so again we access jQuery with the dollar sign then access the document with ready we call a function you can see it here specify a function to execute when the Dom is fully loaded so when the page has finished loading and then this is our own function which will simply write ready into the console okay now let's save it and again let's go back to Chrome and at this time what we want to do is we want to open the developer console we can do that by pressing f12 on our keyboard or go to the menu more tools and then developer tools and you can see here that the console is already open and now what we have to do is simply reload the page and sometimes it's the case that Chrome or any other browser loads a cached version of our JavaScript code in that case we can simply right click the refresh button and say empty the cache and hard reload let's do this now this was fast and as you can see here everything works just fine ready was written for us and if you want to see how this looks in the code you don't have to actually go into visual studio you can also click the app J's here and there you see the same code we have written in Visual Studio okay so everything works just fine now let's move on and in the next lecture we start writing code to create a new shopping list ok our setup works so far when we have a look we have HTML file here we have some CSS for the pretty part and also the JavaScript file for the actual logic of the web application so what we have to do now is write some more logic to create a new shopping list and add items to it creating a new list should be done with the create button here in our HTML this one when you click it the hold F here should be hidden and the other div this one down here should appear also what we want to do is we want to change the the the content of this header tag here this should be the title of the list we put in here into the input text field okay I'd say let's do this now we go to the hjs and we write a new function let's do this up here new function and we call it create shopping list okay now since we will always have one specific shopping list open we can define this list globally and access this list in every single function we will create in the future so outside of the create shopping list function we declare the current list do this with the current list and for now it's simply an empty object now we can go back to the create methods down here in here the current list we have defined globally we'll get a new member which is the name of the current list like that now the problem is we have to give it an empty name in this case because we don't know how to access the HTML element where the name was written so to be able to access the element we first have to go back into the HTML file and give this input text field here and I D can simply add one this way call it shopping list name and with that ID we can access the fields back in the JavaScript and again we will use jQuery to do that we start with the dollar sign and then use the number sign or hash to tell jQuery hey I want to access a Dom element with a specific ID and we use the same ID we have entered before like that and we want to have the value of the input text field and there's a function called well like that and that's it we already have our name okay now actually the next step would be to call the web service and sent this new list to the service the service would give us an ID back and then when we get the response of the service we would show this newly created list of course we will do that in the corresponding section later on but for now let's prepare this way without an actual web service call to get a feeling how things may work so here would be the actual web service call but we will just pretend we call the web service and implement some offline logic here so we have the name of the list the next thing you want to do is display the name off the list on the website and actually remove the diff where we have created the new list so the first view and we want to show the second view with the title of the list and again we can use jQuery to get the elements we needs but first we have to add some IDs into the HTML code again so we need IDs for our first view because we want to hide this view and we need a way to identify it and I'd say this is the create list diff or view you can choose any name you want and after this ID we add IDs to the second view which is the shopping list this and also this header here needs an ID because we wanna change the content of the setter to the title to the shopping list title and last ID I wanna set is the idea for the unordered list which is in essence the shopping list items okay so these are all the IDS we need so far now we can use jQuery again to get the elements in this case the h1 header here so we go back to the HKS and what we want to do is we want to set the name so we will use jQuery to now you know it access the shopping list title and this time we want to change the whole HTML and set it to the current list name next we want to access the unordered list again this is the unordered list with the ID shopping list items essence we can copy the ID here access it here like that and empty it so we won't see any items first and the last thing we want to do is we want to hide the first view and show the second one so the first one was the create list diff and we can simply call hide and the second u is the shopping list this here we can show it like that okay so just a recap we set the name of the current list to the input fields of the first view shopping this name which is here and then we change the HTML of the shopping list title of the second view which you can find here the shopping is title and then we also empty the shopping list items this one here and then we hide the first view and show the second one this is the first view here the whole diff and down there the second one okay so far so good the last thing we have to do now is actually call this create shopping list function you can copy the name save the file and then go to the HTML and this create button here can have events for example one event is when the user clicks the button and we can access it with on click and simply tell the button to call the create shopping list method when it was clicked ok that's it I'd say let's have a look you save the file now we go back to Chrome and just make it a bit smaller and now we reload the page okay so far nothing happened that's okay and now I say this is my new list created perfect everything works just fine so I entered the name the header was changed on the head of the second view and the first view was hidden and now the second view is available and you can also see that there are no list items left anymore because this is a new list so we want to enter new items to it okay everything works just fine but you can already see one well kind of disadvantage of single page applications if you want to go back and create another shopping list you can't click the back button of the browser instead you have to click the reload button because this is the initial state of our application so if I reload the page again I see the first view I can enter something like no second list and click create everything works just fine but again I can't go back now of course there are ways to fix this and we will cover these ways in a future lecture but for now we just reload the page and we're good now to give you some more detail of what actually happens underneath we can simply inspect the items of the DOM just right-click any Dom element of the page and click inspect and now you see our code you've written in Visual Studio here is the shopping list title and here the shopping list if so our second view and here you see the first view and you can see that also here's a style change jQuery gave it a display:none the same thing we did with the second view initially so when we reload the page things have changed again now we can see the first view and the second view has this display:none property and when I say well shopping list and create it as you can see these properties have changed now here is no display none anymore but here it is so the first view was hidden by jQuery and the second view is now visible because we said hey jQuery show the div with this certain ID here okay now the next thing we will do is add items to the shopping list okay now a shopping list is kinda useless without any items on it so the next thing we want to do is adding items to the list so we go back to a visual studio and similar to the create shopping list method we add a new function and this time we call it add item okay now what we want to do with this method is we want to create a new shopping list item with the name being the value from the input text field of the second view kinda similar to the process of creating a new shopping list and then we add this new item to an items array of the actual shopping list objects but again before we can do that we have to solve some issues first the input field has no ID so let's go to the index.html and give this input field here similar to this one and I D and this time we call it new item name okay now the next thing we have to do is we have to call the add item method and since we are already in the HTML file we can do it right here again it's the on click event and when we click the Add button we call the add item method okay now in the create shopping list method in our fjs right here we have to initialize an items array of the current shopping list object let's do that now we can simply do it like that we call the current list and now give it an items array like that okay so our current list now has its name and a list of all the items great now everything is ready to actually implement the add item methods now this time we first create a new item objects like that and again we give it a name similar to the shopping list and this time the name would be the value of the new item name input field and after that and we put the new item into the array or the list of the items of our current shopping list object so the current list has now an items array and with push we can put the new item into the array now to test that already we can do one thing we can simply write the current list into the console and I'd say we will do exactly that so console info current list again we created a new item its first an empty object we give it a name and then we push this new item into the array of our current list items okay save everything and go back to Chrome and reload the page let's give it a new name we create a new list my you know list it creates and now I have to buy some milk click Add and as you can see here in the console the list is written down here we can expand it and also see here is our items every with one item in it let's open that we have an object and the name of this object is milk okay perfect so this whole logic works so far now since we don't want to see our shopping list in the console all the time we now have to add new elements to the Dom with every new item on our list so let's go back to visual studio every item will have a title and also two buttons want to delete the item from the list and want to check it off when you put this item into your cart now for that matter we will create a new method again and this time the method we will create is called draw items okay now not only does this lead to a more readable code when we extend the code into another function we also will need this draw items function in other situations further on for example when we want to load an existing shopping list but you will see that later so in this method the first thing we want to do is empty the unordered list just to make sure there are no old entries visible and we can already return that into a new list object so we can do that like this this is just a convention for this variable name that I know it will be a jQuery object that's why I use the dollar sign here of course you could call this variable just list but since it's a jQuery object I do it this way and what we want to have here is the actual list we already have on our page so the shopping list items list but we wanna empty it so now we already have our unordered list element now the next thing is we want to go through the item array of our current list and we will do that with for loop and then we built every necessary Dom element for every single item on the list so first the for loop goes through every item of the array okay now to make things a bit easier we just declare the current item first which is of course the item of the items array with certain index and then we can already start by creating a new list item again it's a jQuery object and we can create the list item like that this just tells jQuery I create a new Dom element with this certain tag this just in this case the e list item and we can already change the HTML of this item and give it the name of the current item and also we can add a new attribute to it and let's put that into another line the attribute I wanna add is the ID and the value would simply be item and the current index so attribute in this case takes two arguments the first one ID is the attribute itself what kind of attribute and the second one is the actual value now we need two more things the first one is the delete button it's kind of similar to the list item we can tell jQuery hey this should be a button and we can already add the text of the button here like that and after that we have to append this button to our list item elements like that and then we also need a checkoff button so we can copy this one here change the text and also the name of the variable like that and the last thing would be to add the whole list item to the list like that okay now just a short recap we created the list first and then we went through the whole items array of the current list took the current item and then created a new list item with a name and a new ID and also edit the two buttons - the list item and in the end of the loop we appended the list item to the whole list now the question may arise why do we use a for loop if we only add one single item all the time well we empty the whole list first so it could be the case of course that there are more items on the list so we need to follow up and also we want to use this draw items method when we get for example a complete shopping list from the web service and in that case again could be the case that there are more items than just one on the list and that's why we use a for loop okay now the last thing we have to add is calling the actual method draw items when we add a new item so in the add item method we call the draw item so that we will see the new item on our HTML page and not only in the console okay I'd say let's save that and let's see how this looks in chrome we reload the page creating new lists and now the classic I need some milk and as you can see not only we see the new item in the console but also we see it on our HTML page and now of course I can add another item like the salad click add and now I have two items here perfect ok and now as you can see these check and delete buttons won't do anything and that's what we will change in the next lecture ok let's go back to a visual studio and now the first thing we should do is actually calling a method when the delete or check off button is clicked now for that matter we change the code of our draw items method a bit here you can see we just added the delete and check button and now what we want to do is similar to the other buttons we add the on click event and say when you click the button you call a method which is called delete item with a certain parameter and in this case it is the index the current index of this for loop ok and let's put this into the next line so we can read it a bit better button on click should call the delete item method with the corresponding index ok and we can do exactly the same for our check off button so we move it into another line and here we paste the on click but of course we change the method call it check item but also with the current index okay now the next thing of course we should do is implement these methods so the first one would be function delete item it takes the index as an argument and what we will do here is quite simple the current list has the items array and we will just remove these this item with a certain area from the list splice is the method that does exactly that so we take the index of the argument and remove one item and after that we called draw items again so that we also see the result of deleting the item on our HTML page and as you can see this is another use of the draw items method so it's good that we have extracted the method okay so far the delete item method next would be the second item method also takes an index as argument and what we do here is we access the item first with corresponding index that's why we gave it an ID before the draw items method and then we add a class to this item which will be called checked so what's a class the class in this case is a CSS class we didn't create a CSS class before so we will do this now just to explain that the check item method again with the you know it already with that identifier we access the Dom element that has this ID so item and then underline and index and then with at class we will add a CSS class to that Dom element okay now let's go to our style.css and create the class and again just to recap you've seen the UL li and so on tags here this means that we will change the style of the of every item that is a list item for example but now we only want to change the style of any Dom element that has this specific class which is called checked in this case and what we will do is simply change the text a curation and set it to line through now this means that anytime we click the check button the text of the list item will get a strikethrough okay so we saved it already now we can go to chrome and already check that reload the page create a new new shopping list and add milk for example and also sell it now we can delete salad see as we worked already now we can check off the milk perfect this already works quite nicely but there's one last thing that still doesn't work although what happens if I click this button again well we add the class all the time again we can inspect this element and you see it here class checked was added to this list item so if you did anything wrong if you did a mistake we can't undo this checking so let's change that in the JavaScript code we go back to visual studio and we have to make this method a bit bigger first we have to check if this element here also has a class called checked if this is the case we can copy the whole line we don't want to add the class we want to remove it again okay and the thought we will add the class just as we did it a minute ago okay now let's save this one again and let's have a look reload the page let's have a look here and now we create the tests and create a milk item and now we see the item here we check it gets the class and if you check it again it will remove the class okay so now we can add items we can check them off and undo this and we can also delete items now of course you might have already noticed that for every new implementation we have to create a new shopping list we have to reload the page create a new list and only then we could test to add items check them off and delete them well to make things a bit more enjoyable in the next lecture you will learn how to get an already created shopping list so that we can start with this list right away and test all the implementations without the need to create a new shopping list every time okay now how do we get an already created list let's say when everything works with the web service in the database you create your list at home and then you're going to the grocery store and wanna load your shopping list on the smartphone the easiest way would be if you could just enter ID and then the ID of your list for example something like that now nothing would happen it just loads the entrance of our single page application but this would be a nice way to get a list from the service we can also implement all the preparations for that offline and already test if this works so what we have to do now is we have to look for this little string here in the URL so let's go back to visual studio we will go back to our ready function and the first thing we have to do here is get the current URL so the current page URL this the window the location atria this will be the whole URL you see in the address bar of the browser then as I already mentioned we are looking for this little string here so what we can do is you wanna get the which will be the ID index of the shopping list so with the page URL we have a look for a string which will be question mark ID equals now what does this line do with index off we can look for a certain string in another string and then index off would return the position of this string and if it didn't find the string it will return minus 1 that's why we can check for -1 now now the ID index if it is not minus 1 this means the user has entered something like the question mark ID and so on and what we want to do then is we wanna actually load the corresponding shopping list with a given ID so we will call a method like get shopping the Spidey for example shopping lists by ID and then we have to give this method the ID and we can extract the idea of this whole string of course so we take the page URL take a substring of that and say give me the the index ID add the ID index and add four like that we have four characters here the question mark ID and then equals and after the equals sign will be the ID of the list okay and now let's create the get shopping Spidey method takes the ID and first just to be sure let's write the ID into the console and now since we don't have a web service in the database we simply create a dummy shopping list to test all the things so the current lists will get a name like mock shopping list and of course also some items which is a simple array and the items are objects again with a certain name like milk and and just copy these [Music] three items and maybe this time we want to buy complex and straw berries okay these are our items this is the array okay and now what we have to do is we have to show the shopping list with all the items and we actually already did that namely with the create shopping list method here what we do is we set the title of the current list we empty the list we hide the first you and we show the second view so in essence we can extract that code so maybe just write a new function here I call it show shopping list like that and then we can remove the code here put it into that method and here we just call show shopping list like that and then the next thing we have to do is also call the method here show shopping list and also draw all the items because with show shopping list we just set the title of the list up here and empty the list also hide and show the views but the items are not visible yet and so we have to also draw them here okay now let's save that and also tests it in Chrome we reload the page and already see it works quite nicely I think we loaded the new shopping list with the ID one in that case doesn't matter which ID we enter here we can also enter 10 or something like that we will always load our dummy shopping list or the my shopping list here you see that we get the correct ID down here in the console and we have all the items of the list we can check them off you can undo that and of course we can delete our items and still if we remove the ID we come to our normal entrance we can create a new list and add new items okay now this works it will help us for future implementations when we use the back API and the database for now there's one last thing we should do on the front end and this would be improving the usability now to improve the usability of our shopping list web application we should implement the following features when the website has finished loading like that the cursor should be set into the text field this one for the new shopping list and then when the user presses enter return the shopping list should actually be created so that the user don't has to use the mouse anymore to create the list so like that and then the same should happen for adding new items so when we created the list the cursor should be in - should be set into the input text field and then with Enter we can create the new item and add it to the list and the last thing would be now you see here when I enter milk and click Add milk still stands in this info text field we should change that of course - so let's make changes now and for that we go back to visual studio now in the document ready function we add one line to put the cursor into the text field the shopping list name element gets the focus easy as that and directly after that line we start to listen to every key press of the user in this text field now we can do that that way in list name we use the method key up which means is any key was pressed on the keyboard and with releasing this single key this method then will be called the method we will give this event right now so with key up we add a new function and this function takes an argument called event and the event object has the member our property which will be the key code and the key code for return would be 13 and if that's the case we simply call our method we already implemented create shopping list like that so again when the document has finished loading we put the cursor into the input text field and then we also listen to the key up event and if the user enters a key which will be returned so it just means if he presses return we will create the new shopping list so let's save that and test that we reload the page and as you can see the cursor is already here so I don't have to do anything with the mouse I can just say test and it returned and the list is already created do you feel the relief you don't have to click anymore okay now let's do the same thing for ad items to the shopping list the code is actually quite similar we just have to put it into the show shopping this method and switch the identifier of the text field so we can copy this code here and then go up to our show shopping list method and down here we paste it change the name to new item name do the same thing right here and instead of creating a new shopping list now when the user hits enter we add the item and last but not least we wanna remove the text when an item has been entered so we can actually copy this line here put it down here and instead of getting the value we actually want to set it to an empty string easy as that now let's test this again reload the page maybe empty the cache and create a new list as you can see the focus is now also in the text field for the new item I can't a milk return now I can again buy some conflicts you see it works so it is done the front end is finished for now so let's sum up what you have learned so far and then we will turn to the back end and build our with API web service you actually learnt quite a lot in this section about the front end of your single page application you've started with creating the project in visual studio and adding the necessary HTML and CSS files this means you now know how to write different views for your application and make them a bit prettier with cascading style sheets after that you integrated jQuery into yoga application project this is a crucial part because with jQuery and Java script you actually put intelligence into your web app you have learned how to switch the views create new JavaScript objects and snip you late the Dom tree when the user clicks a button additionally to that you made the users life easier with implementing a little keyboard functionality hence improving the usability great now it's time to actually build and call the web service now if you made it this far you are definitely ready for the complete singer page application with asp.net and jQuery hands-on course on udemy you seem to have what it takes to build a single page app completely by yourself from start to finish in the next sections of this course you will build the web service using asp.net Web API - you will save your data persistently in a sequel server database with entity framework and you will learn how to publish your web application on a Windows server with Internet Information Services as a thank you and reward for completing the first section of this course I want to give you a pretty sweet discount make sure to use the link in the video description below I'm looking forward to seeing you again in the course

Channel: Patrick God

Views: 40,924

Rating: 4.7615895 out of 5

Keywords: Single-Page Application, ASP.NET, jQuery, JavaScript, C#, Web API, ASP.NET Web API, Web API 2, ASP.NET Web API 2, Entity Framework, Visual Studio, Visual Studio 2017, LINQ, Single Page Application, SPA, Angular, AngularJS, Tutorial, Course, Online-Course, .NET, EmberJS, MeteorJS, BackboneJS, C# 7, single, page, application, Web Development, Web Deploy, Windows Server, Internet Information Services, IIS, SQL Server, SQL Express, SQL Server Express, Web Application, Udemy

Id: H5fGvOK9nIc

Length: 79min 25sec (4765 seconds)

Published: Wed Aug 30 2017