如何将对象传递给已被knockout js绑定的控制器

时间:2017-09-23 05:49:04

标签: asp.net-mvc knockout.js

这是我的http post控制器:

[HttpPost]
public ActionResult Create(Employee p)
{
    if (ModelState.IsValid)
    {
        Employee employee = EmployeeDataAccess.AddToDatabase(p);

        return RedirectToAction("Index", "Hr");
    }

    return View();
}

这是我的观点

@model TimeInTimeOut.Models.Employee

@{
    ViewBag.Title = "Create";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Create</h2>

<table>
    <tr>
        <td><input type="text" placeholder="LastName" data-bind="value: lastName"/></td>
    </tr>
    <tr>
        <td><input type="text" placeholder="FirstName" data-bind="value: firstName"/></td>
    </tr>
    <tr>
        <td><input type="text" placeholder="MiddleName" data-bind="value: middleName"/></td>
    </tr>
    <tr>
        <td><input type="button" value="Save To Database" data-bind="click: saveToDb"/></td>
    </tr>
</table>

@section Scripts
     {
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/knockout")
    @Scripts.Render("~/Knocks/EmployeeVm.js")
}

这是我的淘汰赛EmployeeVm.js:

$(function() {
    ko.applyBindings(EmployeeVm);

});

var EmployeeVm = {
    employeeId: ko.observable(0),
    lastName: ko.observable(''),
    firsName: ko.observable(''),
    middleName: ko.observable(''),

    saveToDb: function() {
        var self = this;

        $.ajax({
            url: '/Employee/Create',
            type: 'post',
            dataType: 'json',
            data: ko.toJSON(this),
            contentType: 'application/json',
            success: function(data) {
                alert("Successful Employee Insert");
            }
        });

    }
}

我不知道如何将这些字段传递给Create(Employee p)中的一个对象。请详细说明。我是js和淘汰赛的新手。而且,如果终端用户还没有向LastName和FirstName输入任何内容,我怎样才能使用knockout禁用按钮,例如,它会发出警告,表明这些字段不能为空并且一旦结束就会消失-user将一些文本放到字段中?

1 个答案:

答案 0 :(得分:1)

  

我不知道如何将这些字段传递给一个对象到Create(Employee p)

要回答这个问题,让我们假设您的Employee看起来像这样 -

public class Employee
{
    public string EmployeeId {get; set;}
    public string FirstName {get; set;}
    public string MiddleName {get; set;}
    public string LastName {get; set;}
}

对于您的控制器方法(HttpPost方法),要知道您正在传递JSON格式化的Employee,您需要稍微修改方法的签名,如下所示 -

public ActionResult Create([FromBody] Employee p)

这表明您需要的EmployeeRequest body而不是Query string的一部分。

  

而且,如果终端用户还没有向LastName和FirstName输入任何内容,我怎样才能使用knockout禁用该按钮,例如,它会发出警告,表明这些字段不能为空并且将消失一旦最终用户将一些文字放到字段中?

您需要为这些字段添加required字段validation -

lastName: ko.observable('').extend({required: true}),
firsName: ko.observable('').extend({required: true})

在这些观察者周围放置computed以检查是否应该启用该按钮 -

var canSubmit = ko.computed(function() {
    return (self.lastName.isValid() && self.firstName.isValid());
});

此外,要评估此计算为用户输入firstNamelastName的值,您可以通过添加&#39; valueUpdate&#39;来告诉knockout。属性绑定 -

然后使用enable绑定来控制是否应该启用它 -

<td><input type="button" value="Save To Database" data-bind="click: saveToDb, enable: canSubmit"/></td>
  

我是js和淘汰赛的新手。

有一个非常好的淘汰赛教程here