Есть ли способ обновить MVC 5 ViewModel от JavaScript

Question

У меня есть MVC 5 ViewModel. Я пытаюсь обновить, используя скрытое поле, как показано ниже:

 @Html.HiddenFor(m => m.ModelAction, new { Value = "New" })

Я выполнил приведенные ниже операторы JavaScript, чтобы проверить и посмотреть, могу ли я обновить ViewModel, но он не обновлялся. Скрытое поле обновляется, но не связывается со свойством модели ModelAction. Свойство ViewModel ModelAction изначально было установлено в значение «New», и предполагалось, что оно будет обновлено до значения «Browse», когда для скрытого поля было установлено значение «Browse», но этого не происходит:

$('#ModelAction').val("Browse"); //set value in hidden field
var modelActionFromHtml = $('#ModelAction').val(); //check if hidden field value was set
var viewModel = @Html.Raw(Json.Encode(Model)); //load Model 
var modelActionFromViewModel = viewModel.ModelAction; //check if value in model updated

Я думал, что ViewModel был привязан к данным в 2 направлениях, поэтому обновления полей View будут обновлять модель, но в предыдущем тесте этого не происходит. Есть ли способ обновить мою ViewModel с JavaScript?

Answer 1

Это не даст обновленную модель, потому что @ Html .Raw (Json .Encode (Model)) выполняется во время рендеринга html.

var viewModel = @Html.Raw(Json.Encode(Model)); //load Model 
var modelActionFromViewModel = viewModel.ModelAction; //check if value in model updated

на стороне сервера. Поэтому до запуска этих сценариев значение var viewModel уже имеет значение, равное fre sh от вашего контроллера , потому что оно только что было отрендерено.

---

Что вы может потребоваться сделать эквивалент на стороне клиента, используя $(formElement).serialize() и преобразовав его в json через JSON.Stringify(); Не забудьте поместить свой элемент в тег формы.

$(document).ready(function(){
   $('#ModelAction').val("Browse"); //set value in hidden field
   var modelActionFromHtml = $('#ModelAction').val();

   var viewModel = var data = JSON.stringify($("form").serializeArray());
   console.log(viewModel);
});