Step-2 Fsharp-PhoneCat Views Using Razor
This is step 2 of my blog series on Web Application Development in Fsharp using ASP.NET MVC
In the last blog post we have created web-api endpoints which serve the data for the home page and in this blog post we are going to create views of the phones and manufacturers using Razor.
As we did it in the step-1 we are going to start with the controller which serves the phone view. Let’s get started by creating a source file in Web project under the folders Controllers with the name
1 2 3 4 5
The action method
Show just picks the phone with the given id, converts the selected phone to a view model and returns the view.
phones data which is being passed to the controller is actually a domain model representing the data that are required to show in the UI. Let’s create it in the Domain project. Create a source file in the Domain project and name it as
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
It’s a typical type definition in fsharp which describes the domain model
Phone. Also if you remember we have already created a type with the same name
Phone in the previous step. Though they share the name both are being used for different purposes. One for showing all the details of a phone and other one is for showing only few details about a phone.
This is what we call us bounded context in DDD. In fsharp we can easily achieve it using modules with less verbosity.
We have also used another awesome feature of fsharp called units-of-measure which help us avoid failures in unit-coversion by providing strong typed data.
In the later posts we will be extending the domain based on theses measure types right now it just expresses the domain correct. These measure types are not created yet so lets create them by adding a source file in Domain project with the name
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
We have defined types to represents measures in inch, gram and megabytes. We have also added few utility methods to translate the raw string to strongly typed data which does the following
With the domain model in place the next step is to populate this domain model from the data-store. To do it we are going to reuse the PhoneTypeProvider that we have created in the step-1. Since it has all the properties that we needed, we just need to add a function which does the mapping.
TypeProviders and add the below function
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
We are leveraging the utility functions
toMB defined above as part of measure types and do seamless mapping of domain model from data store.
The next step is wiring the controller with the domain model and the data-store. We are going to follow the same Composition Root design as we did in step-1
Add a source file in the Web project with the name
MvcInfrastructure and add the following code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
Similar to step-1 we are creating the composition root by passing the phones data and doing the wiring of different components.
Since we have created our custom ControllerFactory, we need to update the MVC configuration to use it when the framework creates the controllers.
Update the “`Global.asax.fs“ file as below
1 2 3 4 5 6 7 8
In the last step the we have retrieved the phones data inside the RegisterWebApi method and in this step we have moved it outside so that it can be used by both MVC Controllers and Web-Api controllers.
We have also changed the signature of RegisterWebApi method. In the earlier step it gets the configuration parameter alone and now it has two parameters
The next pending task in Phone View is translating the Phone Domain model to Phone View Model. Add the Phone View model in the
PhoneController created before and update it us below
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38
With all in place, we just need to create a razor view with the name
Show.cshtml inside the View -> Phone directory of Web project and update it as mentioned here.
That’s it. Phone View is up and running! Click the Phone Links in the Home Page it will take you to the Phones View Page.
Manufactures View follows the similar steps that we have used to create the Phone View. It displays the Phones manufactured by a selected manufacturer in the home page.
Let’s start from the controller. Create a controller in the Web project with the name
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
ManufacturerController depends on the function
getPhones which gives the Phones manufactured by the given manufacturer. The action method
Show converts given id to the manufaturer name, gets the Phones, converts them to
ManufacturerViewModel and renders the view.
The domain model
Phone mentioned here is the one that we have already created in step-1. The
getPhones domain function is yet to be created.
Phones file in the Domain project and add the
1 2 3 4 5
getPhonesOfManufacturer function takes a sequence of phones and a manufacturer name, filters them for the given manufacturer and return a tuple that contain the manufacturer name and the sequence of phones.
As we have already created the data-store functions which serves the required data, we just need to wire up the controller.
MvcInfrastructure file in the Web project to create
1 2 3 4 5 6 7 8 9 10 11
Thanks to the partial function we have partially applied the first parameter alone for the
Phones.getPhonesOfManufacturer function which has the signature
and created a new function on the fly with the signature
which is the exactly the function that is needed by the
The final step is to create a razor view with the name
Show.cshtml inside the View -> Manufacturer directory of Web project and update it as mentioned here.
In this blog post we have seen how to create MVC Razor views in fsharp. You can find the source code in the github repository. In the later posts we will be adding more interactivity. Stay tuned !!