如何提交含有输入元素多页表格形式 [英] How to submit form containing multi-page table with input elements

问题描述

我用引导我的表和 Datatables.net 整合搜索和分页为好。问题是，只有表的当前页面点击提交按钮后保留的模型。

I'm using bootstrap on my Table and Datatables.net to integrate searching and paging as well. The problem is that only the current page of the Table was retained on the Model after clicking the submit button.

如果没有通过Datatables.net整合搜索和分页，也只有当使用Datatables.net插件没有错误者。

Without integrating searching and paging via Datatables.net, there were no errors only when Datatables.net plugin was used.

型号：

public class SampleViewModel
{
    public List<CollectionViewModel> Collection { get; set; }
}

public class CollectionViewModel
{
    public string Name { get; set; }
    public int? Value { get; set; }
}

控制器：

public ActionResult Sample()
{
    SampleViewModel model = new SampleViewModel();
    model.Collection = new List<CollectionViewModel>();
    model.Collection.Add(new CollectionViewModel { Name = "Test1" });
    model.Collection.Add(new CollectionViewModel { Name = "Test2" });
    model.Collection.Add(new CollectionViewModel { Name = "Test3" });
    model.Collection.Add(new CollectionViewModel { Name = "Test4" });
    model.Collection.Add(new CollectionViewModel { Name = "Test5" });
    model.Collection.Add(new CollectionViewModel { Name = "Test6" });
    model.Collection.Add(new CollectionViewModel { Name = "Test7" });
    model.Collection.Add(new CollectionViewModel { Name = "Test8" });
    model.Collection.Add(new CollectionViewModel { Name = "Test9" });
    model.Collection.Add(new CollectionViewModel { Name = "Test10" });
    model.Collection.Add(new CollectionViewModel { Name = "Test11" });
    model.Collection.Add(new CollectionViewModel { Name = "Test12" });
    model.Collection.Add(new CollectionViewModel { Name = "Test13" });
    model.Collection.Add(new CollectionViewModel { Name = "Test14" });
    model.Collection.Add(new CollectionViewModel { Name = "Test15" });

    return View(model);
}

[HttpPost]
public ActionResult Sample(SampleViewModel model)
{
    var ctr = model.Collection.Count(x => x.Value != null);

    return View(model);
}

查看：

@model MyApp.Models.SampleViewModel

@using (Html.BeginForm())
{
<div class="dataTable_wrapper">
    <div class="pull-right">
        <button type="submit" name="submitButton" class="btn btn-primary btn-sm">
            <i class="fa fa-floppy-o fa-1x"></i>
            Submit
        </button>
    </div><br /><hr />
    <table class="table table-striped table-bordered table-hover">
        <thead>
            <tr>
                <th>Name</th>
                <th>Value</th>
            </tr>
        </thead>
        <tbody>
             @for (int i = 0; i < Model.Collection.Count(); ++i)
             {
                 @Html.HiddenFor(model => model.Collection[i].Name)
                <tr>
                    <td>@Html.DisplayFor(model => model.Collection[i].Name)</td>
                    <td>
                        @Html.TextBoxFor(model => model.Collection[i].Value, new { @class = "form-control" })
                    </td>
                </tr>
             }
        </tbody>
    </table>
</div>
}

前提交：

Before Submit:

提交后单击按钮：

After Submit Button Clicked:

您可以在上面的图片看到，而不是 15条，只有 10条上存储的模型中。

You can see on the above picture that instead of 15 records, only 10 records was stored on the model.

推荐答案

在使用数据表插件与分页只有当前页面＆LT; TR＆GT; 元素（ 10 在你的例子）存在于DOM性能。因此，当您提交表单，只有当前页面的表单控件提交值。

When using DataTables plug-in with pagination only current page <tr> elements (10 in your example) exist in the DOM for performance. Therefore when you submit the form, only current page form controls values are being submitted.

提交其横跨多个页面的表单需要额外的工作一点点地得到，是不是在文件中再的信息。

Submitting forms which span multiple pages requires a little bit of additional work to get the information that is not in the document any longer.

请参见表单输入了解的可能的解决方案的例子。

Please see Form inputs for an example of possible solution.

）的 $（的可用于获得从文档节点不管分页，排序等等。这个例子显示 $（）被用来获取所有输入元素从表

The $() can be used to get nodes from the document regardless of paging, ordering etc. This example shows $() being used to get all input elements from the table.

基本上解决的办法是通过Ajax提交您的数据。

Basically the solution is submit your data via Ajax.

$(document).ready(function() {
    var table = $('#example').DataTable();

    $('form').on('submit', function() {
        var data = table.$('input, select').serialize();

        // console.log('Submitting data', data);

        // Submit form data via ajax
        $.ajax({
           type: "POST",
           url: '/script/handler.ashx',
           data: data,
           success: function(data){
              // console.log('Server response', data);
           }
        });

        // Prevent form submission
        return false;
    } );
} );

这篇关于如何提交含有输入元素多页表格形式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！