backbone.js populate large nested model from asp.net mvc viewmodel

Question

Ok I know this is a long shot.

I am using asp.net mvc on the backend. I will have an action that will return a json viewmodel that will have several simple properties as well as objects and collections of objects on it. For instance

public class ViewModel
{
    public string Name {get;set;}
    public Person Person {get;set;}
    public IEnumerable<SleectListItem> UserTypes {get;set;}
}
public class Person
{
    public string FirstName {get;set;}
    public string LastName {get;set;}
    public int UserType {get;set;}
}

a SelectListType is just a name value pair with "Text" and "Value" and "Selected" properties on it

The idea is that there is a form where you can create a person by filling out there first name, last name and selecting a usertype from a dropdown list.

What I would like to be able to do is have a set of backbone.js models such as

app.MyViewModel=Backbone.Model.extend();
app.Person=Backbone.Model.extend();
app.SelectListItem=Backbone.Model.Extend();
app.UserTypes=Backbone.Collection.Extend({
  model:app.SelectListType
})

and be able to populate the MyViewModel by passing in the Json returned from the server which would be something like this

{Name:'SomeName',
 Person:{
     FirstName:'Frank',
     lastName:'Jones'
 },
 UserTypes:[{Text:'Admin',
       Value:1,
       selected:false},
      {text:'peon',
      Value:2,
      selected:false}

This is not the traditional way I know. I guess I'm supposed to have one call for each object or something but I really want to only have one call to the server to get all the data I need as it's already being collected and arranged properly on the server.

I could write all kinds of loops to populate all the different collections and so on once the data arrived but is there not some more efficient manner of doing this?

Paul Hoenecke · Accepted Answer · 2012-02-26 00:28:39Z

1

Check out backbone-relational:

If you set up the relations, you can do something similar to the example on that page:

paul = new Person({
id: 'person-1',
name: 'Paul',
user: { id: 'user-1', login: 'dude', email: '[email protected]' }
});

// A User object is automatically created from the JSON; so 'login' returns 'dude'.
paul.get('user').get('login');

Otherwise, you could probably accomplish what you want by overriding parse() and toJSON() in your MyViewModel.

answered Feb 26, 2012 at 0:28

Paul Hoenecke

5,0701 gold badge22 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Raif Over a year ago

I've looked at backbone-relational, but wasn't sure it would do what i need and it looks like a whole lot of stuff I don't need, but if it does work then that'll be worth it and that'll be great. Thanks

Darin Dimitrov · Accepted Answer · 2012-02-25 22:08:44Z

1

On the server:

public ActionResult Index()
{
    ViewModel model = ...
    return View(model);
}

and on the client:

@model ViewModel
<script type="text/javascript">
    var model = @Html.Raw(Json.Encode(Model));
    // TODO: the model variable here will represent the 
    // structure you are looking for so you can hook it
    // up with backbone
</script>

and if you are using ASP.NET MVC 2 and the WebForms view engine where the Json.Encode helper is not available you could directly use the JavaScriptSerializer class:

<script type="text/javascript">
    var model = <%= new JavaScriptSerializer.Serialize(Model) %>;
    // TODO: the model variable here will represent the 
    // structure you are looking for so you can hook it
    // up with backbone
</script>

answered Feb 25, 2012 at 22:08

Darin Dimitrov

1.0m277 gold badges3.3k silver badges3k bronze badges

3 Comments

Raif Over a year ago

Yes this will give me the json in a javascript variable, but it won't populate my backbone models.

Darin Dimitrov Over a year ago

@Raif, sorry, then I didn't understand your question. It seems that it is backbone related and has nothing to do with ASP.NET MVC.

Raif Over a year ago

that's correct except that the server is running mvc and producing a rich viewmodel that it returns to the client. Backbone generally, advocates ( if I understand correctly ) having the each object call to the server to be populated individually, or each type of model rather then sending up a lot of data at once.

Collectives™ on Stack Overflow

backbone.js populate large nested model from asp.net mvc viewmodel

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related