I am trying to understand what goes on the SPA in new Web API stuff but I see some nasty stuff so far. On the other hand, I see myself nowhere to be able to judge what you guys have been done so far and that gets me to a big confusion.

Here is my issue:

When I look at the source code of the BigShelf sample, I see a big chuck of javascript code embeded inside my html as below:

upshot.metadata({"Book:#BigShelf.Models":{"key":["Id"],"fields":{"AddedDate":{"type":"DateTime:#System"},"ASIN":{"type":"String:#System"},"Author":{"type":"String:#System"},"CategoryId":{"type":"Int32:#System"},"CategoryName":{"type":"CategoryName:#BigShelf.Models","association":{"name":"CategoryName_Book","thisKey":["CategoryId"],"otherKey":["Id"],"isForeignKey":true}},"Description":{"type":"String:#System"},"FlaggedBooks":{"type":"FlaggedBook:#BigShelf.Models","array":true,"association":{"name":"Book_FlaggedBook","thisKey":["Id"],"otherKey":["BookId"],"isForeignKey":false}},"Id":{"type":"Int32:#System"},"PublishDate":{"type":"DateTime:#System"},"Title":{"type":"String:#System"}},"rules":{},"messages":{}},"CategoryName:#BigShelf.Models":{"key":["Id"],"fields":{"Books":{"type":"Book:#BigShelf.Models","array":true,"association":{"name":"CategoryName_Book","thisKey":["Id"],"otherKey":["CategoryId"],"isForeignKey":false}},"Categories":{"type":"Category:#BigShelf.Models","array":true,"association":{"name":"CategoryName_Category","thisKey":["Id"],"otherKey":["CategoryId"],"isForeignKey":false}},"Id":{"type":"Int32:#System"},"Name":{"type":"String:#System"}},"rules":{},"messages":{}},"Category:#BigShelf.Models":{"key":["Id"],"fields":{"CategoryId":{"type":"Int32:#System"},"CategoryName":{"type":"CategoryName:#BigShelf.Models","association":{"name":"CategoryName_Category","thisKey":["CategoryId"],"otherKey":["Id"],"isForeignKey":true}},"Id":{"type":"Int32:#System"},"Profile":{"type":"Profile:#BigShelf.Models","association":{"name":"Profile_Category","thisKey":["ProfileId"],"otherKey":["Id"],"isForeignKey":true}},"ProfileId":{"type":"Int32:#System"}},"rules":{},"messages":{}},"Profile:#BigShelf.Models":{"key":["Id"],"fields":{"AspNetUserGuid":{"type":"String:#System"},"Categories":{"type":"Category:#BigShelf.Models","array":true,"association":{"name":"Profile_Category","thisKey":["Id"],"otherKey":["ProfileId"],"isForeignKey":false}},"EmailAddress":{"type":"String:#System"},"FlaggedBooks":{"type":"FlaggedBook:#BigShelf.Models","array":true,"association":{"name":"Profile_FlaggedBook","thisKey":["Id"],"otherKey":["ProfileId"],"isForeignKey":false}},"Friends":{"type":"Friend:#BigShelf.Models","array":true,"association":{"name":"Profile_Friend","thisKey":["Id"],"otherKey":["ProfileId"],"isForeignKey":false}},"Id":{"type":"Int32:#System"},"Name":{"type":"String:#System"}},"rules":{"EmailAddress":{"required":true,"email":true},"Name":{"required":true}},"messages":{}},"FlaggedBook:#BigShelf.Models":{"key":["Id"],"fields":{"BookId":{"type":"Int32:#System"},"Id":{"type":"Int32:#System"},"IsFlaggedToRead":{"type":"Int32:#System"},"ProfileId":{"type":"Int32:#System"},"Rating":{"type":"Int32:#System"}},"rules":{},"messages":{}},"Friend:#BigShelf.Models":{"key":["Id"],"fields":{"FriendId":{"type":"Int32:#System"},"FriendProfile":{"type":"Profile:#BigShelf.Models","association":{"name":"Profile_Friend1","thisKey":["FriendId"],"otherKey":["Id"],"isForeignKey":true}},"Id":{"type":"Int32:#System"},"ProfileId":{"type":"Int32:#System"}},"rules":{},"messages":{}}});

And the actual code which produces that is as below:

upshot.metadata(@(Html.Metadata<BigShelf.Controllers.BigShelfController>()));

What you have done here is very shocking for me. Then I saw this below line of code at the same page:

@{
    ViewBag.Title = "Big Shelf - Read books, share books.";
    var profile = (Profile)ViewBag.UserProfile;
    var friendsJson = new JavaScriptSerializer().Serialize(profile.Friends.Select(f => new { f.FriendId, f.FriendProfile.Name }));
}

Which makes me write this forum post. I am really confused. I feel like writing web forms, classic asp and mvc all together here. How come you put this as sample in an ASP.NET MVC application?

In the long run, this approach, which is creating javascript code with html helper, will definately suck! I do not want to generate javascript code with htmlhelpers. This is no different than web forms in my point of view. 

On the other hand, the apicontroller class starts with below code which makes me wonder as well:

    public class BigShelfController : DbDataController<BigShelfEntities>

Using the DbContext class directly which is very unlikely for me in a real world application. What is the alternative here? we have repository classes and DI implementations.

Only thing which is good among those in that SPA sample is knockout which adds more value. It really seperates the concerns.

I am not sure how others think here but these are early previews and still under development AFAIK. uphot.js looks promissing but as soon as you start generating miracle code (like gridview on asp.net web forms), it complicates my application.

I would be more than happy if you can give me a feedback here.