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’
Change the Authentication to be ‘Individual User Accounts’ – we will be adding Authentication later on.
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
I am just creating one property name for now, I will build upon this later on.
Within the IndexViewModel class update as below
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
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
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
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.
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
Now update this new view to be as below
Finally we need to update our ConfigureServcies method in our Startup class
by adding the below:
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
That’s it for now.
This code will be up pushed to the MyReverie GitHub repo under tag ‘UI’ for tracking.