Technology Corner

Home » DotNet » Asp.Net » KnockoutJs

Category Archives: KnockoutJs

Follow Technology Corner on WordPress.com

CRUD operations using KnockOutJS and Asp.Net MVC3

 

In last posts about knockoutJs, I gave examples of Search, Binding server side model to KnockoutJs ViewModel. I’ll discuss today about sending data back to server so that we can do server side operations. I would like to present it doing CRUD operations for Account entity.

Account entity has AccountId, Name and AccountBalance.

I start with creating Controller’a action methods Search and Update.

Search method expects search criteria to search records and send back to client in json format.

Update method expects accountid, name etc to from client to do server side operations and send back updated values to client in json format.

Controller Class

AccountController

 

 public class AccountController : Controller
    {
        public ActionResult Index()
        {
            return View("Account");
        }

        /// 
        /// Search Method
        /// 
        public JsonResult Search(string SearchCriteria)
        {
            //Temporary Code
            //todo: can write actual search functionality
            Random rnd = new Random();

            return Json(new { AccountId = 1, Name = "test", 
			Balance = rnd.NextDouble() * 93.244d });
        }

        /// 
        /// Save method
        /// 
       public JsonResult Update(int AccountId, string Name)
        {
            ////Temporary Code
            //todo: can write actual update code
            Random rnd = new Random();

            return Json(new { AccountId = AccountId, Name = "test", 
		Balance = rnd.NextDouble() * 93.244d });
        }

    }

View

In view file( Account.cshtml) html controls are bind with viewmodel fields with data-bind attribute.

 

@{
    ViewBag.Title = "Account";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section Scripts {
    <script type="text/javascript" src="../../Scripts/Account.js"></script>
}

<div id="search">
    Search By AccountId <input type="text" data-bind="value:SearchCriteria" />
  <p>
        <input type="button" id='btnSearch' title="Search" value="Search" /></p>
</div>

<div>
    <p>
        AccountId:<input type="text" data-bind="value:AccountId" /></p>
    <p>
        Account Name<input type="text" data-bind="value:Name" /></p>
    <p>
       Balance<input type="text" data-bind="value:Balance" /></p>
    <p>
        <input type="button" id='btnSave' title="Save" value="Update" /></p>
</div>

image

Account.Js

We initialize viewModel that is using as knockoutjs viewmodel.

AccountViewModel contains properties AccountId, Name, Balance and two methods Search and Update.

Search Method:  It sends self.SearchCriteria value in ajax request to call controller action method ie. Search.

Response: an object with AccountId, Name and Balance is returning from server and knockoutjs view model’s properties are further setting up from response.

As view model’s properties are observable in nature here, therefore html controls bind to these values will automatically display changed values.

Update Method: This method sends Ajax request to server (controller action method). Input parameters are from viewmodel ie. AccountId and Name. Similarly we can create Delete,Add method to delete and Add records respectively.

var accountmodel;

$(document).ready(function () {

    //initializing viewmodel

    accountmodel = new viewModel();

    //binding for ko

    ko.applyBindings(accountmodel);

    //bind event

    $("#btnSearch").click({ handler: accountmodel.Search });

    $("#btnSave").click({ handler: accountmodel.Update });


});

function viewModel() {

    var self = this;

    self.AccountId = ko.observable(”);

    self.Name = ko.observable(”);

    self.Balance = ko.observable(null);

    self.SearchCriteria = ko.observable(”);

    self.Search = function () {

        $.ajax({

            url: "Account/Search",

            data: { SearchCriteria: self.SearchCriteria },

            type: "POST",

            success: function (response) {

                self.AccountId(response.AccountId);

                self.Name(response.Name);

            }

        });

    };

    self.Update = function () {

        $.ajax({

            url: "Account/Update",

            data: { AccountId: self.AccountId, Name: self.Name },

            type: "POST",

            success: function (response) {

                self.AccountId(response.AccountId);

                self.Name(response.Name);

                self.Balance(response.Balance);

            }

        });

    }

};

image

You can find code here.

Advertisements

Implement Jquery.tmpl (template) with KnockoutJS, Asp.Net Mvc3

In continuation of my previous post on search implementation using knockoutjs. In previous example I bind grid with knockoutjs observable array object. Because of observable characteristics, once view model update then knockoutjs engine render html controls which are bound to that view model. I found one problem in it when dealing with huge data.

I had a requirement to show thousands of records in grid without paging. If I use knockoutjs way of binding with html table it takes time to load and browser also popup message about “Unresponsive script” which ask to further render or to stop script.

I wanted to use same view model for data but i didn’t want to use “data-bind” attribute in html. I found one of good plugin of jquery (jQuery.tmpl) through which we can define template and can inject data in runtime. Here I’ll show you how to implement it. I am using same code base which I used in previous post.

 

How to reproduce error?

Let say I am adding 20000 employees in collection and it will render on UI.

image

Binding with HTML table:

 

image

 

I get following error message.

 

image

 

Solution:

Implementation of Jquery.tmpl

To avoid this message and to render data fast I choose jquery.tmpl to render html table.

Here are steps which will define step by step implementation:

Step1 : download Jquery.tmpl.js file from jquery

http://github.com/jquery/jquery-tmpl

http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js

and save in scripts folder.

You can directly reference script file as well if you want.

 

Step 2: Reference jquery.tmpl.min.js in relevant page or _layout.cshtml file.

 

<script src="@Url.Content("~/Scripts/jquery.tmpl.min.js")" 
	type="text/javascript"></script>

 

You can also give direct path from

<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js" type="text/javascript"></script>

 

Step 3: Create blank tbody where data will populate.

<tbody id="datalist"></tbody>

Step 4: Create template of <tr> element in which data will render.

 

image

Step 4: Populate data in template.

 

image

 

Step 5: Run application.

image

 

image

 

You can find code here.