Where can I find Upshot.js examples and documentation?

Steve Sanderson gave a very interesting presentations at Techdays 2012 in the Netherlands. In one of them he presented a library that he used for client-server communication in MVC application: Upshot.

I was really amazed how easy it was to use it, so I wanted to download and test it. I found the download link here through NuGet, but I cannot find any documentation. Does anyone have something that works? I would also appreciate the sample code that Steve showed as during presentation.

EDIT:

I found the online presentation I attended at Techdays. It’s soooo much worth seeing. You will get a glance of what upshot is capable of and also get an idea how to start with it. Good luck and have fun.

The link: http://channel9.msdn.com/Events/TechDays/Techdays-2012-the-Netherlands/2159

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

I found one which is one of the MS samples for SPAs (which might be the only one for now):

ASP.NET Single Page Application (SPA) BigShelf

The complete tutorial on this project can be found here: BigShelf

Edit:

See this tweet from Steve Sanderson: https://twitter.com/#!/stevensanderson/status/171561402597773312

We’re setting up a website for Upshot/SPA right now. Hopefully will go
live this week! Sorry for delay.

Method 2

Edit: see blog post of Steven over here with sample download code: http://blog.stevensanderson.com/2012/03/06/single-page-application-packages-and-samples/

Don’t know either how to access the helper, would love to know so I can play with it 🙂

This seems to do the trick for now:

<script src="../../Scripts/knockout-2.0.0.js" type="text/javascript"></script>
<script src="../../Scripts/upshot.js" type="text/javascript"></script>
<script src="../../Scripts/upshot.compat.knockout.js" type="text/javascript"></script>

<script type="text/javascript">

    upshot.metadata({ "CLASSNAME:#NAMESPACE":{ "key": ["aId"],
        "fields": {
            "aId": { "type": "Int32:#System" }, 
            "Title": { "type": "String:#System" },
            "Description": { "type": "String:#System" },
            "Effort": { "type": "Double:#System" }
            }
        }
    });

    var myDataSource = new upshot.RemoteDataSource({
        providerParameters: {
            url: "http://localhost:7018/api/CONTROLLERNAME",
            operationName: "",
            operationParameters: {}
        },
        entityType: "CLASSNAME:#NAMESPACE"
    });
            myDataSource.refresh(function (results) {
                alert(results[0].Title());
            });

</script>

You need to replace CLASSNAME:#NAMESPACE with your classname and namespace, so for example: “WorkItem:#MySystem.Models”.

And replace the CONTROLLERNAME with the actual name of the controller, in the case of this

public class MyTasksController : ApiController

you will need to replace CONTROLLERNAME with MyTasks

And fill the stuff inside the metadata according to your model objects. I hope the code samples come online soon, because this is a lot of work 🙁

Method 3

Looking at the BigShelf example, their are a few extra available packages you can use.

I haven’t tried them myself yet, but take a look at:

http://nuget.org/packages/Upshot

http://nuget.org/packages/SinglePageApplication

I think the SPA package contains the Upshot and Metadata html helper extension methods

Method 4

Here is the Delivery Tracker sample from the presentation

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0