KNockout의 텍스트 상자 바인딩하기

Question

knockout을 처음 사용했습니다. 텍스트 상자를 viewmodel에 바인딩하고 싶습니다. 다음 코드가 있지만 작동하지 않습니다. 다른 사람이 올바른 방향으로 나를 가리킬 수 있습니까?

내가 컨트롤러에 내보기 모델의 데이터를 게시하려고하지만, 값이 나는 텍스트 상자에

<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 
        }); 
       }); 
      }); 

을 값을 입력해도, 널 (null)입니다 컨트롤러에서이 제공자를 매개 변수로 사용하고 있습니다. 현재

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

, 공급자 필드는 null.I는 어떻게이 코드가 작동 할이 기대 같은 있었던 파라미터 이름

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

와 제공자 클래스를 만들었습니다?

당신은 때 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); 

및 컨트롤러에 버튼 게시물이 객체를 제출의 클릭에 당신의 provider 개체를 관찰 할 필요가있다.

그래서 녹아웃주기 작업은 마치 ko.applyBindings(Provider)이라고 말하면 컨트롤을 관찰하기 시작할 것이고 컨트롤의 값을 변경할 때마다 녹아웃은 컨트롤의 관련 속성을 자동으로 업데이트합니다.

Check this fiddle