如何将对象传递给已被淘汰赛js绑定的控制器答案

【问题标题】：How can I pass an object to a controller that has been bound by knockout js如何将对象传递给已被淘汰赛js绑定的控制器
【发布时间】：2017-09-23 18:10:02
【问题描述】：

这是我的 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 和淘汰 js 的新手。而且，当最终用户尚未在 LastName 和 FirstName 中键入任何内容时，如何使用敲除禁用按钮，例如，它会发送警报，指出这些字段不能为空，并且一旦最终用户消失，它就会消失在字段中添加一些文本？

【问题讨论】：

标签： asp.net-mvc knockout.js

【解决方案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 方法）知道您正在传递一个格式化为Employee 的JSON，您需要像这样稍微修改方法的签名 -

public ActionResult Create([FromBody] Employee p)

这说明您需要的Employee 是Request body 的一部分，而不是Query string。

此外，当最终用户尚未在 LastName 和 FirstName 中键入任何内容时，如何使用敲除禁用按钮，例如，它会发送一个警报，指出这些字段不能为空，并且一旦最终用户在字段中添加了一些文本？

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

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

并在这些 observables 周围放置一个computed 以检查是否应该启用该按钮 -

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

此外，要在用户输入firstName 和lastName 的值时评估此计算值，您可以通过在绑定中添加“valueUpdate”属性来告诉敲除执行此操作 -

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

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

我是 js 和淘汰 js 的新手。

有一个很不错的淘汰教程here

【讨论】：