Knockout 绑定在一种形式 posts 之后抛出错误并且 post 是从另一种形式发起的？

Question

我有 2 个表单在 HTML components.When 上执行带有敲除绑定的 Ajax 提交编辑表单添加表单抛出绑定错误并阻止表单提交。

两种形式都提交得很好，并且确实存储或编辑了数据。但是，一旦对任何字段执行编辑，添加表单就会中断并提供绑定错误。

 <div class="row" id="addNewOrderUnitFormDiv">


                @using (Html.BeginForm("Add", "OrderUnit", FormMethod.Post, new { @class = "form-group", @id = "addForm" }))
                {
                    <h1>Add New Order Unit</h1>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group input-group">
                                <label class="has-float-label">
                                    @*<input type="text" data-bind="value: Name" id="addName" maxlength="50" class="form-control" placeholder="Name"/>*@
                                    @Html.TextBoxFor(m => m.Name, new { @class = "form-control", @id = "Name", placeholder = Html.DisplayNameFor(m => m.Name), data_bind = "value: Name" })
                                    @Html.LabelFor(m => m.Name)
                                </label>
                            </div>

                        </div>
                        <div class="col-md-3">
                            @*@Html.Submit("Submit")*@
                            <input type="submit" class="btn btn-action" value="Submit" id="submitAddOrderUnit" data-bind="click: function(){AddOrderUnit();}" />
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-10">


                        </div>
                    </div>
                }


            </div>

            <div class="row" id="editOrderUnitFormDiv" data-bind="with:EditModel,visible: EditShow">


                @using (Html.BeginForm("Edit", "OrderUnit", FormMethod.Post, new { @class = "form-group", @id = "editForm" }))
                {
                    <h1>Edit Order Unit</h1>
                    <div class="row">
                        <input type="hidden" data-bind="value:OrderUnitId" id="editId" />
                        <div class="col-md-6">
                            <div class="form-group input-group">
                                <label class="has-float-label">
                                    <input type="text" data-bind="value: Name" id="editName" maxlength="50" class="form-control" />
                                    @Html.LabelFor(m => m.Name)
                                </label>
                            </div>

                        </div>
                        <div class="col-md-3">
                            @*@Html.Submit("Submit")*@
                            <input type="submit" class="btn btn-action" value="Submit" id="submitEditOrderUnit" data-bind="click: function(){$root.EditOrderUnit();}" />
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-10">


                        </div>
                    </div>
                }

            </div>

var orderUnitModel = function (parent, id, name) {
        var self = this;
        self.OrderUnitId = ko.observable(id);
        self.Name = ko.observable(name);
        self.EditShow = ko.observable(); 
        self.EditModel = ko.observable();

        self.Edit = function () {
            //$('#editOrderUnitFormDiv').show();
            parent.EditShow(!parent.EditShow());
            parent.EditModel(self);
        }
}
 var orderUnitViewModel = function () {
        var self = this;
        self.OrderUnitId = ko.observable();
        self.Name = ko.observable();
        self.EditShow = ko.observable(false);
        self.orderUnits = ko.observableArray([]);
        self.EditModel = ko.observable();


        self.GetOrderUnits = function () {
            $.ajax({
                url: '@Url.Action("GetOrderUnits","OrderUnit")',
                type: 'POST',
                contentType: 'application/json;charset=utf-8',
                data: {},
                success: function (response) {
                    self.orderUnits.removeAll();
                    for (var i = 0; i < response.length; i++) {
                        self.orderUnits.push(new orderUnitModel(self, response[i].OrderUnitId, response[i].Name));
                    }
                    console.log(self.Name);
                }
            });
        }
        self.AddOrderUnit = function () {
           var rData = {
                Name: self.Name()
           }
            var orderUnit = JSON.stringify(rData);
            $.ajax({
                url: '@Url.Action("Add","OrderUnit")',
                type: 'POST',
                data: orderUnit,
                contentType: 'application/json; charset=utf-8',
                dataType: 'JSON',
                success: function (response) {
                    $('#addForm').hide();
                    if (response.success == true) {
                        self.GetOrderUnits();
                        alert("Added Successfully");
                        //toastr.success("The Service was successfully added.");
                    } else {
                        alert("Not Added")
                        //toastr.error("The Service was not added.");
                    }
                    $('#addNewOrderUnit').on("click", function () {
                        $('#addForm')[0].reset();
                        $('#addForm').show();
                    })

                }
            });
        }

        self.EditOrderUnit = function () {
            self.OrderUnitId = $('#editId').val();
            self.Name = $('#editName').val();
            $.ajax({
                url: '@Url.Action("Edit","OrderUnit")',
                type: 'POST',
                data: JSON.stringify(self),
                contentType: 'application/json; charset=utf-8',
                dataType: 'JSON',
                success: function (response) {
                    if (response.success) {
                        self.GetOrderUnits();
                        $('#editForm').hide();                       
                        alert("Edit Worked");
                        //toastr.success('The service was edited successfully.');
                    } else {
                        alert("Edit did not work");
                        //toastr.error('The service was not edited.');
                    }

                }
            });
        }
}

因此，一旦执行并完成编辑，尝试添加新订单单元时就会出现此错误： Index:249 Uncaught TypeError: self.Name is not a function at orderUnitViewModel.self.AddOrderUnit (Index:249) at orderUnitViewModel.eval (eval at parseBindingsString (knockout-min.js:74), <anonymous>:3:76) at HTMLInputElement.<anonymous> (knockout-min.js:100) at HTMLInputElement.dispatch (jquery.min.js:2) at HTMLInputElement.v.handle (jquery.min.js:2)

但是，如果不考虑编辑而执行添加，则它会通过。或者即使刷新页面，添加也能正常工作。我希望添加在编辑后能够完美运行。任何帮助将不胜感激。

Answer 1

如果您读到错误，它说 self.Name 不是函数，您在 Add 函数中调用它是这样的：self.Name() 而不是尝试 self.Name

Knockout 绑定在一种形式 posts 之后抛出错误并且 post 是从另一种形式发起的？

Knockout binding throws an error after one form posts and the post is initiated from another form?

asp.net

ajax

knockout.js