jQuery Page

<script type="text/javascript">

  $(document).ready( function () {

    $("div").click(function () {
      $(this).replaceWith("<h1>jQuery Is Powerful</h1>");
    });

  });

</script>

The jQuery documentation allows for the syntax for the ready function to be shortened.
Note that if any <div> element is clicked it is replaced with "jQuery is Powerful".

var elem = $("#grid");
var elem = document.getElementById("grid");

These two syntax statements are the same for <object id="grid"></object>

Here's a code snippet that shows the each method in action. The loop processes all <input> tags in a form:

 
$("form input").each(
    function(i) {
		this.title = "Input #" + i;    
	});

Following is an example that sets background color and border style of all input elements in a form:

$("form input").css(
   {'background-color' : 'yellow', 
    'border-style' : 'dashed'}
);

For example, here's how to disable all input elements:

$("form input").attr(
   {'disabled' : 'disabled'}
);

 $('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
 $('#myTable tr:last').after('<tr>...</tr><tr>...</tr>');
 $('#myTable > tbody:last').append('<tr>...</tr><tr>...</tr>');

 $("#tableID").find('tbody')
    .append(
        $('<tr>')
        .append(
            $('<td>')
            .append(
                $('<img>')
                .attr('src', 'img.png')
                .text('Image cell')
            )
        )
    );

jQuery add table row function definition: /* Add a new table row to the bottom of the table*/

function addTableRow(jQtable)
{    

	jQtable.each( function(){        
		var $table = $(this);	// Number of td's in the last table row        
		var n = $('tr:last td', this).length;
			  
		var tds = '<tr>';     
		for(var i = 0; i < n; i++){ 
			tds += '<td> </td>'; 
		}  
		tds += '</tr>';   
		if($('tbody', this).length > 0){ 
			$('tbody', this).append(tds);  
		}
		else{ 
			$(this).append(tds);  
		}									   
	});
}

jQuery add table row function usage example:

addTableRow($('#myTable'));
addTableRow($('.myTables'));

$.each( [0,1,2], function(i, n){
  alert( "Item #" + i + ": " + n );
});


$.each( { name: "John", lang: "JS" }, function(i, n){
  alert( "Name: " + i + ", Value: " + n );
});


var arr = [ "one", "two", "three", "four", "five" ];

    jQuery.each(arr, function() {
      $("#" + this).text("My id is " + this + ".");
      return (this != "four"); // will stop running to skip "five"
    });

var obj = { one:1, two:2, three:3, four:4, five:5 };

    jQuery.each(obj, function(i, val) {
      $("#" + i).append(document.createTextNode(" - " + val));
    });

Example(http://api.jquery.com/jQuery.ajax/): Load and execute a JavaScript file.

    $.ajax({
        type: "GET",
        url: "test.js",
        dataType: "script"
    });

Step 1: Define Model

Product.cs

public class Product
{
 public int Id { get; set; }
 public string Name { get; set; }
 public string Category { get; set; }
 public decimal Price { get; set; }
}

IProductRepository.cs

interface IProductRepository
{
 IEnumerable<Product> GetAll();
 Product Get(int id);
 Product Add(Product item);
 bool Update(Product item);
 bool Delete(int id);
}

ProductRepository.cs

public class ProductRepository : IProductRepository
{
 private List<Product> products = new List<Product>();
 private int _nextId = 1;

 public ProductRepository()
 {
 // Add products for the Demonstration
 Add(new Product { Name = "Computer", Category = "Electronics", Price = 23.54M });
 Add(new Product { Name = "Laptop", Category = "Electronics", Price = 33.75M });
 Add(new Product { Name = "iPhone4", Category = "Phone", Price = 16.99M });
 }

 public IEnumerable<Product> GetAll()
 {
 // TO DO : Code to get the list of all the records in database
 return products;

 }

 public Product Get(int id)
 {
 // TO DO : Code to find a record in database
 return products.Find(p => p.Id == id);
 }

 public Product Add(Product item)
 {
 if (item == null)
 {
 throw new ArgumentNullException("item");
 }
 
 // TO DO : Code to save record into database
 item.Id = _nextId++;
 products.Add(item);

 return item;
 }

 public bool Update(Product item)
 {
 if (item == null)
 {
 throw new ArgumentNullException("item");
 }
 
 // TO DO : Code to update record into database
 int index = products.FindIndex(p => p.Id == item.Id);
 if (index == -1)
 {
 return false;
 }
 products.RemoveAt(index);
 products.Insert(index,item);

 return true;
 }

 public bool Delete(int id)
 {
 // TO DO : Code to remove the records from database
 products.RemoveAll(p => p.Id == id);

 return true;
 }
}

Step 2: Define Controller

ProductController.cs

public class ProductController : Controller
{
 static readonly IProductRepository repository = new ProductRepository();

 public ActionResult Product()
 {
 return View();
 }

 public JsonResult GetAllProducts()
 {
 return Json(repository.GetAll(), JsonRequestBehavior.AllowGet);
 }

 public JsonResult AddProduct(Product item)
 {
 item = repository.Add(item);
 return Json(item, JsonRequestBehavior.AllowGet);
 }

 public JsonResult EditProduct(int id, Product product)
 {
 product.Id = id;
 if (repository.Update(product))
 {
 return Json(repository.GetAll(), JsonRequestBehavior.AllowGet);
 }

 return Json(null);
 }

 public JsonResult DeleteProduct(int id)
 {

 if (repository.Delete(id))
 {
 return Json(new { Status = true }, JsonRequestBehavior.AllowGet);
 }

 return Json(new { Status = false }, JsonRequestBehavior.AllowGet);


 }
}

Step 3: Define View

Product.cshtml

@{
 ViewBag.Title = "Products' List";
}
@section scripts {
 <style type="text/css">
 body { margin: 20px; font-family: "Arial", "Helventica", sans-serif; }
 label { width: 80px; display: inline-block; }
 button { display: inline-block; outline: none; cursor: pointer; text-align: center; text-decoration: none;
 padding: .4em 1.1em .4em; color: #fef4e9; border: solid 1px #006fb9; background: #1276bb; }

 button:hover { text-decoration: none; background: #282828; border: solid 1px #000; }
 table { padding-top: 1em; }
 thead, tfoot { font-weight: 600; }
 th, td { padding: .1em .5em; text-align: left; }
 td li, td ul { margin: 0; padding: 0; }
 td li { display: inline; }
 td li::after { content: ','; }
 td li:last-child::after { content: ''; }
 </style>
 <script src="~/Scripts/knockout-3.3.0.js"></script>
 <script src="@Url.Content("~/Scripts/knockout-3.3.0.debug.js")" type="text/javascript"></script>
 <script type="text/javascript">

 function formatCurrency(value) { return "$" + value.toFixed(2); }

 function ProductViewModel() {

 //Make the self as 'this' reference
 var self = this;
 //Declare observable which will be bind with UI 
 self.Id = ko.observable("");
 self.Name = ko.observable("");
 self.Price = ko.observable("");
 self.Category = ko.observable("");

 var Product = { Id: self.Id, Name: self.Name, Price: self.Price, Category: self.Category };

 self.Product = ko.observable();
 self.Products = ko.observableArray(); // Contains the list of products

 // Initialize the view-model
 $.ajax({
 url: '@Url.Action("GetAllProducts", "Product")',
 cache: false,
 type: 'GET',
 contentType: 'application/json; charset=utf-8',
 data: {},
 success: function (data) {
 self.Products(data); //Put the response in ObservableArray
 }
 });

 // Calculate Total of Price After Initialization
 self.Total = ko.computed(function () {
 var sum = 0;
 var arr = self.Products();
 for (var i = 0; i < arr.length; i++) {
 sum += arr[i].Price;
 }
 return sum;
 });

 //Add New Item
 self.create = function () {
 if (Product.Name() != "" && Product.Price() != "" && Product.Category() != "") {
 $.ajax({
 url: '@Url.Action("AddProduct", "Product")',
 cache: false,
 type: 'POST',
 contentType: 'application/json; charset=utf-8',
 data: ko.toJSON(Product),
 success: function (data) {
 self.Products.push(data);
 self.Name("");
 self.Price("");
 self.Category("");

 }
 }).fail(
 function (xhr, textStatus, err) {
 alert(err);
 });

 }
 else { alert('Please Enter All the Values !!'); }

 }
 // Delete product details
 self.delete = function (Product) {
 if (confirm('Are you sure to Delete "' + Product.Name + '" product ??')) {
 var id = Product.Id;

 $.ajax({
 url: '@Url.Action("DeleteProduct", "Product")',
 cache: false,
 type: 'POST',
 contentType: 'application/json; charset=utf-8',
 data: ko.toJSON(id),
 success: function (data) {
 self.Products.remove(Product);

 }
 }).fail(
 function (xhr, textStatus, err) {
 self.status(err);
 });
 }
 }

 // Edit product details
 self.edit = function (Product) { self.Product(Product); }

 // Update product details
 self.update = function () {
 var Product = self.Product();

 $.ajax({
 url: '@Url.Action("EditProduct", "Product")',
 cache: false,
 type: 'PUT',
 contentType: 'application/json; charset=utf-8',
 data: ko.toJSON(Product),
 success: function (data) {
 self.Products.removeAll();
 self.Products(data); //Put the response in ObservableArray
 self.Product(null);
 alert("Record Updated Successfully");
 }
 })
 .fail(
 function (xhr, textStatus, err) {
 alert(err);
 });
 }

 // Reset product details
 self.reset = function () { self.Name(""); self.Price(""); self.Category(""); }

 // Cancel product details
 self.cancel = function () { self.Product(null); }

 }

 var viewModel = new ProductViewModel();
 ko.applyBindings(viewModel);

 </script>
}

<div id="body">

 <h2>Knockout CRUD Operations with MVC4</h2>

 <h3>List of Products</h3>

 <table id="products1" data-bind="visible: Products().length > 0">
 <thead>
 <tr>
 <th>ID</th>
 <th>Name</th>
 <th>Category</th>
 <th>Price</th>
 <th>Actions</th>
 </tr>
 </thead>
 <tbody data-bind="foreach: Products">
 <tr>
 <td data-bind="text: Id"></td>
 <td data-bind="text: Name"></td>
 <td data-bind="text: Category"></td>
 <td data-bind="text: formatCurrency(Price)"></td>

 <td>
 <button data-bind="click: $root.edit">Edit</button>
 <button data-bind="click: $root.delete">Delete</button>

 </td>

 </tr>
 </tbody>
 <tfoot>
 <tr>
 <td></td>
 <td></td>
 <td>Total :</td>
 <td data-bind="text: formatCurrency($root.Total())"></td>
 <td></td>
 </tr>
 </tfoot>
 </table>
 <br />
 <div style="border-top: solid 2px #282828; width: 430px; height: 10px"> </div>

 <div data-bind="if: Product">
 <div>
 <h2>Update Product</h2>
 </div>
 <div>
 <label for="productId" data-bind="visible: false">ID</label>
 <label data-bind="text: Product().Id, visible: false"></label>

 </div>
 <div>
 <label for="name">Name</label>
 <input data-bind="value: Product().Name" type="text" title="Name" />
 </div>

 <div>
 <label for="category">Category</label>
 <input data-bind="value: Product().Category" type="text" title="Category" />
 </div>

 <div>
 <label for="price">Price</label>
 <input data-bind="value: Product().Price" type="text" title="Price" />

 </div>
 <br />
 <div>
 <button data-bind="click: $root.update">Update</button>
 <button data-bind="click: $root.cancel">Cancel</button>

 </div>
 </div>

 <div data-bind="ifnot: Product()">
 <div>
 <h2>Add New Product</h2>
 </div>
 <div>
 <label for="name">Name</label>
 <input data-bind="value: $root.Name" type="text" title="Name" />
 </div>

 <div>
 <label for="category">Category</label>
 <input data-bind="value: $root.Category" type="text" title="Category" />
 </div>

 <div>
 <label for="price">Price</label>
 <input data-bind="value: $root.Price" type="text" title="Price" />
 </div>
 <br />
 <div>
 <button data-bind="click: $root.create">Save</button>
 <button data-bind="click: $root.reset">Reset</button>

 </div>
 </div>
</div>

Step 4: Run Application

Retrieve Operation

Create Operation

Update Operation

Delete Operation

What do you think?