by Per Ökvist - .Net
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.
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.
To use this two in a update scenario we’re using a simple model of a Pizza.
|
1 2 3 4 5 6 7 8 9 10 11 |
public class Pizza { public int Id { get; set; } [Required] public string Name { get; set; } public double Price { get; set; } public bool Available { get; set; } } |
We’ll scaffold the model, using MvcScaffolding.
|
1 |
<p>Scaffold Controller Pizza –Repository</p><p> </p> |
So now we have the needed base to start using MvcHaack.Ajax.
We’ll edit the PizzaController to look like.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
public class PizzaController : MvcHaack.Ajax.JsonController { private readonly IPizzaRepository pizzaRepository; public PizzaController(IPizzaRepository pizzaRepository) { this.pizzaRepository = pizzaRepository; } public IEnumerable<Pizza> List() { return this.pizzaRepository.All; } public object SaveList(List<Pizza> pizzas) { pizzas.ForEach(x => this.pizzaRepository.InsertOrUpdate(x)); this.pizzaRepository.Save(); return new { success = true, pizzas = pizzas }; } } |
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).
|
1 |
context.Routes.Add(new JsonRoute("json/{controller}")); |
The we’re off to the client side! In our view we now add;
|
1 |
<script src="/json/haack?json" type="text/javascript"></script> |
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!
|
1 2 3 |
<p> $mvc.Pizza.List().success(function(data) { .... });</p><p> </p><p> $mvc.Pizza.SaveList(pizzasJson).success(function(data) {<br />               ....  <br />     });</p> |
Now we’ll switch over to put JsViews to use. First we’ll need some scripts for JsViews.
|
1 2 3 |
<script src="http://borismoore.github.com/jsviews/jsrender.js" type="text/javascript"></script> <script src="http://borismoore.github.com/jsviews/jquery.observable.js" type="text/javascript"></script> <script src="http://borismoore.github.com/jsviews/jquery.views.js" type="text/javascript"></script> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<button id="sendJson">Send Json</button> <table><tbody id="editPizzaTable"></tbody></table> <script id="editRowTmpl" type="text/x-jquery-tmpl"> <tr> <td data-getfrom="[Name]" /> <td> <input data-getfrom="[Name]" data-to="[Name]" /> </td> </tr> </script> |
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;
|
1 |
$("#editPizzaTable").link(pizzas, "#editRowTmpl"); |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
if (!Jayway) { var Jayway = {}; } if (!Jayway.Demos) { Jayway.Demos = {}; } Jayway.Demos = lib(function () { var app = { pizzas: null }; return { // Public functions init: function() { $mvc.Pizza.List().success(function(data) { app.pizzas = data; _render(); }); $('#sendJson').click(function() { $mvc.Pizza.SaveList(app.pizzas).success(function(data) { alert(data.success); }); }); } }; //Private function _render() { $("#editPizzaTable").link(app.pizzas, "#editRowTmpl"); } } ()); |
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!
[...] my last post we started off with a simple model that we scaffold. We’re going to use the same model [...]