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

问题描述

我正在桌面上使用引导件，还可以使用为可能的解决方案的示例。

$（）可用于从文档中获取节点，无论分页，排序等。此示例显示 $（）用于从表中获取所有输入元素。

通过Ajax提交您的数据。

  $（document）.ready（function（）{
 var table = $（'＃example'）。DataTable（）; 
 
 $（'form'）。on（'submit'，function（）{
 var data = 。$（'input，select'）。serialize（）; 
 
 // console.log（'提交数据'，数据）; 
 
 //提交表单数据ajax 
 $ .ajax（{
 type：POST，
 url：'/script/handler.ashx'，
 data：data，
 success：function （数据）{
 // console.log（'Server response'，data）; 
} 
}）; 
 
 //防止表单提交
 return false; 
}）; 
}）; 
  

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.

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

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.

解决方案

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.

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屋！