Add an Asp.Net Core MVC UI

Continuing the MyReverie Solution, I would like to add a UI to begin displaying data.

The UI will be quite basic for now injecting a simple dummy service in to our controller returning mock data to expose to to the View.

Okay, let’s go…

Create a new Solution Folder under the src folder called ‘Web App’ within this folder create the new Asp.Net Core MVC project and name it ‘WebMVC’

Template

Change the Authentication to be ‘Individual User Accounts’ –  we will be adding Authentication later on.

Auth

Select Ok and Ok again to create the new project

Okay, now we will go and create new ViewModels.

ViewModels are a View perspective of our underlying data – seperating out Models or DB Structure from our view.

Let’s create a new folder we will call ViewModels within the same project and within it create a new folder called GoalViewModel and within this folder create a new class called IndexViewModel, Also within the ViewModels folder create a new class called ‘Goal’ – the reason I am choosing this structure is to create a separate Goal object that will encompass the typical properties associated with a goal and then the IndexViewModel will be the grouping of ViewModels for the Goal View.

Within the Goal Class update as below

image

I am just creating one property name for now, I will build upon this later on.

Within the IndexViewModel class update as below

image

Now we will create a new controller selecting the ‘MVC Controller – Empty’ template and name it GoalController.

Now in the new GoalController class, we will want to call out to service methods in our new service class to return some mock data.

First lets Inject our service via Dependency Injection specifically Constructor Injection(we will create this service class after)

Create a new Constructor for our GoalController class and at the top of the class create a private readonly backing field called ‘_goalService’

Now create a Constructor injecting an IGoalService and assigning its goalService to our backing field – I am injecting an interface to decouple any dependencies of concrete classes making it more maintainable and testable.

The class should look something like below at this point

image

Okay we will go create our IGoalService interface in a new project folder we will call ‘Services’ within the WebMVC project

Within the newly created class change as below

image

Now let’s go ahead and implement this interface creating a new GoalService class

Create the new class within the Service folder and change as below

image

There will be warning saying there is no await in async method that is okay, we will be modifying this method to return something more meaningful after.

Go back to the controller class and and add the missing WebMVC.Services namespace

Do a build to ensure everything compiles correctly.

If you build successfully – Great… we are almost finished.

Now lets update the Index method in our GoalController class to return our Goal to display in our View.

image

Now lets update our View to display some information.

Within the Views Folder create a new Folder called Goal and within the Goal folder create a new view with the following settings

image

Now update this new view to be as below

image

Finally we need to update our ConfigureServcies  method in our Startup class

by adding the below:

services.AddTransient<IGoalService, GoalService>();

In order to resolve our injected dependency(IGoalService) in our Controller to GoalService

Now run your application, you should hopefully see the below to see the results

image

That’s it for now.

This code will be up pushed to the MyReverie GitHub repo under tag ‘UI’ for tracking.

Adding versioning to my Web API

Now I would like to add versioning to my MyReverie Web API, there are a few options available to me such as :

Query String, Url based as well as Http header.

For my purposes I am going to choose the Url based approach, purely a personal preference of being cleaner and more explicit.

First things first we will need to go ahead and install the Nuget package:

Microsoft.AspNetCore.Mvc.Versioning

Within the Startup class and ConfigureServices method, add:

services.AddApiVersioning(v =&gt;
     {
         v.ReportApiVersions = true;
         v.AssumeDefaultVersionWhenUnspecified = true;
         v.DefaultApiVersion = new ApiVersion(1, 0);
     }
 );

The above three properties are particularly useful in that they allow default versions to be set if none are explicitly set as well as providing header information on versioning that are supported.

In the above

ReportApiVersions: we are requesting the header to respond with supported API versions
AssumeDefaultVersionWhenUnspecified: set the default version if none are explicitly requested
DefaultApiVersion: Set the default version to 1.0 if default is used

To better illustrate point number one above see below. I used Postman to see the response header with supported versions listed, which I highlighted

Versioning_thumb7

Now all I have to do is simply add and update the controller attribute in my case

At the moment as I am still on version 1, I will add the attribute

 [ApiVersion("1.0")]

  and update the route attribute like so:

[Route("api/{v:apiVersion}/[controller]")]

So the result of the GoalsController class attributes should look like the below

Versioning_thumb1

Now let’s test our F5 and browse to our API endpoint with suffix : /api/1.0/goals, in my case below.

Versioning_thumb3

That’s it my API is now versioned v1.0

Reset WordPress admin password with MySql workbench

This post is particularly directed at a configuration of an Azure wordpress website with MySql as a linked resource.

Select your Azure wordpress website in your Azure portal then select dashboard

If you scroll to the bottom you will see a section titled ‘linked resources’ under here you should see your MySql database linked resource.

If you click on your MySql database name it will bring you to a clear db web portal.

If you click endpoint information from the top menu, note down your hostname along with your access credentials as you will need them to log in to a MySql client (MySql workbench)

Next click on the dashboard menu item on the clear db web portal and under the ‘Managing Your Database’ heading you should see a MySql workbench link which will bring you to a download page in which you can go and follow the instructions to download and install the client.

Once the client has been installed you should be able to run it and enter the hostname, username and password for your MySql database you noted earlier in the prompt that appears .

From here you should see a query windows open by default if you type in ‘SELECT * FROM [your database name].wp_users;’ and select the lightning bolt in the menu that will execute this sql statement you should see a list of users in your wp_users table in your database.

From here you can manually edit the ‘user_pass’ column that is associated with the admin account with an md5 hash(you will need to generate an MD5 hash of your new password, which you can utilize md5 hash online generators) of your newly chosen password and select the apply bottom near the bottom right of the table view.

That’s it – you can now go to back to your login page and enter your username with the new password and login.