ASP.NET Core 2.0/Razor Pages - How can I persist data in a NonFactors MVC6 grid between requests?

Question

I'm using the NonFactors MVC6.Grid. I'm pretty much just using the base grid:

@(Html
    .Grid(Model.Parts)
    .Build(columns =>
    {
        columns.Add(model => model.PartNumber).Titled("Part Number");
        columns.Add(model => model.Description).Titled("Description");

        columns.Add(model => model.ProductCode).Titled("Product Code");
        columns.Add(model => model.Warehouse).Titled("Warehouse");
    })
    .Filterable()
    .Sortable()
    .Pageable(pager =>
    {
        pager.RowsPerPage = 20;
    })
)

As you can see, the grid is bound to the Parts property of the model:

[BindProperty]
public List<PartModel> Parts { get; set; } = new List<PartModel>();

The problem I'm having is that when I sort or filter on the MVC6.Grid, it does a POST since the data doesn't persist between requests, the grid ends up trying to sort on nothing.

Parts is populated by a search function. Is the only way to do this is re-populate parts when the grid performs a post? And if that's the case, is there a way to tie into the post event?

Ideally, it would be great if the grid could sort and filter local data without posting.

score 0 · Answer 1 · answered Apr 25 '18 at 02:07

I use this also and you're doing essentially what I have done (I'm using it with Razor Pages). In my case, the paging (or sorting) does a get and I hooked into the Razor pages OnGet() where I dump the list back out (I'm using Dapper for the querying).

Code behind

public void OnGet()
{
    using (var conn = SiteUtilities.DbConnection())
    {
        this.Articles = conn.Query<Article>("select * from article order by title");
    }
}

public IEnumerable<Article> Articles { get; set; }

Razor Page

        <div class="table-responsive">
            @(Html
                .Grid(Model.Articles)
                .Build(columns =>
                {
                columns.Add(model => model.title).Titled("title").Encoded(false).RenderedAs(model => $"<a href='/{model.href}'>{model.title}</a>");
                    columns.Add(model => model.href).Titled("href");
                    columns.Add(model => model.update_time).Titled("Last Updated").RenderedAs(m => SiteUtilities.UtcToEasternTime(m.update_time));
                    columns.Add(model => model.username).Titled("Last Updated By");
                    columns.Add(model => model.locked).Titled("Locked").RenderedAs(model => model.locked ? "True" : "False");
                    columns.Add(model => model.views).Titled("Views").RenderedAs(model => model.views.ToString());
                })
                .Filterable()
                .Sortable()
                .Pageable()
                .Css("table table-sm table-striped table-hover")
            )
        </div>

I've been researching the plumbing of this over the last few days as well. He just put out a version 3 and it has more examples on his demo site, if you're still interested you might give that a look.

ASP.NET Core 2.0/Razor Pages - How can I persist data in a NonFactors MVC6 grid between requests?

1 Answers1