How to use a local database with the SPA hot towel template on ASP.NET MVC 4

Question

I'm probably the most inexperienced person on MVC let alone the Hot Towel SPA but never the less I'm expected to produce a system based on these technologies.

I've read the Breeze website and all of John Papa's documentation but I just have no idea how to create interactions to my database and retrieve data and display data, Add or Edit data including deleting data.

I have to build a dashboard with about 5 grids on the screen displaying live data as it's coming in with some time calculations.

All I have so far for 2 days is the Hot Towel Template modified to display my project name and I've changed the hot towel icon. I just can't wrap my head around this stuff... For two years I've been a 3-tier-architecture ASP.NET website developer .

Can anybody give me guidelines on how to pass data through this template?

Answer 1

I started with the Hot Towel SPA, but used other references like the Durandal MovieApp sample which you can find here. http://stephenwalther.com/archive/2013/02/08/using-durandal-to-create-single-page-apps.aspx . I also downloaded and reviewed the breezejs runtime which included the samples.

In my scenario I used a SQL with Entity Frameworks and created a WEBAPI controller and followed the breezejs documentation. an except of my controller is below.

 [BreezeController]
public class ProjectBillingController : ApiController
{
    readonly EFContextProvider<ProjectBillingContext> _contextProvider =
   new EFContextProvider<ProjectBillingContext>();

    // ~/api/todos/Metadata 
    [HttpGet]
    public string Metadata()
    {
        return _contextProvider.Metadata();
    }


    [HttpPost]
    public SaveResult SaveChanges(JObject saveBundle)
    {
        return _contextProvider.SaveChanges(saveBundle);
    }

    [HttpGet]
    public IQueryable<Client> Clients()
    {
        return _contextProvider.Context.Clients;
    }
    ...

I then tried to imitate the code & directory structure of the Durandal Movie APP

/App 
/App/respositories 
/App/repositories/repository.js
/App/viewmodels 
/App/viewmodels/clients
/App/viewmodels/clients/show.js 
/App/viewmodels/clients/edit.js
/App/viewmodels/clients/create.js 
/App/views/clients
/App/views/clients/show.html 
/App/views/clients/edit.html
/App/views/clients/create.html

In my case I used one repository because it wasn't any complex queries, although for me its a start.

but inside my repository I put defined breezejs entity manager and some functions to retrieve all rows and 1 row. an excerpt of the code is below,

// repository.js
function getRecordLists(modelsListsObservable, errorObservable, entity) {

    return breeze.EntityQuery
    .from(entity)
    .using(manager).execute()
    .then(querySucceeded)
    .fail(queryFailed);

    function querySucceeded(data) {
        modelsListsObservable(data.results);
        logger.log('Fetched ' + entity, null, null, true);

    }

    function queryFailed(error) {
        errorObservable("Error retrieving" + entity + " : " + error.message);
        logger.error("Error retrieving" + entity + " : " + error.message, null, null, true);

    }
};


function getRecord(id, clientObservable, errorObservable, entity, entityKey) {
    return breeze.EntityQuery.from(entity)
    .where(entityKey, "==", id)
    .using(manager).execute()
    .then(querySucceeded)
    .fail(queryFailed);

    function querySucceeded(data) {
        clientObservable(data.results[0]);
        logger.log('Fetched a record from ' + entity, null, null, true);
    }

    function queryFailed(error) {
        errorObservable("Error retrieving a record from " + entity + ": " + error.message);
        logger.error("Error retrieving a record from " + entity + ": " + error.message, null, null, true);
    }

};

// show.js
define(function (require) {

    var repository = require("repositories/repository");
    var app = require('durandal/app');
    var router = require("durandal/plugins/router");
    var logger = require('services/logger');
    var models = ko.observableArray();
    var error = ko.observable();

    return {
        models: models,
        error: error,
        deleteRecord: deleteRecord,

        activate: function (data) {
            return repository.getRecordLists(models, error, "Resources");
        }
    };

I hope this helps you a little. I too am learning this and some of the stuff might not be best practices, but its good enough for me to learn from.

thanks