Связывание текстового поля в KNockout

Question

Я новичок в knockout.I хотел бы привязать текстовое поле к viewmodel.I есть следующий код, но его не работает. Может кто-нибудь указать мне в правильном направлении.

Я пытаюсь опубликовать данные с моей точки зрения модели к контроллеру, но значения равны нулю, даже если я введенные значения в поля

<div class="container"> 
    <form class="form-horizontal" id="ProviderForm" method="post"> 
     <div class=" form-group"> 
      <label for="Provider" class="control-label col-sm-2">PROVIDER :</label> 
      <div class="col-sm-8"> 
       <div class="input-group"> 
        <div class="input-group-btn"> 
         <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> 
          <span class="caret"></span> 
         </button> 
         <ul id="demolist" class="dropdown-menu"> 
          <li><a href="#">Doctor</a></li> 
          <li class="disabled"><a href="#">Facilities</a></li> 
         </ul> 
        </div> 
        <input type="text" id="datebox" data-bind="value: ProviderType" class="form-control" /> 
       </div> 
      </div> 
     </div> 

     <div class=" form-group"> 
      <label for="firstName" class="col-sm-2 control-label">First Name</label> 
      <div class="col-sm-8"> 
       <input type="text" class="form-control" id="inputFirstName" data-bind="value: FirstName" placeholder="Enter the First Name"> 
      </div> 
     </div> 

     <div class="form-group"> 
      <label for="lastName" class="col-sm-2 control-label">Last Name</label> 
      <div class="col-sm-8"> 
       <input type="text" class="form-control" id="inputLastName" data-bind="value: Lastname" placeholder="Enter the Last Name"> 
      </div> 
     </div> 

     <div class="form-group"> 
      <label for="Certification" class="control-label col-sm-2">Certification :</label> 
      <div class="col-sm-8"> 
       <div class="input-group"> 
        <div class="input-group-btn"> 
         <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> 
          <span class="caret"></span> 
         </button> 
         <ul id="demolist2" class="dropdown-menu"> 
          <li><a href="#">M.D.</a></li> 
          <li class="disabled"><a href="#">D.O.</a></li> 
         </ul> 
        </div> 
        <input type="text" id="datebox2" data-bind="value: Certification" class="form-control" /> 
       </div> 
      </div> 
     </div> 

     <div class="form-group"> 
      <label for="Specialization" class="control-label col-sm-2">Specialization :</label> 
      <div class="col-sm-8"> 
       <div class="input-group"> 
        <div class="input-group-btn"> 
         <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> 
          <span class="caret"></span> 
         </button> 
         <ul id="demolist3" class="dropdown-menu"> 
          <li><a href="#">Family Practitioner</a></li> 
          <li class="disabled"><a href="#">Dentist</a></li> 
          <li class="disabled"><a href="#">Emergency Doctor</a></li> 
         </ul> 
        </div> 
        <input type="text" id="datebox3" data-bind="value: Specialization" class="form-control" /> 
       </div> 
      </div> 
     </div> 

     <div class="form-group"> 
      <label for="SSN" class="col-sm-2 control-label">SSN</label> 
      <div class="col-sm-8"> 
       <input type="text" class="form-control" id="inputSSN" data-bind="value: SSN" placeholder="Enter your SSN"> 
      </div> 
     </div> 

     <div class="form-group"> 
      <label for="FacilityName" class="col-sm-2 control-label">Facility Name</label> 
      <div class="col-sm-8"> 
       <input type="text" class="form-control" id="inputFacility" data-bind="textInput: FacilityName" placeholder="Enter your Facility"> 
      </div> 
     </div> 

     <div class="form-group"> 
      <label for="ContactNumber" class="col-sm-2 control-label">Contact Number</label> 
      <div class="col-sm-8"> 
       <input type="text" maxlength="10" class="form-control" id="inputContactNum" data-bind="value: ContactNumber" placeholder="Enter your Facility"> 
      </div> 
     </div> 

     <div class="form-group"> 
      <label for="EmailID" class="col-sm-2 control-label">Email ID</label> 
      <div class="col-sm-8"> 
       <input type="text" class="form-control" id="inputEmail" data-bind="value: ContactEmail" placeholder="Enter your Email ID"> 
      </div> 
     </div> 
     <div class="form-actions span7 text-center"> 
      <button type="submit" id="Submit" class="btn btn-primary btn-md ">Save</button> 
      <button type="reset" class="btn btn-primary btn-md ">Reset</button> 
     </div> 
    </form> 
</div> 

Мой сценарий

  $("document").ready(function() {    
       $("#Submit").on("click",function(){  
        var Provider = 
        { 
         ProviderType: ko.observable(""), 
         FirstName: ko.observable(""), 
         Lastname: ko.observable(""), 
         Certification: ko.observable(""), 
         Specialization: ko.observable(""), 
         SSN: ko.observable(""), 
         ContactNumber: ko.observable(""), 
         ContactEmail: ko.observable(""), 
         FacilityName : ko.observable("") 
        } 

        ko.applyBindings(Provider); 

        $.ajax({ 
         type: "POST", 
         url: "/PatientRegister/Create", 
         data : Provider 
        }); 
       }); 
      }); 

В контроллере я использую этот провайдер в качестве параметра.

public ActionResult Create(Provider provider) 
    { 
     //.... 
    } 

В настоящее время поле провайдера, null.I также создал Provider класс с теми же именами

параметра Я

public class Provider 
    { 
     public string ProviderType { get; set; } 
     public string FirstName { get; set; } 
     public string Lastname { get; set; } 
     public string Certification { get; set; } 
     public string Specialization { get; set; } 
     public string SSN { get; set; } 
     public string ContactNumber { get; set;} 
     public string ContactEmail { get; set; } 
     public string FacilityName { get; set; } 
    } 

Answer 1

Как вы ожидаете этот код работать?

Вы должны сделать свой provider объект наблюдаемым, когда ваш Pageload,

var Provider = 
        { 
         ProviderType: ko.observable(""), 
         FirstName: ko.observable(""), 
         Lastname: ko.observable(""), 
         Certification: ko.observable(""), 
         Specialization: ko.observable(""), 
         SSN: ko.observable(""), 
         ContactNumber: ko.observable(""), 
         ContactEmail: ko.observable(""), 
         FacilityName : ko.observable("") 
        } 

        ko.applyBindings(Provider); 

и нажатием кнопки отправки разместить ссылку на этот объект к контроллеру.

Итак, как работает работа с нокаутом, как только вы скажете ko.applyBindings(Provider), он начнет наблюдать за вашим контролем, и всякий раз, когда вы измените какое-либо значение в своем элементе управления, нокаут автоматически обновит связанное свойство вашего элемента управления.

Check this fiddle