ajax – 动态表格搭建knockoutjs

发布时间：2020-12-16 02:53:38 所属栏目：百科来源：网络整理

导读：我需要从数据库构建一个动态表单.我有跟随实体来动态定义表单字段： public class FormField { public int ID { get; set; } public string Name { get; set; } public string Type { get; set; } // Possible values are: 'Radio','Combo','Text'. A dropdo

我需要从数据库构建一个动态表单.我有跟随实体来动态定义表单字段：

public class FormField {
        public int ID { get; set; }
        public string Name { get; set; }
        public string Type { get; set; }    // Possible values are: 'Radio','Combo','Text'. A dropdown will be created for a Combo type of element,a radio set for Radio type of element and a text input for Text type of element.
        public string Options { get; set; } // Only relevant in case of Radio/Combo type
        public string Default { get; set; } // Default value in case of Type 'Text' and selected value in case of Type 'Radio/Combo'
        public string Blankout { get; set; }// An expression to define when this field should be hidden 
    }

    /* A sample JSON array (from the DB) to build the form would be:
       [
        { Name:"Gender",Type:"radio",Options:["Male","Female","Unknown"],Default:"Male",Blankout:"Never" },{ Name:"Age",Type:"text",Options:"None",Default:15,{ Name:"Neighbourhood",Type:"Combo",Options:["Eastern","Western","Northern","Southern","Central"],Default:"Central",Blankout:"if (Age < 40 or Voted='Obama')" },{ Name:"Voted",Options:["Obama","Romney","Harry Potter"],Default:"Harry Potter",Blankout:"if ((Gender='Female' and Age < 15) or Neighbourhood='Eastern'" }
       ]
    */

我可以从DB中的’FormField’记录构建动态表单,但问题是我需要跟踪任何表单字段值的变化,当值发生变化时,我需要将所有表单数据发送到服务器(异步)以评估Server上的’Blankout’公式.如果我做这个改变跟踪的东西没有KnockoutJS它没有响应,变得非常复杂.
我已经阅读了几个KnockoutJS的教程,但是无法弄清楚如何为这个特定问题组织我的ViewModel.

任何帮助,将不胜感激.

更新1

我试图通过使用以下代码将此表单数据发布到控制器：

$.ajax({
            type: "POST",url: "/MyController/GetBlankoutElements",contentType: 'application/json',dataType: 'json',data: JSON.stringify(ko.toJSON(self)),success: function(result) {
                alert(result);
                //self.HiddenElements(result.split(','));
            }
    });

在我的控制器中,我尝试了以下代码：

[HttpPost]
    public ActionResult GetBlankoutElements(List<MyFieldViewModel> Fields)
    {
        return Json(Fields); // List,Fields is null here
    }

她就是MyFieldViewModel类的样子：

public class MyFieldViewModel 
    {
        public string Title { get; set; }
        public string Name { get; set; }
        public string Type { get; set; }
        public string Default { get; set; }
        public string[] Options { get; set; }
    }

我尝试过在Post an Array of Objects via JSON to ASP.Net MVC3描述的提示

以下是我执行警报时打印出的Json数据(ko.toJSON(self))

{"Fields":
        [{"Title":"CCType","Name":"CCType","Type":"Radio","Default":"Enterprise","Options":["Enterprise","Express","CVP","PCCE"]},{"Title":"Industry","Name":"Industry","Type":"Combo","Default":"Banks","Options":["Banks","ServiceProvider","Outsourcer","Airlines","Utilities","Government","Retail"]},{"Title":"Customer Lab","Name":"CustomerLab","Default":"0","Options":["0","1"]},{"Title":"No of Agents","Name":"Agents","Type":"Text","Default":"if(c.CCType=="CVP") then 10 else 25","Options":[]},{"Title":"ExpLicType","Name":"ExpLicType","Default":"if(c.CCType=="Express") then "Enhanced" else "None"","Options":["None","Premium","Standard","Enhanced"]},{"Title":"Multimedia","Name":"Multimedia","Default":"WIM","EIM","WIM","EIM&WIM","BSMediaRouting","MCAL"]}],"HiddenElements":[]
    }

我需要的只是字段名称和用户选择的值,即使我将这个json数据映射到我的MyFieldViewModel类,我仍然感到困惑,仍然如何获得所选的VALUES？

更新2(JSON数据映射工作)

当我改变

data: JSON.stringify(ko.toJSON(self))

同
????????数据：ko.toJSON(个体经营)

映射在我的控制器上完美运行,如下面的屏幕截图所示：

现在,问题仍然存在,发布表单的重点是更新服务器,使用表单上的用户输入,即针对每个表单字段元素的值.
如何发布表单字段的当前选定/类型值？
例如,在上面的屏幕截图中,我可以看到默认值,但不能看到当前选中的值.

解决方法

要跟踪更改,您可以使用本文中的脏标志： http://www.knockmeout.net/2011/05/creating-smart-dirty-flag-in-knockoutjs.html.

创建以下视图模型：

function FormField(data) {
    var self = this;

    self.Name = ko.observable(data.Name);
    self.Type = ko.observable(data.Type);
    self.Options = ko.observableArray(data.Type != 'text' ? data.Options : []);
    self.Default = ko.observable(data.Default);
}

function ViewModel(data) {
    var self = this;

    self.Fields = ko.observableArray(ko.utils.arrayMap(data,function(item) {
        return new FormField(item);
    }));

    self.dirtyFlag = new ko.dirtyFlag(this);

    self.isDirty = ko.computed(function (){
        if (self.dirtyFlag.isDirty())
        {
            alert("Value changed!");
            // Do async update.
        }
    });
}

Html标记：

<div data-bind="foreach: Fields">
    <b data-bind="text: Name"></b>
    <!--ko if: Type() == "combo"-->
        <select data-bind="options: Options,value: Default"></select>                 <!--/ko-->
    <!--ko if: Type() == "radio"-->
        <div data-bind="foreach: Options">
            <input type="radio" value="cherry" data-bind="value: $data,checked: $parent.Default" />
            <span data-bind="text: $data"></span>
        </div>
    <!--/ko-->    
    <!--ko if: Type() == "text"-->
        <input type="text" data-bind="value: Default"></input>                 
    <!--/ko-->   
    <br/>    
</div>

这是工作小提琴：http://jsfiddle.net/vyshniakov/CWTTR/

编辑：

如果我理解正确的话,以下是您的问题的答案：

要将所有字段发布到服务器,您可以使用ko.toJSON(self)函数.您的ajax调用将如下所示：

$.ajax({
        type: "POST",url: "controller/action",success: function(result) {
            self.HiddenElements(result);
        }
    });

查看更新的小提琴,看看如何根据服务器的响应隐藏一些字段：http://jsfiddle.net/vyshniakov/CWTTR/1/.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!