Full Stack Developer – Part 4.3 – Web Application completely hooked up to API

Welcome back! In this post, we complete connecting the .NET Core Model View Controller (MVC) Web Application with the .NET Core Application Programmable Interface (API).

This took me a little longer than I had anticipated, so I broke it into a couple of GIT commits:

  • Basic post to controller working for details – Git Code 1
  • Post functionality done – Git Code 2
  • Edit delete buttons added with partial functionality – Git Code 3
  • Web Application fully hooked up to API – Git Code 4

To pick up where we left off, we were able to launch the application and see the pre-existing location. We could also click on the link and go to the details page. I had left the details link on the summary page and should have removed it because the location details controller method is no expecting an id.

So, this post’s activities are:

  • I hooked up the location model to the details view (i.e. Details.cshtml). Please notice that I was adding a read-only attribute since the details page was static.  This has changed.  To allow the view to handle the edit and create functionality, I removed the read-only attribute and added an if/else statement.  If the user is creating or updating a location, text boxes are used.  If not, labels are.  The if statement evaluates the ‘isEdit’ and ‘isNew’ properties on the model to make this decision.

1

  • I put an ‘New’ button on the summary page so we can add locations.

2

  • Clicking on ‘New’ opens the detail view and allows a user to enter new values.

3

  • Clicking ‘Submit’ places the new values in the database

5

  • The new record is displayed on the summary page

4

  • We also had to convert our location model into the data model that the Web API can consume. As I understand it, generally ‘data’ stuff should go in the model. This has not been the case at every job I have had. For example, at one job the model was strictly a data object with properties only. I wanted to do things a little different this time. So, similar to initializing our web models in the constructor with the data model, I am going to add an export function that takes the current web model and creates its data model equivalent. I like to think of systems as castles with moats. The moat is the boundary with outside world. For our application, the LocationHttpClient.cs is the moat and the Web LocationModel.cs is where any ‘conversion’ takes place. With the export method added to the web location model, we serialize our object and submit it.

8

There should be two more blog posts in this series – adding CSS to our application to make it more ‘pretty’ and adding JavaScript to validate form data.

Stay tuned!

References

  1. https://stackoverflow.com/questions/8761647/how-to-create-readonly-textbox-in-asp-net-mvc3-razor?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa
  2. https://stackoverflow.com/questions/28340482/how-do-you-create-a-button-in-html-for-asp-net-mvc?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qas
  3. https://stackoverflow.com/questions/6601715/how-to-declare-a-local-variable-in-razor?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_
  4. https://stackoverflow.com/questions/38557862/razor-form-asp-net-mvc?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa
Advertisements

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 )

Connecting to %s