The Majority of the web project templates creates a skeleton for the web application. Programmers add code to these templates and deliver the required functionality of the application. However, the knockout/Breeze template is different from other templates. It will generate an application for studying purpose. The application will demonstrate the techniques for creating a SPA application and the application design.
The Breeze template is an enhancement of one of the available Asp.Net templates, the knockoutJS template. The main difference between the Breeze template and the previous templates is in its implementation. However, it provides the same user experience. The Breeze template is implemented with Breeze for the management of data.
The SPA template of knockoutJS makes the use of JQuery Ajax for creating service requests. This is fine for simple applications. However, the requirements for data management are more demanding for sophisticated applications. As an example, majority of the applications:
- 1. Perform query as well as re-query on a server for an extended session of a user.
- 2. Adds sorting, paging and query files.
- 3. Share similar data over multiple pages.
- 4. Collect different object changes and saves them in the form of a single transaction.
- 5. Validate client changes and allow users to correct their mistakes before making the database changes.
The knockoutJS template will handle all these requirements and the user just needs to develop the logic of the application along with the user experience.
The Knockout/Breeze template helps Asp.net developers to take the initial step towards a better data management system. It will generate a sample application that is similar to the one generated by the SPA KnockoutJS template. It will internally replace data layer with the Breeze. Hence it is easy to make the comparison between the two.
Creating a Project of Breeze/Knockout Template:
- 1. Download the template and install it.
- 2. The template is available in the form of VSIX (Visual studio Extension) file. It might need a restart of Visual studio.
- 3. While creating the project, go to the Templates region. Click on Installed templates. Go to Visual C# node and click on the Web. Select the template for Asp.Net MVC4 application and click on OK.
- 4. Select the Breeze Knockout SPA from the wizard.
- 5. Run the application without debugging (Ctlr+F5) or debug the application (F5).
[Image credit: asp.net]
When the application will run for the first time, a login screen will be displayed. On clicking on the Signup link, a new page will be displayed. Enter the username and password and click on submit. Thereafter, it will generate a ToDo list for the user with two items.
These items are then presented on the yellow note. At this stage, the developer is in SPA. Everything that is manipulated by ToDo list is managed by using Breeze and Knockout. Make the use of the browser’s developer tools for capturing the traffic of the network. Try the below-mentioned steps in the Internet Explorer.
- 1. Insert a new item in the Todo list.
- 2. Click on the label. Edit the title of the Todo item.
- 3. See the checkbox in order to mark items as done.
- 4. Click on the x button at the right side of the label. The item will disappear and will get deleted from the database.
- 5. Add one more item and remove its title. There will be a validation error displaying that it is mandatory to fill title.
- 6. Now type a title name that is too long. A validation will be displayed showing that the title name is too long.
- 7. Select the button ‘Add todo List’. A new list will be created on the left side of the previous list.
- 8. Make some more changes in the list. Trigger the length and required validations.
- 9. Click inside the textbox of title to remove the error message.
- 10. At last, click on the x button located on the upper right part and delete all the To-dos and the lists.
The validation performed by Breeze is client-side validation. The validation attributes present on the server model are transferred to the client and automatically executed before a contact is made between the client and the server.
Description of the Web Application
[Image credit: asp.net]
It is very similar to the SPA knockout template. Look at the blue boxes. The UI has MVVCM (Model-View-ViewModel) architecture where the Html widgets of views have clean separation from the code in a view model.
The View and the ViewModel are coordinated by a binding system (in this case it is Knockout) in such a way that both of them can perform their job without knowing much about each other.
The ToDo data is encapsulated by the Model. The Entities in model are created by Breeze using the properties of Knockout so that they can directly bind to the view widgets. Data context in the ViewModel is used to save and acquire the entities in the model. It assigns most of the work to the Breeze.
[Image credit: asp.net]
The stack on the server side contains developer code and three .Net libraries: Entity Framework, Web API, and Breeze .Net.
As shown, the basic architecture of Breeze is same as compared to the KnockoutJS template of SPA. However, it has a much simpler implementation. All the DTO’s have been deleted and the majority of the details of Entity framework is delegated to the Breeze.Net.
You have learned how to create Breeze/Knockout template in this post. Read the Asp.net development company experts have also explained the web application use through this post. If you still feel that anything is not explained like it should, you can make comments below.
Author Bio :
Johnny Morgan as a technical writer at Aegis Infoways, leading Asp.net development company since more than 6 years. I write articles especially for Java, Python and Asp.Net. I have also got well response to write articles on CRM, Hadoop and QA.