Asp.Net Core 2
In this series we will be focusing on all things Asp.Net Core 2. We will start with one or more articles that can be used to get up and running using Asp.Net Core 2 as quickly as possible. The subsequent articles will be more in depth and will be based on both the documentation and additional components that will add functionality to the core product.
#29 Generating The Offset Pagination Urls
In this article we will focus on generating all of the information that we need to display all of the various components of our pager to the user. We will start by generating the stats which will tell the user which items they are viewing out of how many, next we will generate the urls for the first, next, previous and last anchors, then we will generate the information for the individual page anchors using a separate anchor class and lastly we will determine which of the first, next, previous, and last anchors should be shown at all.
#28 Starting Offset Pagination
In this article we will discover the parameters that we need in order to perform offset paging which we will get both from the user via the url and provided by us. Once we have the required information we will create a pager class that we will use to encapsulate the functionality that we need. Using the pager we will determine the cases when we would need to redirect the user and where to redirect them to as well as selecting the correct entities from the database based on the current page.
#27 Creating A Mock Context Builder
In this article we will focus on creating a database context builder class that will make it much easier for use to create data and use it as the data store for an async capable mock dataset. Once completed we will just need to retrieve the database context from the builder and use it when creating our mock repository.
#26 Creating a Mock Repository
In this article we will build upon the previous by making it easier to first create mock database sets and then make it easier to add data to them. We will finish up by converting from using hard coded database sets to using a repository which would more closely mirror what would normally be done in a real world project.
#25 Mock Entity Framework Async Operations
There are many times that we would like to serve data from an in memory collection, whether it be for unit testing or just messing around to see how something works, where we have to/want to do it asynchronously. Entity Framework comes with a handy extension method to convert a collection to a list asynchronously that we can use for this purpose. Unfortunately for us there are a few hoops that we must jump through to do this and we will see what those are in this article. By the time we are done here we will have created all of the helper classes that we need to mock up a database set that is capable of utilizing asynchronous methods.
#24 Picture Tag Helper
In this article we will round out our image related tag helpers by creating a picture tag helper. The code required to generate the required html is a little bit more involved due to the nature of the attributes required for the source tags but we will manage to sort them out here. We finish up by updating our base class so that we can specify a class, id, and/or additional attributes, such as data dash attributes, in the rendered html using our tag helpers.
#23 Device Pixel Ratio Image Tag Helper
In this article we will create a new image tag helper that will take care of creating img tags that will respond to the device pixel ratio (DPR) of the users device. This allows us to serve a higher pixel density image for devices that can make use of it while saving a users data by sending down a smaller image for lower resolution devices. In this process of doing this we will create a base class that both of our tag helpers can inherit from which will allow us to keep our code as DRY as possible.
#22 Responsive Image Tag Helper
In this video we will create a tag helper that will make it easier to create responsive image tags. Our tag helper will use some easy to read and understand attributes to generate the necessary attributes on our image tag. Not only will the tag helper make sure that the attributes are formatted correctly if we should ever need to make a change, to say how we implement lazy loading, all we will need to do is update the tag helper and all of our images will be updated without us ever having to track down all of our image tags and update them manually.
#21 Displaying The Optimized Images
In this article we will see how to create the ui for displaying the original and optimized images from the previous article. One of the more interesting parts is seeing how to read the sizes of the files located on the server and to organize the results using linq for efficient display on the screen.
#20 Optimizing Images
In this article we will see how we can create a generic node script with a configuration file that we can use to optimize our images using a package called imagemin. Imagemin has an ecosystem of around 40 plugins that you can use in order to optimize an image in just about any way you would need. We will also take a look at a web based application that you can use to optimize individual images by hand while at the same time being able to see what the final ouput will look like. Lastly we will also take a look at another web application that we can use to compare images so that we can see how similar or not our optimized images are when compared with the originals.
#19 Lazy Loading Images
In this article we will see how to lazy load all of our image tags. The process will be to add a small npm package to our project and then to update our image tags. The updating is extremely simple and basically boils down to adding a css class and coverting any srcset and src attributes to be data dashed. As we will see this will work for all of our images regardless of whether we are solving either the resolution switching or art direction problems.
#18 Responsive Images
In this article we will see how to deal with a couple of different problems, namely the resolution switching and art direction problems, related to the use of images on our site. We will see how to use the built in browser capabilities to dynamically switch to the appropriate image based on the device the user is using to visit our site.
#17 Bottom Navigation
One of the most defining features of a mobile device is its relativaly small viewport. A popular way of dealing with this when it comes navigation is to place our anchor tags within a collapsable menu that is animated in and out with the press of a button. I have used and continue to use the hamburger icon for this very purpose. If you do any amount of searching you can find plenty of negativity around its use. One possible alternative, which we will implement here, is a bottom navigation menu that is displayed only on smaller form factor devices.
#16 Main Navigation (Cookie Consent)
#15 Main Navigation (Mobile Menu)
#14 Main Navigation (Search)
In this article we will continue the process of setting up our main navigation bar by adding in a search form. In addition to that we will also add the required server side code to take advantage of the search functionality that we added in previous articles.
#13 Main Navigation (Authentication)
In this article we will focus on adding the authentication links. For this project that includes the ability for the user to register and login. If they are authenticated they will then have the ability to visit their account page and to logout. In the case of logging out we will use a form and see how to style it to look like all of the other links as well as how to include the anti-forgery token when creating a reusable variable as we have been doing.
#12 Main Navigation (Anchors)
In this article we are going to create the main anchor tags for our top navigation bar. Once they are defined we will of course apply some styling to make them fit in with the overall feel of our header. Probably the most important step of the this process is we will mimic the mixin ability of templating languages like pug to allow us to write the markup for the anchors once and have them displayed in different locations. This will be important for us since we are working to create a responsive navigation bar that will work with any form factor from desktop to mobile.
#11 Main Navigation (Logo)
In this article we will start creating the header of our web pages which will contain the main navigation component. We will start by including a css reset and some basic styling by importing a few files into our main sass file. Once that is done we will create the basic layout of the main navigation starting with a logo area which we will style in a separate sass file and once again importing into our main sass file.
#10 Displaying the Search Results
In this article we will create a razor page that we can use to add to, delete from, and clear our Lucene.Net search index. Once we have that in place and we have created our index we will then modify our search page to actually perform and display the search results. And finally we will modify our read page so that when a user clicks on a search result they will actually be able to read the article they have selected.
#9 Interacting With the Search Index
In this article we will add the ability to add and delete entries within our search index. We will also add the ability to clear the entire index and finally of course to be able to perform a search against it.
#8 Full Text Search Using Lucene.Net
In this article and a couple of following articles we will be adding full text search capability to our web application. The project that we will utilizing to add this capability is Lucene.Net which is a port of the Lucene search engine library.
#7 Seeding the Domain Database
In this article we will focus on adding some seed data to our domain database. We will make it so that whenever our application is started our seed method is invoked so that the data is added automatically for us if needed. We will also create the razor page that we will use to display our article.
#6 The Domain Database Using Entity Framework
In this article we will define a class that will represent the data within a table of a SQL server database. We will also create the context that will allow us to interact with the database and a repository class that we can inject into other code that will give us access to the data through the context. Finally we will use entity framework to create our database and table for us without us having to write any SQL code.