Как передать обновленные значения модели обратно контроллеру?

Question

Я хотел бы создать форму MVC для редактирования пользовательских данных.

В контроллере я создал следующие методы:

public ActionResult UserEdit(DemoRes.Models.User user) 
{ 
    checkSignIn(); 
    return View("User", user); 
} 

public ActionResult UserSave(DemoRes.Models.User user) 
{ 
    checkSignIn(); 
    MongoDBManager dal = new MongoDBManager(); 
    dal.EditUser(user); 
    return RedirectToAction("UserManagement"); 
} 

В форме «Управление пользователями» пользователь выбирается из списка и передается UserEdit в контроллер. Затем появляется форма «Пользователь» с заполненными пользовательскими данными - поэтому данные успешно передаются из контроллера для просмотра. В представлении я хотел бы позволить пользователю либо обновлять данные, либо просто «отменить» действие и вернуться к списку пользователей.

Для того, чтобы сделать это, я создал следующий User.cshtml форму:

@{ 
ViewBag.Title = "User"; 
}  
<script> 

    $(function(){ 
     $("#btnCancel").click(function(){ 
      window.location.href = url; 
      return false; 
     }); 
    }); 

    $(function(){ 
     $("#btnSubmit").click(function(){ 
      $.ajax({ 
       url: "@Url.Action("UserSave", "Admin")", 
       type: "POST", 
       data: data 
      }); 
      window.location.href = url; 
      return false; 
     }); 
    }); 

    function SubmitFrm(){ 
     var Searchtxt = document.getElementById("txtSearch").value; 
     window.location = $("#RedirectTo").val(); 
    } 

</script> 
@Html.Hidden("RedirectTo", Url.Action("UserManagement", "Admin")); 
<h2>User</h2> 
     <div class="container"> 
      <form role="form"> 
       <div class="form-group"> 
        <label for="username">Username:</label> 
        <input type="text" class="form-control" id="username" data-bind="value:username"> 
       </div> 
       <div class="form-group"> 
        <label for="email">Email:</label> 
        <input type="text" class="form-control" id="email" data-bind="value:email"> 
       </div> 
       <div class="form-group"> 
        <label for="password">Password:</label> 
        <input type="text" class="form-control" id="password" data-bind="value:password"> 
       </div> 
       <div class="checkbox"> 
        <label><input type="checkbox" id="isActive" data-bind="checked:isActive">Is active</label> 
       </div> 
     @if (ViewBag.Owners != null) 
    { 

     <div class="form-group"> 
       <label for="prop">Owners:</label> 
       <select class="form-control"> 
        @foreach (DemoRes.Entities.Owner o in ViewBag.Owners) 
       { 
        <option value=@o.Id.ToString()>@o.FirstName @o.LastName</option> 
       } 
       </select> 
      </div> 
    } 
       <button type="submit" class="btn btn-default" value="Cancel" name="addEditUser" id="btnCancel">Cancel</button> 
       <button type="submit" class="btn btn-default" value="Submit" name="addEditUser" id="btnSubmit">Save</button> 
    </form> 
</div> 

<script> 
    var data=@(Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model))); 
     function viewModel() { 
      this.username=ko.observable(data.Username); 
      this.password=ko.observable(data.Password); 
      this.email=ko.observable(data.Email); 
      this.isActive=ko.observable(data.IsActive); 
     }; 
     ko.applyBindings(new viewModel()); 
     var url = $("#RedirectTo").val(); 

Когда пользователь нажимает на кнопку «Сохранить», следующая функция называется:

$(function(){ 
     $("#btnSubmit").click(function(){ 
      $.ajax({ 
       url: "@Url.Action("UserSave", "Admin")", 
       type: "POST", 
       data: <modified data> 
      }); 
      window.location.href = url; 
      return false; 
     }); 
    }); 

Здесь я не знаю, как правильно передать измененные данные обратно в метод UserSave в контроллере. Я был бы очень благодарен, если бы кто-нибудь предложил способ правильно привязать данные.

Answer 1

Вы можете трансформировать представление-модель в JSON строку, используя метод ko.toJSON():

var vm = ko.dataFor(document.body); 

$.ajax({ 
    url: '@Url.Action("UserSave", "Admin")', 
    type: 'POST', 
    data: ko.toJSON(vm), 
    contentType: 'application/json', 
    }); 

(Основное преимущество ko.toJSON метода является его способность автоматически обрабатывать наблюдаемыми)

Однако, поскольку фактическое функция, которая помещает данные на сервер, не является частью модели представления, мне пришлось вызвать ko.dataFor, чтобы получить связанную модель просмотра (что не идеально).

Если вы будете делать действие часть вида-модели, он будет выглядеть лучше:

function viewModel() 
{ 
    this.username=ko.observable(data.Username); 
    this.password=ko.observable(data.Password); 
    this.email=ko.observable(data.Email); 
    this.isActive=ko.observable(data.IsActive); 

    this.submit = function(e) 
    { 
     $.ajax({ 
      url: '@Url.Action("UserSave", "Admin")', 
      type: 'POST', 
      data: ko.toJSON(this), 
      contentType: 'application/json', 
      }); 
    }  
}; 

Затем измените кнопку HTML:

<button data-bind="click: submit" 
     type="submit" 
     class="btn btn-default" 
     value="Submit" 
     name="addEditUser" 
     id="btnSubmit">Save</button> 

См Documentation