Technology Corner

Home » DotNet » Asp.Net » CRUD operations using KnockOutJS and Asp.Net MVC3

CRUD operations using KnockOutJS and Asp.Net MVC3

Enter your email address to follow this blog and receive notifications of new posts by email.

Join 80 other followers

Twitter updates

Archives

RSS InfoQ Feeds

  • Article: Q&A on the Book "Humans vs Computers"
    Author Gojko Adzic has released a book, Humans vs Computers in which he tells stories about the impact of inflexible automation, edge cases and software bugs on the lives of real people. He explains the common mistakes built into the systems and provides advice on how to prevent these mistakes from being built into our systems in the first place. By Shane Ha […]
  • Q&A with Michael Coté on Devops Adoption and his Talk at DevOpsDays NZ
    Raf Gemmail talks to Pivotal’s Michael Coté about obstacles to DevOps adoption and his forthcoming talk at DevOpsDays NZ 2017 By Rafiq Gemmail
  • TensorFlow Serving 1.0 Release Detailed at Google I/O
    Google's Noah Fiedel details new programming model for TensorFlow Serving in a stable 1.0 release. Subject matter addresses common challenges with portability, servablility , and reproducibility improvements. By Dylan Raithel
  • First NetBeans Code Drop Lands at Apache
    Oracle has released the first of three NetBeans code drops to the Apache Incubator. By Matt Raible
  • Article: The Top 10 Adages in Continuous Deployment
    On the basis of discussions at the Continuous Deployment Summit, researchers derived 10 adages about continuous-deployment practices. These adages represent a working set of approaches and beliefs that guide current practice and establish a tangible target for empirical validation. By Chris Parnin
  • Podcast: Joshua Kerievsky and Heidi Helfand on High Performance via Psychological Safety
    In this podcast Shane Hastie, Lead Editor for Culture & Methods, spoke to Joshua Kerievsky, CEO of Industrial Logic, and Heidi Helfand, Director of Engineering Excellence at Procore Technologies and author of the book Dynamic Reteaming, about their talk High Performance via Psychological Safety. By Joshua Kerievsky
  • Spotify and Google Release Forseti GCP Security Tools
    Google has opened up Forseti Security, a set open source tools for GCP security, to all GCP users. The project is the result of a collaborative effort from both Spotify and Google, combining what was originally separate work together into a single toolkit. It aims to automate security processes for developers in order for them to develop more freely. By Andr […]
  • Article: Q&A on the Book SAFe Distilled
    The book SAFe Distilled breaks down the complexity of the framework into easily understood explanations and actionable guidance. It’s a resource for acquiring a deep understanding of the Scaled Agile Framework, and how to implement it successfully. By Ben Linders
  • String Interpolation in Entity Framework Raises Concerns
    One of the new features in Entity Framework Core 2 is the ability to automatically convert interpolated strings into parameterized SQL. Though designed to avoid problems with poorly written SQL, it is feared that it may actually lead to more SQL injection attacks. By Jonathan Allen
  • Podcast: Twitter's Yao Yue on Latency, Performance Monitoring, & Caching at Scale
    Yao Yue spent the majority of her career working on caching systems at Twitter. She created a performance team that deals with edge performance outliers often exposed by the enormous scale of Twitter. In this podcast, she discusses standing up the performance team, thoughts on instrumenting applications, and interesting performance issues (and strategies for […]

 

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

Blogs I Follow

%d bloggers like this: