ASP.NET MVC 4 Single Page Application template depends on ASP.NET Web API Data WebHost Nuget package (https://nuget.org/packages/AspNetWebApi.Data) which provides two main things: Html Metadata helper and DataController.
Html Metadata helper defined in System.Web.Http.Data.Helpers assembly have signature as given below:
The Metadata helper generates metadata that will be used by Upshot.js. It takes a type which should derive from DataController. The DataController is defined in System.Web.Http.Data assembly and derives from ApiController.
This generates the following content for the controller.
Using the code generated by SPA template, on creating a new TodoItem a POST request is made. Looking into the POST request we can see the format in which data is submitted.
Update TodoItem request looks like this:
Adding a new ViewModel
Disclaimer: The following code is a learning exercise and not the best or recommended way of developing single page application.
To add a new ViewModel I did following steps:
- Added server side data model class “Airport.cs”
- Updated context with it’s value
- Added Controller methods
- Added partial view
Model Airport and Context class
Controller Action Methods for new model
Partial View for creating airport entry
Note here I have used with and submit knockout bindings.
Add code for mapping raw data to entity
DataSource for Airport Entries
Data property for airport entry being created or edited
Submit event handler
Navigation code to show Airport editor form
Binding to show Airport Form and button conditionally
Conclusion: We have seen today basic steps to add new views to the Single Page Application.