comment 0

More work with my ASP.Net Core MVC web app demo

Also see my previous blog post – My Experience Getting Started with ASP.Net Core MVC. I started with this post on Microsoft docs – Getting started with ASP.NET Core MVC and Visual Studio. One of the ways to approach starting with a blank project is to create a project from the template and reference that and pull out the pieces and code that you need. One of the first problems I encountered was that my create, delete and those types of links were rendering as text and not links. Found out I was missing some references as follows

@using WebApplication1
@using WebApplication1.Models
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

Another problem I encountered with using webpack was that I got the error message, “$ is not defined” for jQuery code. One way to fix this is to expose jQuery from webpack. I eventually ditched webpack and also npm. For one, webpack was creating a large .js file which was affecting page load times and I could see a delay between html items loading and styling being applied. The webpack build even gives a warning related to the file size. It was easy enough to manually add the files for jquery, jquery validation, bootstrap 4, popper.js and later font awesome and chartjs ( which I later replaced with Google Charts). Using npm also creates a huge (like > 150 MB) node_modules folder. Maybe I need to understand webpack more. I am guessing this is useful for huge projects with a lot of dependencies and packages. Below is some interesting code I came up with to create a button group radio button select instead of a drop down list

Link to code
code-3

Visual Studio by default uses IIS Express with a default configuration. There is also a configuration named after the project name. After experimenting with some things to be able to expose the web server to other devices on my network, I was getting an “unable to connect to IIS Express” error. I fixed this by deleting the config files and changing the port number (which generates a new config file). I found that the IIS Express config can live in a couple of places. You will have to do your research on this.

C:\Program Files\IIS Express\config
C:\Users\[Your Username]\Documents\IISExpress\config
C:\Users\[Your Username]\source\repos\[Application Name]\.vs\config

I found that to expose localhost I could run the following command

netsh http add urlacl url=http://*:[Your Port Number]/ user=everyone

See also this Microsoft docs post – Handling URL Binding Failures in IIS Express. The other thing I did was use this nifty tool called ngrok. This tool exposes http resources on your local network to the internet. Very nice if you need to quickly demo while developing. The paid version even allows custom names but otherwise you are assigned a random url each time. The command looks something like this

.\ngrok http –host-header=”localhost:[Your Port Number]” [Your Port Number]

Interesting thing that I discovered was that they dropped Glyphicons in Bootstrap 4. I wondered why and someone pointed me to following post that has some explanations which made sense – Question: why have glyphicons been dropped?. This stood out for me, “plus, dedicated icon font projects could do a better job than us.”

For testing email notifications I am using Mailtrap.io — Fake smtp testing server. Dummy smtp email testing. If you are sending html emails make sure that .isBodyHtml is set to true. When you add authentication when creating the project you get an EmailSender service with a blank SendEmailAsync function that you have to fill out. I created configuration variables for SMTP_HOST, SMTP_USER and SMTP_PASS and stuck those in appsettings.json. I used the ConfigurationBuilder class to read the values from the json file. Make sure and right-click the json file and select “Copy to Output Directory” and this will copy it to the debug folder which is the path looked at in this bit of code .SetBasePath(System.AppContext.BaseDirectory). My web app was starting to look better.

screen5

Next thing I decided to do was load my data table with 1 million rows of random data. My SQL looked like this and it takes about 4 minutes to run this on my laptop.

Truncate Table Items
Go

Declare @count int
Set @count = 1

While @count <= 1000000
Begin
   Declare @RandomCategory int
   Declare @RandomPriority int
   Declare @RandomDate DateTime

   Select @RandomCategory = Round(((3 - 0) * Rand()) + 0, 0)
   Select @RandomPriority = Round(((3 - 0) * Rand()) + 0, 0)
   Select @RandomDate = DATEADD(day, (ABS(CHECKSUM(NEWID())) % 65530), 0)

   Insert Into Items (Details, Priority, Category, DateSubmitted) values ('Details - ' + CAST(@count as nvarchar(10)), @RandomPriority, @RandomCategory, @RandomDate)

   Print @count
   Set @count = @count + 1
End

Together with this, I coded a paging control which I will discuss in a separate blog post.

screen6

Another thing that I did was create a pie chart report using Google Charts and Json data from the model. This and some other things I will also talk about in another blog post as the one is already too long.

screen7

Please share your thoughts and experiences with me in the comments below.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s