Asp.net mvc 淘汰验证-高级搜索用户界面

我正在构建一个类似于TFS查询生成器web界面的高级搜索UI。在客户端实现中使用knockout，让所有东西或多或少都能工作，除了最终的验证，以确保基本上选择了某些必需的项目。如果我选择了一个项目，然后取消选择该项目，它会给我一个验证错误。这很好，但是我想在点击搜索按钮时验证表单

我非常确定我需要使用ko.validatedobservable方法，只是不确定具体如何使用。无论如何，我有一把小提琴要看：如果有人有时间或意愿帮助我。我将不胜感激

谢谢你抽出时间

scvm.SearchLine = function () {
var self = this;
self.selectedField = ko.observable().extend({ required: true });
self.selectedOperator = ko.observable().extend({ required: true });
self.firstdate = ko.observable(new Date());
self.lastdate = ko.observable(new Date());
self.thedate = ko.observable(new Date());

return self;};

scvm.Criteria = function () {
var self = this,
    lines = ko.observableArray([]),

    // Put one line in by default
    loadInitialData = function () {
        lines.push(new scvm.SearchLine());
    },

    rowcount = ko.computed(function () {
        return lines().length;
    }),

    // Operations
    addLine = function () {
        lines.push(new scvm.SearchLine());
    },

    removeLine = function (line) {
        lines.remove(line);
    },

    search = function () {
        var data = $.map(lines(), function (line) {
            return line.selectedField() ? {
                selectedField: line.selectedField().searchfield,
                selectedOperator: line.selectedOperator().name,
            } : undefined
        });
        alert("Send to server: " + JSON.stringify(data));            
    },

    clear = function () {
        lines.removeAll();
    };

return {
    lines: lines,
    loadInitialData: loadInitialData,
    rowcount: rowcount,
    addLine: addLine,
    removeLine: removeLine,
    search: search,
    clear: clear
};
}();

---

是的，您的所有SearchLine对象必须包装到

ko.validatedObservable

中。您还应该实现computed属性，该属性将检查每个条件行的

isValid（）

，并返回全局有效性标志

scvm.SearchLine = function () {
    var self = this;
    self.selectedField = ko.observable().extend({ required: true });
    self.selectedOperator = ko.observable().extend({ required: true });
    self.firstdate = ko.observable(new Date());
    self.lastdate = ko.observable(new Date());
    self.thedate = ko.observable(new Date());

    return ko.validatedObservable(self);
};

scvm.Criteria = function () {

    // ...

    return {
        lines: lines,
        loadInitialData: loadInitialData,
        rowcount: rowcount,
        addLine: addLine,
        removeLine: removeLine,
        search: search,
        clear: clear,
        // new property that indicates validity of all lines
        linesValid: ko.computed(function(){
            var items = lines();
            for (var i = 0, l = items.length; i < l; i++)
                if (!items[i].isValid()) return false;
            return true;
        })
    };
}();

我修改了你的小提琴。看一看:

---

更新：

此外，我们还应该稍微修改Criteria.search方法，因为我们的线阵列包含可观察对象而不是对象：

        //...

        search = function () {
            var data = $.map(lines(), function (line) {
                line = ko.utils.unwrapObservable(line);
                return line.selectedField() ? {
                    selectedField: line.selectedField().searchfield,
                    selectedOperator: line.selectedOperator().name,
                } : undefined
            });
            alert("Send to server: " + JSON.stringify(data));            
        },

        //...

---

嗨，马丁内斯。谢谢你的回复和小提琴的例子。在我发布了这个问题之后，我一直在做这方面的工作，实际上我已经提出了一个与您发布的略有不同的实现。我注意到的主要区别是，您的示例遍历lines对象以公开linesValid属性。另外，在您的示例中，虽然我有有效的条件，并且搜索按钮已启用，但当我单击它时，我收到一个错误，即line.selectedField不是函数，而我以前没有收到此消息，我也没有收到此错误。发生此错误的原因是，

line

现在可以观察到，我们应该使用

line（）

以访问其真实界面。我没有试过点击“搜索”-抱歉。在我的例子中，解决方法是重写

条件。在之前使用unwrapping
行
搜索

方法。我已经更新了我的答案。你的方法是我第一个想到的，但是在我看来，这个方法需要更多的代码来重写。也许我错了。无论如何，谢谢你提出的有趣的问题。

        //...

        search = function () {
            var data = $.map(lines(), function (line) {
                line = ko.utils.unwrapObservable(line);
                return line.selectedField() ? {
                    selectedField: line.selectedField().searchfield,
                    selectedOperator: line.selectedOperator().name,
                } : undefined
            });
            alert("Send to server: " + JSON.stringify(data));            
        },

        //...