如何使用淘汰赛提交数据..我有这样的下面的形式

Question

如何使用mvc4中的knockout提交数据,我创建了一个包含员工ID,员工姓名,名称和部门的表单,根据下拉列表选择代码已经正常工作,但我只是在提交时受到了攻击.

但我应该如何获取viewmodel的文本框值并将其绑定到data属性？

<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="optionsText:'deptname', value:deptid"></select>
            </td>
        </tr>
        <tr>
            <td align="right" colspan="2">
                <input type="submit" value="Save" id="btnSave" name="btnSave" />
                    &nbsp
                    <input type="submit" value="Cancel" id="btnCancel" name="btnCancel" />
            </td>
        </tr>
    </table>
</div>

我尝试下面使用淘汰赛,但得到一个错误..

<script type="text/javascript">
    $('#btnSave').live("click", function (e) {
        var viewModel = {
         this.EmpId: ko.observable(""),
         this.EmpName: ko.observable(""),
         this.Designation: ko.observable(""), 
         this.deptid:ko.observable("")
        };
        ko.applyBindings(viewmodel);
        $.ajax({
            url: '/Home/Save/',
            async: true,
            cache: false,
            type: 'post',
            data: ko.toJSON(viewmodel),
            contentType: 'application/json',
            success: function (result) {
            $("lblResult").val("Recorded inserted Sucessfully");
                $("txtempid").text("");
                $("txtdeptid").text("");
                $("txtempname").text("");
                $("txtdesignation").text("");
            }
        });
    });
</script>

任何人都可以建议回答........将此数据提交给控制器,然后我将其保存到数据库.

Answer 1

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>
}

调节器

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);
}

模型

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; } 
}

请注意:使用的主要思想knockoutjs是MVVM,意味着将所有java脚本代码保留在html页面之外