将动态输入表单数据保存到数据库 kendo ui答案

【问题标题】：save dynamic input form data into database kendo ui将动态输入表单数据保存到数据库 kendo ui
【发布时间】：2016-04-20 07:52:17
【问题描述】：

我已经填充了动态输入表单字段。它填充成功。我不知道如何使用 put/post api 将数据保存到数据库中。正如我使用的那样获取 api。

html代码

<div id="renderform" class="form horizontal-form form-body">
        <!-- container UL to host input fields -->
        <div class="row" data-template="fieldsTemplate" data-bind="source:fields">

        </div>
    <!-- button to save changes -->
    <button id="save" class="btn btn-circle  btn-sm btn-default" type="button">Save</button>
</div>

剑道模板

<script id="fieldsTemplate" type="text/x-kendo-template">
    <div class="form-group">
        <label class="control-label" data-bind="attr: { for: name}, text: ItemLabel"></label>
        <div class="">
            <input class="form-control-static" type="text" />
        </div>
    </div>
</script>

ajax 函数

<script type="text/javascript">
    // retrieve the model from an API call
    $.ajax({
        url: crudServiceBaseUrl + "FormItemsDesign/GetFormItemsDesignList?parentid=" + formdesignid,
        //url :"json.txt",
        type: "GET",
        dataType: "json",
        success: function (model) {
            // convert the JSON to observable object
            var viewModel = kendo.observable(model);
            // bind the model to the container
            kendo.bind($("#renderform"), viewModel);
        }
    });
</script>

Post/Put api 就像

url: crudServiceBaseUrl + "FormItemsDesign
type:Post
type:Put

请帮助我，如何制作/使用 ajax 函数来调用 Post/Put 以将每个动态字段的数据保存/更新到数据库中。提前感谢您的宝贵时间和精力。

【问题讨论】：

标签： javascript jquery kendo-ui asp.net-web-api2

【解决方案1】：

在阅读了更多文章后，我终于找到了这个解决方案。它对我有用。

$("#save").on("click", function () {

        $("#renderform input").each(function () {
            var dataModel = {
                parentid: $(this).attr("id"),
                ItemOrder: "1",
                ItemFieldType: "1",
                ColWidth: "100",
                RowHeight: "100",
                ItemText: $(this).val(),
                ItemLabel: $(this).attr("name")
            };
            $.ajax({
                type: 'POST',
                url: crudServiceBaseUrl + "FormsItem?firmid=" + firmid + "&createdby=" + clientid,
                data: JSON.stringify(dataModel),
                contentType: 'application/json; charset=utf-8',
                dataType: 'json'
            });
        });
        alert("Data Saved successfully");
    });

【讨论】：