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页面之外

Answer 2

Knockout + SharePoint = Shockout SP Forms

我编写了一个全面的框架，结合了Knockout JS数据绑定和SharePoint REST服务的强大功能，可以实现真正的现代和动态SharePoint表单，而不必担心InfoPath或XSLT。该框架称为“Shockout”，您可以在此处下载https://github.com/jbonfardeci/ShockoutForms。

Answer 3

您的错误似乎与javascript语法错误有关，不是针对淘汰也不是针对AJAX调用。

一个问题是您的代码的以下部分：

var viewModel = {
    this.EmpId: ko.observable(""),
    this.EmpName: ko.observable(""),
    this.Designation: ko.observable(""), 
    this.deptid:ko.observable("")
};

您不应在this.前添加您的媒体资源名称前缀。它可能看起来类似于以下内容：

var viewModel = {
    EmpId: ko.observable(""),
    EmpName: ko.observable(""),
    Designation: ko.observable(""), 
    deptid:ko.observable("")
};

我不知道这是否是唯一的问题，但它至少是一个问题。

编辑：添加区分大小写问题

JavaScript也是一种区分大小写的语言。您最初使用大写viewModel声明了M，之后您尝试使用它而没有任何大写字母，即viewmodel。

这会导致您的ko.applyBinding调用绑定到未定义的引用，因此您尝试绑定的属性都不存在。确保你的外壳一致。

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

3 个答案: