Using JsViews + MVCHaack Prototype to update multiple records in ASP.NET MVC

In this post we’ll take a look at two quite new things. JSViews and the MVCHaack prototype, in a simple scenario in which we’ll update multiple records in an mvc app.

First what is what.

Intro

JsViews, is the next generation of jQuery templates and data link, divided in two parts JsRender and JsViews. On github introduced as “Interactive data-driven views, built on top of JsRender templates”. For more info check out the blog Dancing with data by Boris Moore.

MvcHaack.Ajax is a “proof-of-concept prototype” by Phil Haack to ease access to mvc actions from javascript. Available as a nuget package.

Demo

To use this two in a update scenario we’re using a simple model of a Pizza.

We’ll scaffold the model, using MvcScaffolding.

So now we have the needed base to start using MvcHaack.Ajax.

We’ll edit the PizzaController to look like.

First thing to note is that we derive from a base controller from the MvcHaack library. Second we don’t return ActionResults. Other than that there isn’t much strange things going on. We’re using injection of IPizzaRepository here, if you like you could keep the instantiation of the repository generated by the scaffolding template.

Ok, now how do we put this to use and gain ease of access to this controller from jQuery ?

First we’ll need to add a special route (code shown using an area).

The we’re off to the client side! In our view we now add;

This is where the magic of MvcHaack comes in to play. This will generate an access point to our actions. Please take a look in the generated script. Its simple but as often with simple – useful.

This gives us the following access points to our actions. Neat!

Now we’ll switch over to put JsViews to use. First we’ll need some scripts for JsViews.

Then we’ll add a table to hold our pizzas and the a jQueryTemplate (JsRender) to display each pizza in edit mode. Then a save button.

Ok, this ain’t an ordinary template. It contains some JsViews binding specific attributes. This from and to attributes lets you track changes to your json object that we bound to template. Note that I only show Name here, you could add the other properties too.

And now how do we bind to this template ? Simple;

The magic lies in the link operator here, that tells JsViews to track changes to our pizzas. Interested or confused ? Check out Booris samples to get the whole picture.

So all we need to do is tie this two things together. My demo module looks like.

Conclusion

We looked at JsViews in a context where often Knockout or Backbone could be mentioned. I’ll hope you’ll follow the project to see in what scenarios this could be helpful for you.

MvcHaack.Ajax is a prototype with a question attached. Would you like to see something like this in ASP.NET MVC 4 ?

It’s simple and does not interfere with other library choices, so I think that it would be a neat addition.

Enjoy! 

One Response to “Using JsViews + MVCHaack Prototype to update multiple records in ASP.NET MVC”

  1. [...] my last post we started off with a simple model that we scaffold. We’re going to use the same model [...]

Leave a Reply