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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Powered by WordPress.com.

Up ↑

%d bloggers like this: