Блог

Я пытаюсь разобраться с kendo привязкой в MVVM.

У меня есть страница Razor, которая выглядит следующим образом…

Index.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>
  

Index.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);
    }
}
  

Когда я визуализирую страницу, 2 входных данных должным образом привязаны к переданному значению из серверной модели.

Когда я изменяю значение в одном из входных данных на стороне клиента и меняю фокус, другой ввод изменяется.

Я ожидаю всего этого.

Когда я нажимаю кнопку, элемент управления возвращается на сервер и выполняет код OnPost() .

Чего не происходит, так это для Me установки на что-то другое, чем null .

Я пробовал это, как показано выше,

Я пробовал рефакторинг OnPost() метода OnPost(Person me) , но me он не установлен.

Я пытался оценить Request.Form объект, но там ничего нет.

Я уверен, что это должно быть проще, чем я пытаюсь это сделать.

Может кто-нибудь дать какой-либо совет по поводу того, что я делаю неправильно, пожалуйста?

В принципе, я тупой.

Я разобрался с этим. Я пытался вставить квадратный штифт в круглое отверстие.

Я добавил скрытый ввод в форму с именем Me , соответствующим имени свойства, к которому я привязывался.

Я изменил кнопку на обычную кнопку (с submit кнопки) и добавил onClick обработчик, который это сделал…

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

И «вот, появился свет».

Спасибо, что выслушали