BreezeJS – Edit SQL table with < 100 lines of JS code [VIDEO]
With SharePoint 2013 and industry movement towards the cloud I’ve been exploring JavaScript as a primary way to develop rich applications.
One common challenge is data access.
With C# I have years of experience with [System.Data] and can perform CRUD against SQL relational databases in my sleep. Open connection, query, data adapter, fill DataTable, and voila! Muscle memory. Second nature. Tried and true methods. However, in the new client side JS world I had no clue where to begin.
Enter Breeze.
People describe Breeze as “Entity Framework on the client in JavaScript” which sounds simple yet has profound implication for the developer. CRUD operations, LINQ style query, navigating primary/foreign keys, input validation, caching, batch updates, and more. That’s a lot to consider and new ideas take time to absorb. Breeze could potentially replace:
- ASP.Net (ASPX) web forms
- ASCX user controls
- InfoPath forms
- SharePoint web parts
- WCF 5.6 data services
- OData
- Classic WebAPI

I set out to code an example with a few goals:
- Create simple SQL schema (two tables – parent/child – one to many)
- Execute CRUD operations in JS against SQL tables
- Leverage JS plugins and NuGet “Install-Package” to load third party components
- Install-Package breeze.webapi2.ef6
- Install-Package breeze.angular
- Install-Package angularjs.core
- Little code as possible
The whole thing took less than 30 minutes and I edited video down to just 15. I was impressed by how straightforward and easy the process was. Breeze# in ASP.Net MVC for the back end WebAPI controller was nearly identical to the Breeze example code. Add one C# method per entity (SQL table) and Breeze does the rest. The JS front end took a little more time to understand but was also easy to apply. Connect Entity Manager to the Breeze URL and you’re ready for CRUD queries. Amazing! Given how easy Breeze is I would be hard pressed to use OData or manually created WebAPI controllers with C# code to query a database. If you can use Breeze, then use it! You’ll save lots of effort.
Please leave a comment if you found this helpful. Thank you! ![]()
Watch Video
[BreezeJS and WebAPI – Edit SQL table in JS with less than 100 lines of code]
Download Code
http://spjeff.com/etc/Appraisal-Breeze-VS2013.zip |
Screenshots
References
- http://breeze.github.io/doc-samples/web-api-odata.html
- https://www.nuget.org/packages/Breeze.WebApi2.EF6/
- https://www.nuget.org/packages/Breeze.Angular/
- https://www.nuget.org/packages/AngularJS.Core/
- https://chrome.google.com/webstore/detail/postman-rest-client/fdmmgilgnpjigdojojpjoooidkmcomcm?hl=en
- http://www.microsoft.com/en-us/server-cloud/products/sql-server-editions/sql-server-express.aspx
- http://www.visualstudio.com/products/visual-studio-community-vs
- http://www.getbreezenow.com/samples/introduction-single-page-apps-sharepoint
- http://www.getbreezenow.com/samples/todo-angular




Jeff, really liked your article. Can you recommend a good client side grid to use with Breeze? My ultimate goal is an angular/Breeze SP application with a SQL back end. I need a good grid to allow my users to interact with the SQL data.
Hey John! Thanks for the comment. Yeah, great question. I like NG-Grid http://angular-ui.github.io/ui-grid/
In the past I used http://datatables.net/ but that was more JQuery and Knockout focused.
With Angular it seems best to stick with directives and 3rd party components that fit in seamlessly. Hope that helps!
Jeff:
I have built upon your article, and I’m now using breeze to populated an ng-grid. However, I have encountered an issue: variable row heights for columns that contain large amounts of text. Do you have any insight into how I can display columns that contain large amounts of text using ng-grid? I can get the text to wrap, but the row heights are always the same. If not, is there another client grid compatible with Breeze, and Angular that allows for custom column heights?
Thanks in advance,
John
Hey John. Great question, but I haven’t come across that.
I’ve used “text-overflow: ellipsis;” in CSS before to truncate . I haven’t worked with NGGrid much.
Have you see Angular Material UI? Maybe this has a component to help https://material.angularjs.org/latest/