Question

我有一个名为Invitation的简单MVC模型，它看起来像这样：

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

我想使用knockout.js在View中创建一个用户界面。用户可以输入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>

Answer 1

我会推荐一些与此类似的东西（还有其他方法可以做到这一点）。

在您的控制器中将您的对象转换为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);

将MVC连接到knockout.js

1 个答案: