Knockout-Dynamic Row | C# Online Compiler

Knockout-Dynamic Row by ramiramilu

using System;
using System.ComponentModel.DataAnnotations;

namespace HelloWorldMvcApp
{
	public class SampleViewModel
	{
	}
}

Model

​x
 
using System;
using System.ComponentModel.DataAnnotations;
​
namespace HelloWorldMvcApp
{
    public class SampleViewModel
    {
    }
}

<!DOCTYPE html>
<!-- template from http://getbootstrap.com/getting-started -->

<html lang="en">
	<head>
	
	    <!-- JS includes -->
		<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
		<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>		
		<script src="//ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"></script>		

	</head>
	
	<table>
    <thead>
        <tr>
            <th>Last Name</th>
            <th>First Name</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: persons">
        <tr>
            <td><input data-bind="value: LastName"/></td>
            <td><input data-bind="value: FirstName"/></td>
        </tr>
        
    </tbody>
</table>
<button data-bind="click: $root.addPerson ">Click</button>
<script>
	var ViewModel = function() {
    	var self = this;
     	self.persons = ko.observableArray([]);
     	self.addPerson = function(){
      	 	self.persons.push(new Person('Last Name','First Name'));
     	};
	}
 
	var Person = function(lastName, firstName) {
    	var self = this;
    	self.LastName = ko.observable(lastName);
		self.FirstName = ko.observable(firstName);   
 	}; 
 
	vm = new ViewModel()
 	ko.applyBindings(vm);
</script>
</html>

View

 
<!DOCTYPE html>
<!-- template from http://getbootstrap.com/getting-started -->
​
<html lang="en">
    <head>
    
        <!-- JS includes -->
        <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
        <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>       
        <script src="//ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"></script>        
​
    </head>
    
    <table>
    <thead>
        <tr>
            <th>Last Name</th>
            <th>First Name</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: persons">
        <tr>
            <td><input data-bind="value: LastName"/></td>
            <td><input data-bind="value: FirstName"/></td>
        </tr>
        
    </tbody>
</table>
<button data-bind="click: $root.addPerson ">Click</button>
<script>
    var ViewModel = function() {
        var self = this;
        self.persons = ko.observableArray([]);
        self.addPerson = function(){
            self.persons.push(new Person('Last Name','First Name'));
        };
    }
 
    var Person = function(lastName, firstName) {
        var self = this;
        self.LastName = ko.observable(lastName);
        self.FirstName = ko.observable(firstName);   
    }; 
 
    vm = new ViewModel()
    ko.applyBindings(vm);
</script>
</html>
​

using System;
using System.Web.Mvc;
using System.Collections.Generic;

namespace HelloWorldMvcApp
{
	public class HomeController : Controller
	{
		[HttpGet]
		public ActionResult Index()
		{
			return View(new SampleViewModel());
		}


		[HttpPost]
		public JsonResult PostData(SampleViewModel model)
		{				
			return Json(model);
		}

	}
}

Controller

 
using System;
using System.Web.Mvc;
using System.Collections.Generic;
​
namespace HelloWorldMvcApp
{
    public class HomeController : Controller
    {
        [HttpGet]
        public ActionResult Index()
        {
            return View(new SampleViewModel());
        }
​
​
        [HttpPost]
        public JsonResult PostData(SampleViewModel model)
        {               
            return Json(model);
        }
​
    }
}

View in Full Screen

View IL Code