How to submit data using knockout.. and I have below form like this

ajax, asp.net-mvc-4, jquery, knockout.js

Solution

ViewModel.js:

var viewModel = function () {
var self = this;

self.EmpId = ko.observable("");
self.EmpName = ko.observable("");
self.Designation = ko.observable("");
self.DeptId = ko.observable("1")

self.Message = ko.observable("")
self.DeptIds = ko.observableArray([]);

self.getDeptIds = function () {
    $.ajax({
        type: 'POST',
        url: '/Home/GetDeptIds/',
        dataType: "json",
        async: true,
        success: function (data) {
            debugger;
            self.DeptIds(data);             
        },
        error: function (xhr, ajaxOptions, thrownError) {
            if (xhr.status != 403)
                alert("Status: " + xhr.status + ", Error: " + thrownError, "Error");
        }
    });

};
self.getDeptIds();

self.Update = function () {     
    var Employee = {};
    Employee.EmpId = self.EmpId();
    Employee.EmpName = self.EmpName();
    Employee.Designation = self.Designation();
    Employee.DeptId = self.DeptId();

    $.ajax({
        url: '/Home/Save/',
        type: 'POST',
        data: Employee,
        success: function (result) {                
            self.Message("Recorded inserted Sucessfully");

            self.EmpId("");
            self.EmpName("");
            self.Designation("");
            self.DeptId("")
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            debugger;
            alert("some error");
        }
    });
};
}

HTML

<div id="div1">
<table align="center">
    <tr>
        <td>
            enter code here
            Employee Id:
        </td>
        <td>
            enter code here
            <input data-bind="value:EmpId" type="text" id="txtempid" />
        </td>
    </tr>
    <tr>
        <td>
            Name:
        </td>
        <td>
            <input data-bind="value:EmpName" type="text" id="txtempname" />
        </td>
    </tr>
    <tr>
        <td>
            Designation:
        </td>
        <td>
            <input data-bind="value:Designation" type="text" id="txtdesignation" />
        </td>
    </tr>
    <tr>
        <td>
            Department Name:
        </td>
        <td>
            <select id="CategoryType" style="width: 250px; height: 25px; margin-top:
    10px;" data-bind="options: DeptIds, optionsText: 'name', optionsValue: 'value', value: DeptId"></select>
        </td>
    </tr>
    <tr>
        <td align="right" colspan="2">
            <input type="submit" value="Save" id="btnSave" name="btnSave" data-bind="click: Update" />
            &nbsp
            <input type="submit" value="Cancel" id="btnCancel" name="btnCancel" />
        </td>
    </tr>
            <tr>
        <td align="right" colspan="2">
            <div id="lblResult" data-bind="text: Message"></div>
        </td>
    </tr>
</table>

@section scripts {
  <script type="text/javascript">
     $(document).ready(function () {
        ko.applyBindings(viewModel);
     });
  </script>
}

Controller

public JsonResult Save(Employee Employee)
{
    //**DOTO**//
    //Save the Data

    return Json(Employee, JsonRequestBehavior.AllowGet);
}

public JsonResult GetDeptIds()
{
    List<Dept> depts = new List<Dept>();
    depts.Add(new Dept { name = "debt 1", value = "1" });
    depts.Add(new Dept { name = "debt 2", value = "2" });
    depts.Add(new Dept { name = "debt 3", value = "3" });
    depts.Add(new Dept { name = "debt 4", value = "4" });
    return Json(depts, JsonRequestBehavior.AllowGet);
}

Model

public class Employee
{
    public int EmpId { get; set; }
    public string EmpName { get; set; }
    public string Designation { get; set; }
    public string DeptId { get; set; }
}

public class Dept
{
    public string name { get; set; }
    public string value { get; set; } 
}

please note: the main idea working with `knockoutjs` is MVVM that mean to leave all java script code out of the html page

Problem

Original source