Tag / JavaScript

by Ricardo Sanchez

Run code from your code editor

The other day I discovered this useful extension that allows you to run your code from within the Atom editor. The name of the extension is Script Runner, and while there are many other extensions that do this, I really like how this one shows the code results on the right side of your screen, allowing you to easily see your code and the result of it after running it side-by-side.

After discovering this tool my first thought was, can I find the same extension or similar for the VS Code editor? The answer is Yes. The best extension I found to run your code while in the editor is Code Runner, and while this extension shows you the results in the console window, it still displays the results in a clear way by only adding the result and the time it took to execute the code. Very useful tool!

Why are these tools useful? For starters, they allow you to see the result of your code right away, without the need of setting up a unit test, or anything else really. You still have to output your result by doing a console.log for example, but you don’t have to run it in a browser or anything like that.

Below is an example of a FizzBuzz program using Atom and Script Runner:

And below is the same code using VS Code and Code Runner

They are very similar and I will be using both, I really like how easy it is to run and see your code’s output right from the editor.

To download and install these extensions, just click on the links below, and happy coding!

Script Runner – extension for Atom editor

Code Runner – extension for Code editor

by Ricardo Sanchez

Infinite scroll with ASP.NET MVC

An infinite scroll is a nice solution when you need to display large amounts of content in page, it helps by increasing performance in such a page because only a specific number of items is shown when the page first loads. As the user scrolls down, more content is shown. An infinite scroll is a better solution than having a paginated view of the page which usually breaks the flow of the page by splitting the content into multiple pages and then users have to click on a button or link to be able to see the next group of items…

I’ve used the following infinite scroll solution with ASP.NET MVC sites and it works great and it is simple to implement, all you need is jQuery and a little code in the controller and the view.

First, add a parameter to the controller action that returns the data for your page, this parameter is the one that we’ll use to specify the page number we need to get data for. The real work happens in the GetPaginatedProducts method, every time the user scrolls down the page this method is called by the controller action, we pass the page number and then use the Skip Linq command to get the next set of items.

The Controller

Here is the code we need in the controller for the infinite scroll to work:

controller

The JavaScript

The following is the javascript needed to display a loading image and to initiate the call to the Product action on the HomeController, see below. Also, you will need to create a loading image to display while the application is getting data from the server, I used this site to create mine.

javascript

The View

Finally, in the view we make sure we have at least two divs, one with the id “productList” where the data is appended to when scrolling to the bottom of the page and another one with the id “loading” to use it to display the loading image:

view

Where is the sample project?

I’ve added the sample project to CodePlex, you can download it here: https://github.com/ricardodsanchez/InfiniteScroll