SearchPanes not working correctly with Razor/MVC

PetteriF

Hello!

I am using Datatables with a .Net Framework 4.8 MVC application.
It seems that the data (or part of it) of the table is lost when posting back from the Razor page to the Controller.

The problem is in a large legacy application but I created a simple app to pin down the problem.
Here is the Razor page:

@model CaseViewModel

@using MVCTestbench.Models
@using System.Collections.Generic

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/datatable")

@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Styles.Render("~/Styles/datatable")

@{
    ViewBag.Title = "Home Page";
}

<script type="text/javascript" charset="utf-8">
    $(document).ready(function () {

        new DataTable('#CaseTable', {
            initComplete: function () {
                this.api()
                    .columns()
                    .every(function () {
                        var column = this;
                        var title = column.footer().textContent;

                        // Create input element and add event listener
                        $('<input type="text" placeholder="Search ' + title + '" />')
                            .appendTo($(column.footer()).empty())
                            .on('keyup change clear', function () {
                                if (column.search() !== this.value) {
                                    column.search(this.value).draw();
                                }
                            });
                    });
            },
            layout: {
                top1: {
                    searchPanes: {
                        viewTotal: true
                    }
                }
            }
        });
    });

</script>

@using (Html.BeginForm("Post", null, FormMethod.Post))
{
    <input type="submit" name="command" value="Post" />
    <br />

    <table id="CaseTable" class="display Dynaaminentaulu">
        <thead>
            <tr>
                <th>*</th>
                <th>*</th>
            </tr>
            <tr>
                <th>Nro</th>
                <th>Asia</th>
            </tr>
        </thead>
        <tbody>
            @for (int i = 0; i < Model.CaseList.Count; i++)
            {
                <tr>
                    <td>
                        @Model.CaseList[i].Id @Html.HiddenFor(m => m.CaseList[i].Id)
                    </td>
                    <td>
                        @Model.CaseList[i].Name @Html.HiddenFor(m => m.CaseList[i].Name)
                    </td>
                </tr>
            }
        </tbody>
        <tfoot>
            <tr>
                <th>Nro</th>
                <th>Asia</th>
            </tr>
        </tfoot>    
    </table>
}

This is the ViewModel:

using System.Collections.Generic;

namespace MVCTestbench.Models
{
    public class CaseViewModel
    {
        public List<Case> CaseList { get; set; } = new List<Case>();
    }

    public class Case
    {
        public string Id { get; set; }
        public string Name { get; set; }
    }
}

Controller code is this:

using MVCTestbench.Models;
using System.Web.Mvc;

namespace MVCTestbench.Controllers
{
    public class HomeController : Controller
    {
        private CaseViewModel ViewModel
        {
            get
            {
                var model = new CaseViewModel();
                model.CaseList.Add(new Case { Id = "1", Name = "Text 1" });
                model.CaseList.Add(new Case { Id = "2", Name = "Text 2" });
                model.CaseList.Add(new Case { Id = "3", Name = "Case 3" });
                return model;
            }
        }

        public ActionResult Index()
        {
            return View(ViewModel);
        }

        [HttpPost]
        public ActionResult Post(CaseViewModel model, string command)
        {
            // model.CaseList is null here if I filtered the list by "Case"
            return View("Index", ViewModel);
        }

    }
}

When filtering the list like this and clicking on Post, the model.CaseList is null!
It works ok, when filtering with "Text".

I have run DataTable debugger, the debug code is anikeg.

allan

Can you link to a test case showing the issue please?

I don't really understand the form aspect of it. It sounds like SearchPanes is working correctly when the table is loaded, but when you submit the form, there is an issue. I don't know what would be causing that.

Thanks,
Allan

PetteriF

Sorry, I can not provide a link. This originally happens on a big legacy application but I could not allow you to access this.

Does it help you if I upload the .NET MVC testbench application I wrote to reproduce the issue?

PetteriF

And yes you are correct. The issue is when you submit the form back to the server.

allan

I'm to really setup to run .NET applications at the moment - that would take more time than I have available for free support I'm afraid.

I'd suggest having a look at the parameter that the form is submitting and see what the CaseViewModel is doing based on that. I don't really see why SearchPanes or filtering in the footer would make any difference.

Allan