Skip to main content

knockoutjs JSON Ajax MVC4 bind list object simple example view model

Binding DateTime list of object to knockout js MVC 4 view model
knockoutjs binding for a list of object using MVC 4
Bind list object using knockoutjs JSON Ajax in MVC 4

 I'm going to implement to knockoutjs list object binding for a view model using to knockoutjs JSON Ajax and MVC 4

 In this example we get the list object by JSON and display to View using ViewModel i.e.
JSON url -  url: "/MyHome/Get/"

 In the 1st step, we create a Matter property class 

    public class Matter
    {
        public int matterId { get; set; }
        public string matterTitle { get; set; }
        public DateTime createdOn { get; set; }
        public string matterComment { get; set; }
        public string totalHours { get; set; }
        public string MyProperty1 { get; set; }
        public int MyProperty2 { get; set; }
        public int MyProperty3 { get; set; }
        public int MyProperty4 { get; set; }
    }

 In the 2nd step, we create MyHomeController 

     public class MyHomeController : Controller
    {
       // Return testKnockout default view
        public ActionResult testKnockout()
        {
            return View();
        }

        // Call by JSON request 
        [AcceptVerbs(HttpVerbs.Post)]
        public JsonResult GetMatter(int matterId)
        {
          // Get the matter ...
            
         var matters = new[] {
                new Matter { matterId = matterId, matterTitle = "1000:ABC", totalHours="6.5 hrs.",createdOn = DateTime.Now, matterComment = "some comment here....", MyProperty1="3000-015 : ABC v XYZ, LLL" },
                new Matter { matterId = matterId, matterTitle = "2000:XYZ", totalHours="8.5 hrs.",createdOn = DateTime.Now, matterComment = "some comment here....", MyProperty1="3000-016 : XYZ v LMN, LLL" },
                new Matter { matterId = matterId, matterTitle = "3000:LMN", totalHours="4.5 hrs.",createdOn = DateTime.Now, matterComment = "some comment here....", MyProperty1="3000-017 : XYZ v ABC, LLL" }
            };
            return Json(matters);
        }

     }

 In the step 3, I'm going to display to view model data

 <div data-bind="foreach: matters" class="data row selected">
                    <div>
                        <table style="width:100%">
                            <tr>
                                <td style="width:5%; ">
                                    <div class="status">
                                        <img src="~/Images/icon_status.png" alt="" title="" />
                                    </div>
                                </td>
                                <td style="width:85%;">
                                     <div data-bind="text: dateTime" style="font:bold"></div>
                                </td>
                                <td>
                                     <div class="options"><a href="#">0.50<img src="~/Images/icon_options.png" /></a></div>
                                </td>                               
                            </tr>
                        </table>                    
                    </div>
                    <div>&nbsp;</div>
                    <div data-bind="foreach: subMatter">
                         <table style="width:100%">
                            <tr>
                                <td style="width:5%">&nbsp;</td>                                    
                                <td style="width:85%">
                                    <div data-bind="text: $data"></div> 
                                                                      
                                </td>                                
                                <td style="width:10%">&nbsp;</td>                               
                            </tr>
                        </table> 
                    </div>
                    <div> &nbsp;</div>
                   <div data-bind="foreach: subSubMatter">
                         <table style="width:100%">
                            <tr>
                                <td style="width:5%">&nbsp;</td>                                    
                                <td style="width:85%">
                                    <div data-bind="text: $data"></div>                           
                                </td>                                
                                <td style="width:10%">&nbsp;</td>                               
                            </tr>
                        </table> 
                    </div>   
</div>

In the step 4, i'm going to writing Knockout view model send the Json request and get the response result data with the help of viewModel and display on the view. 
<script type="text/javascript">

     $(document).ready(function () {
        $.ajax({
            url: "/MyHome/Get/",
            type: 'post',
            data: "{'matterId':'1' }",
            contentType: 'application/json',
            success: function (result) {
                // call to view model
                getViewModel(result);
            },
            error: function (jqXHR, textStatus, errorThrown) {
                var errorMessage = '';
                $('#message').html(jqXHR.responseText);
            }
        });

         function getViewModel(result)
        {
            // Define a "matter" class.
            var matter = function (dateTime, subMatter, subSubMatter) {
                this.dateTime = dateTime;
                this.subMatter = ko.observableArray(subMatter);
                this.subSubMatter = ko.observableArray(subSubMatter);

             }
            // view model
            var viewModel = {
                matters: [],
                showRenderTimes: ko.observable(false)
            };

             // push all data in view model
            for (var i = 0; i < result.length; i++) {
                var matterRow = new matter(result[i].createdOn + " | " + result[i].totalHours, [result[i].matterTitle, result[i].MyProperty1,result[i].matterComment]);
                viewModel.matters.push(matterRow);
            }

             // bind view model to knockout
            ko.applyBindings(viewModel);
        }  
    });
</script>
Output:


By Anil Singh | Rating of this article (*****)

Popular posts from this blog

React | Encryption and Decryption Data/Text using CryptoJs

To encrypt and decrypt data, simply use encrypt () and decrypt () function from an instance of crypto-js. Node.js (Install) Requirements: 1.       Node.js 2.       npm (Node.js package manager) 3.       npm install crypto-js npm   install   crypto - js Usage - Step 1 - Import var   CryptoJS  =  require ( "crypto-js" ); Step 2 - Encrypt    // Encrypt    var   ciphertext  =  CryptoJS . AES . encrypt ( JSON . stringify ( data ),  'my-secret-key@123' ). toString (); Step 3 -Decrypt    // Decrypt    var   bytes  =  CryptoJS . AES . decrypt ( ciphertext ,  'my-secret-key@123' );    var   decryptedData  =  JSON . parse ( bytes . toString ( CryptoJS . enc . Utf8 )); As an Example,   import   React   from   'react' ; import   './App.css' ; //Including all libraries, for access to extra methods. var   CryptoJS  =  require ( "crypto-js" ); function   App () {    var   data
Read more

List of Countries, Nationalities and their Code In Excel File

Download JSON file for this List - Click on JSON file    Countries List, Nationalities and Code Excel ID Country Country Code Nationality Person 1 UNITED KINGDOM GB British a Briton 2 ARGENTINA AR Argentinian an Argentinian 3 AUSTRALIA AU Australian an Australian 4 BAHAMAS BS Bahamian a Bahamian 5 BELGIUM BE Belgian a Belgian 6 BRAZIL BR Brazilian a Brazilian 7 CANADA CA Canadian a Canadian 8 CHINA CN Chinese a Chinese 9 COLOMBIA CO Colombian a Colombian 10 CUBA CU Cuban a Cuban 11 DOMINICAN REPUBLIC DO Dominican a Dominican 12 ECUADOR EC Ecuadorean an Ecuadorean 13 EL SALVADOR
Read more

Angular 7 and 8 Validate Two Dates - Start Date & End Date

In this example, I am sharing “ How to compare or validate two dates in Angular? ” using custom validation function in Angular 7 and Angular 8 . Here, I’m validating the two dates  - a start date and end date. The end date should be greater than the Start date”. Let’s see the example :- import { Component , OnInit } from '@angular/core' ; import { UserRequest } from '../model/user' ; @ Component ({   selector: 'User_Cal' ,   templateUrl: './usercal.component.html' ,   styleUrls: [ './usercal.component.css' ] }) export class UserCalComponent implements OnInit {   constructor ( private EncrDecr : EncrDecrService , private   http :  HttpClient ,               private datePipe : DatePipe ) {                            }   //model class   model = new UserRequest ( null , null , null , null , null );   //Error Display   error : any ={ isError: false , errorMessage: '' };   isValid
Read more

Encryption and Decryption Data/Password in Angular

You can use crypto.js to encrypt data. We have used 'crypto-js'.   Follow the below steps, Steps 1 –  Install CryptoJS using below NPM commands in your project directory npm install crypto-js --save npm install @types/crypto-js –save After installing both above commands it looks like  – NPM Command  1 ->   npm install crypto-js --save NPM Command  2 ->   npm install @types/crypto-js --save Steps 2  - Add the script path in “ angular.json ” file. "scripts" : [                "../node_modules/crypto-js/crypto-js.js"               ] Steps 3 –  Create a service class “ EncrDecrService ” for  encrypts and decrypts get/set methods . Import “ CryptoJS ” in the service for using  encrypt and decrypt get/set methods . import  {  Injectable  }  from   '@angular/core' ; import   *   as   CryptoJS   from   'crypto-js' ; @ Injectable ({    providedIn:   'root' }) export   class   EncrDecrS
Read more

23 Best Key Features of MVC 6 and MVC 5

What’s new In MVC 6? The Added Key Features as following as, 1. The Microsoft makes a bundle of MVC, Web API, WebPages, SignalR, that bundle we called  MVC6 . 2. The MVC 6   added new cloud computing optimization system of MVC, web API, SignalR and entity framework. 3. In MVC 6, Microsoft removed the dependency of system.web.dll from MVC 6 because it's so expensive. Typically it consumes 30K memory per request/response. 4. Right now, in MVC 6 consume 2K memory per request response. It's too small memory consume. 5. Most of the problem solved using the  Roslyn Compiler . 6 . It’s added a  Start-up  class that replaces to  global.asax  file. 7. The Session state and caching adjusts our behavior depending on your hosting environment. 8. Host agnostic and its true side-by-side deployment 9. The vNext is a cross platform and open source and it's also supported to Mac, Linux, etc. 10. It’s also added to TagHeaplers use to creating an
Read more