どのように私はここにノックアウトJS

Question

により拘束されたコントローラにオブジェクトを渡すことができますが、私の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）の1つのオブジェクトに渡す方法はわかりません。詳細に説明してください。私はjsとノックアウトjsの新しいです。また、エンドユーザがLastNameとFirstNameに何も入力していないときにノックアウトを使用してボタンを無効にするにはどうすればよいですか？そのようなフィールドは空であってはいけません。フィールドにテキストを入力しますか？

Answer 1

私は、私たちはあなたのEmployeeはこのように見えることを想定せ、これに答えるために作成します（従業員P）

に1つのオブジェクトにそれらのフィールドを渡す方法がわからない -

あなたはEmployeeフォーマットさJSONを渡している、あなたは少しSIGを変更する必要があることを知っている（HttpPost方法である）あなたのコントローラ方法については

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

Employee次のものが必要ですRequest bodyなくQuery stringの一部であることを伝えます

public ActionResult Create([FromBody] Employee p) 

- そのような方法の性質。

また、ノックアウトを使用してボタンを無効にするにはどうすればいいですか？エンドユーザーが姓と名に何も入力していない場合、そのフィールドが空であってはならないというアラートが送信されます。エンドユーザーがテキストをフィールドに入力すると消えますか？

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

、ボタンを有効にする必要があるかどうかを確認するには、これらの観測を中心にcomputedを置く - - あなたはそれらのフィールドのrequiredフィールドvalidation配置する必要があり

また

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

を、ユーザーがfirstNameとlastNameの値を入力したときに計算されたこの値を評価するには、knockoutにaddあなたの結合に 'valueUpdate' 属性INGの -

することは、それが有効にするかどう制御するための結合enableを使う -

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

私はJSとノックアウトJSに新たなんです。ノックアウトhere

のための非常に素晴らしいチュートリアルがあり