Upshot.js

This post is part of series of post on Single Page Application using ASP.NET MVC 4. We will explore the upshot, nav and history JavaScript libraries in this post.

What is Upshot.js?

Upshot is a new JavaScript library coming out of Microsoft. It’s based on previously previewed JavaScript library RIA/JS.  It is available through NuGet http://nuget.org/packages/upshot. As it is relatively undocumented, expect some of what is written below to change.

Upshot is for data access and related functionalities like paging, sorting, change tracking. Upshot.js is designed to work with DataController and oData (only data reading).

Objects provided by Upshot

  • EntitySource :  a wrapper of array of Entities which are observable. provides method to bind/unbind events
  • EntityView : inherits from EntitySource and provides change tracking on it
  • DataSource : inherits from EntityView and add paging, sorting and filterting support on it.
  • RemoteDataSource 
  • LocalDataSource
  • DataProvider : a wrapper over jQuery ajax to get and submit entity values
  • ODataDataProvider
  • riaDataProvider
  • EntitySet : inherits from EntitySource and provides change tracking on EntityType. This object does the heavy lifting of managing entities
  • DataContext
  • AssociatedEntitiesView

TODO: Update more about these objects

Usage of Upshot in ASP.NET MVC4 SPA

On creating a Single Page Application controller, we got code generated for the View and ViewModel. In the ViewModel code we can some usage of Upshot.

Creating RemoteDataSource

var gridDataSource = new upshot.RemoteDataSource(dataSourceOptions);

var editorDataSource = new upshot.RemoteDataSource(dataSourceOptions);

The RemoteDataSource are created with dataSourceOptions. DataSource options contains property values for dataProvider parameters ( url and oprationName), entityType , bufferChanges, mapping

Fetching data using DataSource

self.todoItems = gridDataSource.getEntities();

self.editingTodoItem = editorDataSource.getFirstEntity();

In the above code getEntities() method is used to get all TodoItem entities, and getFirstEntity() to get first TodoItem entity.

Another way to load data is to call refresh.

// Load and begin editing an existing todoItem instance

editorDataSource.setFilter({ property: "TodoItemId", value: Number(navEntry.params.edit) }).refresh();

// Not editing, so load the requested page of data to display in the grid

gridDataSource.refresh();

Saving data using DataSource

editorDataSource.commitChanges(function () {

                self.successMessage("Saved TodoItem").errorMessage("");

                self.showGrid();

            });

Deleting data using DataSource

editorDataSource.deleteEntity(todoItem);

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 )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s