MVC 내가 그것은 다음과 같습니다, <code>Invitation</code>라는 간단한 MVC 모델을

Question

을 knockout.js에 연결 :

public class Invitation 
    { 
     public string InvitedUserDisplayName { get; set; } 
     public string InvitedUserEmailAddress { get; set; } 
    } 

내가 knockout.js를 사용하여 View에서 사용자 인터페이스를 만들려고합니다. 사용자가 2 개의 필드에 대한 값을 입력 할 수 있고 초대장을 보내는 버튼을 누를 수 있습니다 (내 컨트롤러에서 초대 메서드를 호출하면서 사용자가 방금 지정한 Invitation 개체를 전달).

.이 기본 과정을 설명 초보자는 내가 지금까지 가지고하는 것은 혼란의 종류 :.

@Model = ViewModel.Invitation 

<script src="~/lib/knockout/dist/knockout.js"></script> 

@model Invitation 
<form asp-controller="Home" asp-action="SendInvite" method="post"> 
    Email: <input asp-for="InvitedUserEmailAddress" data-bind="value: invitedUserDisplayName"/> <br /> 
    Display Name: <input asp-for="InvitedUserDisplayName" data-bind="value: invitedUserEmailAddress"/> <br /> 
    <button data-bind="click: sendInvitation">Send Invite</button> 
</form> 

<script type="text/javascript"> 
    var viewModel = { 
     invitedUserDisplayName: @Model.InvitedUserDisplayName, 
     invitedUserEmailAddress @Model.InvitedUserEmailAddress 

     this.sendInvitation = function() { 
      //call controller action, passing the newly created Invitation. 
     } 
    }; 

    ko.applyBindings(viewModel); 
</script> 

Answer 1

내가 (이 작업을 수행하는 다른 방법이있다)이의 라인을 따라 뭔가를 추천 할 것입니다에서

당신의 컨트롤러는 객체를 JSON으로 바꾼다. (Json.Net 라이브러리를 사용하고있다.) 가장 좋은 방법은이다.

@Model = viewModel 

<script src="~/lib/knockout/dist/knockout.js"></script> 

<div id="someDOM" data-modeljson="@viewModel.objectIWantToUseJson"> 
... 

는 이제 녹아웃, JSON.Parse를 사용하여 JSON을 읽어 Deserializing a JSON into a JavaScript object 및 get data attributes in JavaScript code 볼 수 있습니다 : 자세한 정보를 원하시면 다음보기에서

public ActionResult MyAction() 
{ 
    var viewModel; 
    var objectIWantToUse; 

    //this is a string! 
    viewModel.objectIWantToUseJson = JsonConvert.SerializeObject(objectIWantToUse); 

    return View(viewModel); 
} 

에 대한 47,

var domElement = document.getElementById('someDOM'); 
var viewModelFromJson = JSON.Parse(domElement.dataset.modeljson); 

ko.applyBindings(viewModelInJson);