使用剑道在 Razor 页面中绑定答案

【问题标题】：Binding in Razor page with Kendo使用剑道在 Razor 页面中绑定
【发布时间】：2019-04-16 15:00:17
【问题描述】：

我正在尝试处理 MVVM 中的 kendo 绑定。

我有一个像这样的 Razor 页面...

索引.cshtml

@page
@model IndexModel
@{
    ViewData["Title"] = "Index";
}

<div id="frm">
@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
 <div class="form-group">
    <label><input type="text" class="form-control" data-bind="value: Username"/></label>
 </div>
 <button type="submit" class="btn btn-primary">Click</button>
 }

 <label>
    <input type="text" class="form-control" data-bind="value: Username" /> 
</label>
 </div>

<script>
    var raw = @Html.Raw(Model.Me.ToJson());
    var vm = new kendo.observable(raw);
    kendo.bind($("#frm"), vm);
</script>

索引.cshtml.cs...

public class IndexModel : PageModelBase
{
    [BindProperty]
    public Person Me { get; set; }

    public void OnGet()
    {
        Me = new Person { Username = "Bobby Brown" };
    }

    public void OnPost()
    {
        var p = Me;

        p.Username += ".";
    }


    public class Person
    {
        public string Username { get; set; }

        public string ToJson() => JsonConvert.SerializeObject(this);
    }
}

当我呈现页面时，两个输入正确绑定到从服务器端模型传入的值。

当我在客户端更改其中一个输入的值并更改焦点时，另一个输入会更改。

我期待这一切。

当我点击按钮时，控件返回服务器并执行OnPost()中的代码。

Me 不会设置为 null 以外的其他值。

如上图我试过了，

我尝试将 OnPost() 方法重构为 OnPost(Person me)，但未设置 me。

我尝试评估 Request.Form 对象，但那里什么都没有。

我确信它一定比我尝试做的更简单。

有人可以就我做错了提供任何建议吗？

【问题讨论】：

标签： mvvm data-binding kendo-ui

【解决方案1】：

基本上，我很昏暗。

我解决了。我试图将一个方形钉子安装到一个圆孔中。

我在表单中添加了一个名为 Me 的隐藏输入，以匹配我绑定到的属性名称。

我将按钮更改为常规按钮（来自 submit 按钮）并添加了一个执行此操作的 onClick 处理程序...

function submitForm() {
    $("#Me").val({ Username: vm.get("Username") });
    $("#frm").submit();
}

还有“看，有光”。

感谢收听

【讨论】：