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”形式显示填充的用户数据 - 因此数据成功从控制器传递到视图。在视图中，我想让用户更新数据或只是“取消”操作并返回用户列表。

为此，我创建了以下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

您可以使用ko.toJSON()方法将视图模型转换为JSON字符串：

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

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

（ko.toJSON方法的主要好处是它能够自动处理observables）

但是，由于将数据发布到服务器的实际函数不是视图模型的一部分，因此我不得不调用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

如何将更新的模型值传递回控制器？

1 个答案: