如何提交包含输入元素的多页表格

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上的引导程序来集成搜索和分页。问题是，在单击submit按钮之后，模型上只保留了表的当前页。

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

没有通过Datatables.net集成搜索和分页，只有在使用Datatables.net插件时才会出现错误。

Model:

模型:

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

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

Controller:

控制器:

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);
}

View:

观点:

@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:

点击提交按钮后:

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

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

1 个解决方案

#1

CAUSE

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.

当使用带有分页的datatable插件时，DOM中仅存在当前页元素(在您的示例中为10)以提高性能。因此，当您提交表单时，只有当前页的表单控件值被提交。

SOLUTION 1: Submit form directly

The trick is to turn form elements from pages other than current into <input type="hidden"> before submitting the form.

诀窍是在提交表单之前将表单元素从当前页以外的页面转换为。

var table = $('#example').DataTable();

// Handle form submission event
$('#frm-example').on('submit', function(e){
   var form = this;

   // Encode a set of form elements from all pages as an array of names and values
   var params = table.$('input,select,textarea').serializeArray();

   // Iterate over all form elements
   $.each(params, function(){
      // If element doesn't exist in DOM
      if(!$.contains(document, form[this.name])){
         // Create a hidden element
         $(form).append(
            $('<input>')
               .attr('type', 'hidden')
               .attr('name', this.name)
               .val(this.value)
         );
      }
   });
});

See this example for code and demonstration.

有关代码和演示，请参见这个示例。

SOLUTION 2: Submit form via Ajax

Another solution is to submit the form via Ajax.

另一个解决方案是通过Ajax提交表单。

var table = $('#example').DataTable();

// Handle form submission event
$('#frm-example').on('submit', function(e){
   // Prevent actual form submission
   e.preventDefault();

   // Serialize form data
   var data = table.$('input,select,textarea').serialize();

   // Submit form data via Ajax
   $.ajax({
      url: '/echo/jsonp/',
      data: data,
      success: function(data){
         console.log('Server response', data);
      }
   });
});

See this example for code and demonstration.

有关代码和演示，请参见这个示例。

NOTES

Please note that both solutions will work in client-side processing mode only.

请注意，这两个解决方案将只在客户端处理模式下工作。

LINKS

See jQuery DataTables: How to submit all pages form data for more details.

参见jQuery DataTables:如何提交所有页面表单数据以获得更多细节。