連接MVC到knockout.js

我有一個名爲Invitation一個簡單的MVC模式，它看起來像這樣：連接MVC到knockout.js

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

我想在View創建一個用戶界面，使用knockout.js。用戶可以輸入2個字段的值，還可以按下發送邀請的按鈕（在我的Controller中調用邀請方法，傳遞用戶指定的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>

來源

2017-10-09 Green_qaue

打開你的模型爲JSON，寫在某個地方然後在客戶端使用javascript讀取它。 Json是你去c＃-Javadscript信息交換格式 – Liam

@Liam你知道是否有一些關於如何做到這一點的超級基本文檔？從開始到結束。我對前端開發非常陌生。 –

我已經添加了一些您需要考慮的簡要代碼示例。這不是廣泛的，因爲主題是相當廣泛的，但它將有希望指向你在正確的方向 – Liam

我會建議沿此線（也有其他方法可以做到這一點）的東西

在你控制器將您的對象轉換爲JSON（我使用Json.Net庫，因爲它是最好的），請參閱Turn C# object into a JSON string in .NET 4更多信息

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

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

    return View(viewModel); 
}

然後在您的視圖：

@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：

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

ko.applyBindings(viewModelInJson);

來源

2017-10-09 10:57:14 Liam

viewModelInJson從哪裏來？ –

我誤解了你的問題@Green_qaue'viewModelFromJson'只是一個變量來保存從json創建的對象？ – Liam

連接MVC到knockout.js

回答

相關問題