连接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

回答

相关问题