一个表单发布后敲除绑定会引发错误并且该帖子是从另一个表单启动的？

Posted 2023-03-27

【中文标题】一个表单发布后敲除绑定会引发错误并且该帖子是从另一个表单启动的？

【英文标题】：Knockout binding throws an error after one form posts and the post is initiated from another form?

【发布时间】：2020-01-06 19:05:53

【问题描述】：

我有 2 个表单在 html 组件上执行带有敲除绑定的 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.');
                    

                
            );
        

因此，一旦执行编辑并通过，在尝试添加新的 orderunit 时会出现此错误： 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)

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

【问题讨论】：

你能把self.GetOrderUnits的代码贴出来吗？由于它是在执行编辑时调用的，我怀疑这个函数会破坏你的视图模型。

您正在覆盖 EditOrderUnit 方法中的 observable 并将其转换为字符串：self.Name = $('#editName').val()。但是，您似乎没有正确使用双向绑定。为什么要使用 jquery 来获取值并将其分配给self.Name？您已经将 Name 和 OrderUnitId 数据绑定到输入。

@BrotherWoodrow 发布了它，但我怀疑 GetOrderUnit 会破坏它

@adiga 我尝试在编辑中使用相同的绑定，Name: self.Name()，但它只是刷新了表格并且没有恢复编辑的值？

我相信一开始你应该把<input type="submit" ... />都替换成<input type="button" ... />，以避免浏览器对“提交”的默认反应和onClick处理程序之间出现不可预知的干扰...

【参考方案1】：

如果你读到错误，它说 self.Name 不是函数，你在 Add 函数中调用它，如下所示：self.Name() 而不是尝试self.Name