New generation of web applications developed using ASP.NET and ASP.NET MVC can provide excellent user experience with the help of client-side frameworks and libraries like jQuery, Knockout.js. Recently I came across a requirement where we had to implement inline editing and CRUD operations on Tabular data.
The requirement was to display all records in an HTML table, and allow users to add a new row as well as Edit and Delete records. In essence, functionality similar to like what we used to do earlier in ASP.NET GridView, but it had to be done in an ASP.NET MVC application preferably without un-necessary postbacks.
In this sample today, we’ll look at how we can implement this behavior in an MVC 4 application.
Showing posts with label KnockoutJS. Show all posts
Showing posts with label KnockoutJS. Show all posts
Building a Knockout.js based client for Web API services in an ASP.NET MVC app
ASP.NET MVC is now a popular web development platform and often first time users have questions regards to implementation of Data Bound behavior in MVC. This is understandably because most Customers at some point have used ASP.NET Web Forms earlier and are comfortable with the event driven model that it provides.
A common question is how to create an editable list of data allowing users to Edit and Save existing data. The default MVC scaffolding in Visual Studio provides us with a way to implement this where Create/Edit/Delete are implemented on the server side and each action has a separate UI. Today we will see how we can implement it using jQuery and a lightweight client side library knockout.js (also referred to as KO).
On the server, we will use ASP.NET Web API to expose the database services that will be accessed by JavaScript. Needless to say we will use AJAX to communicate with the backend Services.
For any ‘List’ of data there is a need for implementing some kind of template or repeater behavior so that we can define the UI for one row of data and the library/framework takes that template and repeats it for the entire list. We know how to do this in ASP.NET MVC using Razor syntax. Today we’ll see how implement the repeater UI using KO’s templating engine. We will also see how we can define separate templates for Display and Edit modes.
A common question is how to create an editable list of data allowing users to Edit and Save existing data. The default MVC scaffolding in Visual Studio provides us with a way to implement this where Create/Edit/Delete are implemented on the server side and each action has a separate UI. Today we will see how we can implement it using jQuery and a lightweight client side library knockout.js (also referred to as KO).
On the server, we will use ASP.NET Web API to expose the database services that will be accessed by JavaScript. Needless to say we will use AJAX to communicate with the backend Services.
For any ‘List’ of data there is a need for implementing some kind of template or repeater behavior so that we can define the UI for one row of data and the library/framework takes that template and repeats it for the entire list. We know how to do this in ASP.NET MVC using Razor syntax. Today we’ll see how implement the repeater UI using KO’s templating engine. We will also see how we can define separate templates for Display and Edit modes.
KnockoutJS Cheat Sheet for Beginners
This cheat-sheet gives you a quick glance at what is Knockout, why to use it and how to use it. If you are a newcomer to KO or if you are juggling between multiple JS libraries, this cheat-sheet is a handy guide to get your KO karma flowing.
This article is from the Free DNC Magazine for .NET Developers. Subscribe here for Free
1. Knockout is a JavaScript Library (as opposed to Backbone.js which is a framework) that helps you improve the User Experience of your web application.
2. Knockout provides two way data-binding using a ViewModel and provides DOM Templating, it doesn’t deal with sending data over to server or routing.
3. You use Knockout as a drop-in enhancement library to improve usability and user experience, whereas Framework like Backbone is used to group up in new applications (Single Page Apps is a good example).
4. You can create a KO ViewModel as a JavaScript object or as a Function (known as prototype). It’s outside the jQuery document ready.
This article is from the Free DNC Magazine for .NET Developers. Subscribe here for Free
1. Knockout is a JavaScript Library (as opposed to Backbone.js which is a framework) that helps you improve the User Experience of your web application.
2. Knockout provides two way data-binding using a ViewModel and provides DOM Templating, it doesn’t deal with sending data over to server or routing.
3. You use Knockout as a drop-in enhancement library to improve usability and user experience, whereas Framework like Backbone is used to group up in new applications (Single Page Apps is a good example).
4. You can create a KO ViewModel as a JavaScript object or as a Function (known as prototype). It’s outside the jQuery document ready.
Building an Image Flip Viewer as an ASP.NET Web API Service using Knockout JS
Windows 8 introduced a nice component that flips through images using two buttons to the left and right of the control. You can see it the Windows 8 Store when looking at screenshots presented by an app as seen below.
I wanted to build one using JavaScript with one requirement that is it shouldn’t load all images at the same time because if you use big images, it kills the page load performance.
With this goal and an ASP.NET Web API backend in mind, I set about building my ‘FlipView’ component in JavaScript.
I wanted to build one using JavaScript with one requirement that is it shouldn’t load all images at the same time because if you use big images, it kills the page load performance.
With this goal and an ASP.NET Web API backend in mind, I set about building my ‘FlipView’ component in JavaScript.
DataList in ASP.NET MVC & KnockoutJS
We recently learnt how to implement a Master-Details view using Knockout and ASP.NET MVC. Today we will look at how we can create a nice paginated data set that mimics the WebForm DataList/Repeater/Grid functionality. We will again take advantage of Steve Anderson’s excellent KnockoutJS framework to build a rich client side functionality.
Thanks to Sumit Maitra for co-authoring this article with me.
- Page Size should be definable and table refresh should involve only Ajax Posts.
Thanks to Sumit Maitra for co-authoring this article with me.
Our DataList Requirement
- We want a paginated repeater like functionality in ASP.NET MVC for tabular data.- Page Size should be definable and table refresh should involve only Ajax Posts.
Sample Data
We have a list of TimeCard entities. The TimeCard Entity is defined as followsMaster-Details view using Knockout and ASP.NET MVC
With the introduction of ASP.NET MVC, the traditional WebForm controls and eventing mechanism has been replaced with the more stateless, HTTP based leaner MVC pattern of application development. However, change in paradigms often don’t imply change in requirements. Developing Master-Details type of functionality probably ranks as the top-most project types that are implemented in any LoB application.
Today we explore how to do this in ASP.NET MVC using KnockoutJS to give our application a fast responsive feeling.
The application will have the following
Today we explore how to do this in ASP.NET MVC using KnockoutJS to give our application a fast responsive feeling.
The Master Details Use Case
We will pick a simple master-detail style use case where we have a User (master) with multiple addresses (details) and we need to create an AddressBook application.The application will have the following
JSON Dates are Different in ASP.NET MVC and Web API
With the advent of ASP.NET MVC and Web API, working over plain HTML as opposed to obtrusive server side ‘web-controls’ has become the norm. Also partial post-backs and AJAX is a must. Among this paradigm shift from WebForms, JSON data transfer has gained tremendous popularity.
We all love JSON it’s easy to understand, light weight and works… almost! We all HATE JSON Dates. Why? Because JSON spec doesn’t say how to handle Dates. This minor detailing has resulted in a lot of head-scratching, a lots of hacks and lot of posts all across the web. I decided to write up a ‘Latest update’ on the JSON Dates Saga. Remember I am using Web API 4.0.2 which is the latest release version.
A special note of thanks to Sumit Maitra who cracked the JSON serializer difference in MVC 4 and Web API.
We all love JSON it’s easy to understand, light weight and works… almost! We all HATE JSON Dates. Why? Because JSON spec doesn’t say how to handle Dates. This minor detailing has resulted in a lot of head-scratching, a lots of hacks and lot of posts all across the web. I decided to write up a ‘Latest update’ on the JSON Dates Saga. Remember I am using Web API 4.0.2 which is the latest release version.
A special note of thanks to Sumit Maitra who cracked the JSON serializer difference in MVC 4 and Web API.
Dynamic UI in ASP.NET MVC using Knockout.js and Template binding
Recently I was discussing capabilities of the client-side framework Knockout.js in ASP.NET MVC applications, with some of my students. KO is a lightweight framework and very efficient for developing rich Web application.
You can find more about this library here. For a more practical implementation, you can find two articles - Simple Databinding and Templating using Knockout and ASP.NET Web API and Simple Application using Knockout.js, jQuery and ASP.NET MVC 4.0 with WEB API.
One of the most awesome features in KO is ‘template’ binding. This is a simple mechanism for building UI structures with repeating UI blocks. Templates support data binding expressions to bind various HTML attributes (text, value, id, url etc.) to the data in the view model.
Typically, the template binding mechanism is used when the HTML table with rows or unordered or ordered lists need to be generated dynamically based upon the data received from the external source like WEB API or WCF Services.
The knockout.js framework supports two types of templates. First is Native templating, which is based upon the control flows like foreach, with etc. This is built into knockout. The other is String based templating, which is used to connect to third party template engine.
You can find more about this library here. For a more practical implementation, you can find two articles - Simple Databinding and Templating using Knockout and ASP.NET Web API and Simple Application using Knockout.js, jQuery and ASP.NET MVC 4.0 with WEB API.
One of the most awesome features in KO is ‘template’ binding. This is a simple mechanism for building UI structures with repeating UI blocks. Templates support data binding expressions to bind various HTML attributes (text, value, id, url etc.) to the data in the view model.
Typically, the template binding mechanism is used when the HTML table with rows or unordered or ordered lists need to be generated dynamically based upon the data received from the external source like WEB API or WCF Services.
The knockout.js framework supports two types of templates. First is Native templating, which is based upon the control flows like foreach, with etc. This is built into knockout. The other is String based templating, which is used to connect to third party template engine.
Unobtrusive jQuery Validation for Knockout in ASP.NET MVC
This article is from our ASP.NET MVC 101 Tutorial Series
In this article, we will explore how we can use the jQuery Validator in an ASP.NET MVC application that uses Knockout Templating. Traditionally, jQuery validator works out of the box with KO ViewModels that are statically bound.
I would recommend reading two articles before you read this one Simple Databinding and Templating using Knockout and ASP.NET Web API & Change Tracking using KnockoutJS and ASP.NET Web API
But there are a couple of additional things that you’ve to do when templates are involved and the DOM is manipulated on the fly.
In this article, we will explore how we can use the jQuery Validator in an ASP.NET MVC application that uses Knockout Templating. Traditionally, jQuery validator works out of the box with KO ViewModels that are statically bound.
I would recommend reading two articles before you read this one Simple Databinding and Templating using Knockout and ASP.NET Web API & Change Tracking using KnockoutJS and ASP.NET Web API
But there are a couple of additional things that you’ve to do when templates are involved and the DOM is manipulated on the fly.
The Harness
Today we use a slightly different harness from the first two parts because we need validations for the dynamic controls added by the template.
Subscribe to:
Posts (Atom)