c# - DataTables MVC 回发数据为空

Question

我最初使用 MVC 表向用户显示数据，但由于数据非常大并开始抛出 storage out of memory 异常，我决定切换到 DataTables。数据显示正常，但在回发时，没有数据传到 HTTPPost 操作方法。我知道 MVC View 有隐藏的 View 来存储值，并且在回发期间它们绑定(bind)模型，但我们将如何使用数据表复制此行为？

谢谢

@model IList<ViewModels.ReferralViewModel>@model IList<ViewModels.ReferralViewModel>

@{
    Layout = "";
}

@if (Model != null)
{
    <script src="~/Scripts/DataTables/jquery.dataTables.min.js" type="text/javascript"></script>
    <script src="~/Scripts/DataTables/dataTables.bootstrap.js" type="text/javascript"></script>

    <link href="~/Content/DataTables/css/dataTables.bootstrap.css" />
    <script type="text/javascript">

        var editor;
        $('#example').DataTable({
            "serverSide": true,
            "processing": true,

            "order": [[1, 'asc']],
            "ajax": {
                "url": "/SMS/ReferralDetailsTest",
                "type": "POST",
                "dataType": "json"
            },
            'columnDefs': [{
                'targets': 0,
                'searchable': false,
                'orderable': false,
                'className': 'dt-body-center',
                'render': function (data, type, full, meta) {
                    return '<input type="checkbox" name="IsSelected[]">';
                }
            },
                {
                    'targets': 17,
                    'data': null,
                    'defaultContent': "<input type=\"text\" size=\"100\" style = \"width: 95px; padding: 6px 2px 6px 2px\" >"
                },
                {
                    'targets': 19,
                    'data': null,
                    'defaultContent': "<input type=\"button\" value=\"SMS\" class=\"btn btn - primary\" onclick=\"return $('#sendSMS').click();\" />"
                }
            ],
            "columns": [
                {
                    "data": null,
                    "defaultContent": '',
                    "className": 'select-checkbox',
                    "orderable": false,
                    "title": "Select All"
                },
                { "title": "Referral Id", "data": "ReferralId", "autoWidth": true },
                { "title": "First Name", "data": "patient.PatientFirstName", "autoWidth": true },
                { "title": "Last Name", "data": "patient.PatientLastName", "autoWidth": true },
                { "title": "Referral Date", "data": "ReferralDate", "autoWidth": true },
                { "title": "Referral Priority", "data": "ReferralPriority", "autoWidth": true },
                { "title": "Referral HospCode", "data": "ReferralHospCode", "autoWidth": true },
                { "title": "Referral Specialty Code", "data": "ReferralSpecialtyCode", "autoWidth": true },
                { "title": "Referral Specialty Name", "data": "ReferralSpecialtyName", "autoWidth": true },
                { "title": "Referral Clinic Code", "data": "ReferralClinicCode", "autoWidth": true },
                { "title": "Referral Clinic Description", "data": "ReferralClinicDescription", "autoWidth": true },
                { "title": "Last Booked Clinic Category Code", "data": "LastBookedClinicCategoryCode", "autoWidth": true },
                { "title": "Last Booked Clinic Category", "data": "LastBookedClinicCategory", "autoWidth": true },
                { "title": "Last Booked Clinic Code", "data": "LastBookedClinicCode", "autoWidth": true },
                { "title": "Last Booked Clinic Description", "data": "LastBookedClinicDescription", "autoWidth": true },
                { "title": "Mobile No", "data": "patient.MobileNumber", "autoWidth": true },
                { "title": "Overwrite Mobile No", "data": null },
                { "title": "Status", "data": "Status", "autoWidth": true }
            ],

            "select": {
                "style": 'os',
                "selector": 'td:first-child'
            }
        });
    </script>


    <div class="form-group">
        &nbsp;
    </div>
    <div>
        <ul class="nav nav-tabs" role="tablist" id="DetailsTab">
            <li role="presentation" class="active"><a href="#Referral" aria-controls="Referral" role="tab" data-toggle="tab" class="tbs">Referrals</a></li>
            <li role="presentation"><a href="#Responses" aria-controls="Response" role="tab" data-toggle="tab" class="tbs">Responses</a></li>

        </ul>
        <div class="tab-content">

            <div role="tabpanel" class="tab-pane active" id="Referral">
                <br />


            </div>

            <div>
                <table class="table table-striped" id="example"></table>


            </div>
        </div>
    </div>
}

--post方法代码--

      $('#sendSMS').click(function () {
     var formData = $('#sendSMSForm').serialize();
                    $.ajax({
                        type: "POST",
                        url: "/SMS/SendSMSForClients",
                        data: formData, //if you need to post Model data, use this
                        success: function (result) {
                            $("#partial").html("");
                            $("#partial").html(result);

                            searchReferrals(referralSpecialty, referralClinicName, referralClinicCode, referralPriority, referralStartDate, referralEndDate);
                            $('.nav-tabs a[href="#patientsReferral"]').tab('show');
                            $('.tab-pane a[href="#patientsReferral"]').tab('show');
                            $("#loading").hide();
                        },
                         error: function (jqXHR, textStatus, errorThrown) {
                            $("#partial").html("");
                            $('#partial').html('<p>status code: ' + jqXHR.status + '</p><p>errorThrown: ' + errorThrown + '</p><p>jqXHR.responseText:</p><div>' + jqXHR.responseText + '</div>');
                            console.log('jqXHR:');
                            console.log(jqXHR);
                            console.log('textStatus:');
                            console.log(textStatus);
                            console.log('errorThrown:');
                             console.log(errorThrown);

                        },
                    });

Answer 1

我认为您可能仍在考虑 Webforms 及其 ViewState。使用网络表单，您可以将数据加载到一个对象，然后该数据将存储在一个隐藏的输入中，并通过表单发布 (PostBack) 发送回服务器。

但是 MVC 不保留状态。因此，即使在发布表单后，您仍需要从数据库中重新加载所有数据并将其发送到模型。否则该对象将为空。

网络表单

protected void Page_Load(object sender, EventArgs e)
{
    //load the data from a source
    DataTable dt = LoadFromDB();

    if (!IsPostBack)
    {
        //bind data to an object
        GridView1.DataSource = dt;
        GridView1.DataBind();
    }
}

protected void Button1_Click(object sender, EventArgs e)
{
    //do stuff here on form post (PostBack)

    //you don't have to rebind data to GridView1 here since the data is retained in ViewState 
}

MVC

public ActionResult Index()
{
    var model = new MyModel();

    //load the data from a source
    model.dt = LoadFromDB();

    return View(model);
}

[HttpPost]
public ActionResult Index(MyModel model)
{
    //do stuff here on form post

    //load the data again since it is not retained in a ViewSate
    //if you do not then dt will be null
    model.dt = LoadFromDB();

    return View(model);
}

附带说明一下，如果您的数据集太大而引发内存异常，您可能需要考虑某种形式的分页，而不是将所有数据转储到客户端。