How to send a model (a List with more than 3000 records) from a view to another get action in ASP.Net Core?

Question

I have an ASP.net Core project. I want to send entire of a model that is a list of products, from a view, through "a" tag, to another get action in controller. I used TempData but it dis not work. Products model has a lot of properties and foreign keys. Here is an example:

First action is:

public IActionResult ShowProducts(int side, MyViewModel myViewModel)
{
    ViewBag.side = side;
    if (side == 0)
    {
        List<Product> products =  ShowAllProducts();
        return View(products);
    }

    List<Product> products2 = FilterProducts(myViewModel);
    return View(products2 );
}

List<Product> FilterProducts(MyViewModel myViewModel)
{
    List<Product> Products = new List<Product>() {};
    //some code...
    return products;
}

List<Product> ShowAllProducts()
{
    return _context.Products.Include(p => p.Table1).Include(p => p.Table2)
         .Include(p => p.Table3).Include(p => p.Table4)
         .Include(p => p.Table5).Include(p => p.Table6)
         .Include(p => p.Table7).Include(p => p.Table8).Tolist();
}

Second Action is:

public IActionResult PrintProducts(List<Product> model)
{
    return View(model);
}

ShowProducts View is:

    @model IEnumerable<Product>
    
     @*some tag*@

     <a title="Print" asp-action="PrintProducts" asp-route-model ="@Model"></a>

     @*some tag*@

In this example, model in second action is empty. Actually it doesn't send.

I changed the view like this:

 @model IEnumerable<Product>

 @*some tag*@
 <a title="Print" href="@Url.Action("PrintProducts", "Controller", new { model = @Model })"></a>

 @*some tag*@   

but this way didn't work too.

I used TempData and changed actions like this: First action:

public IActionResult ShowProducts(int side, MyViewModel myViewModel)
{
    ViewBag.side = side;

    if (side == 0)
    {
        List<Product> products =  ShowAllProducts();
        TempData["MyModel"] = products;

        return View(products);
    }

    List<Product> products2 = FilterProducts(myViewModel);
    TempData["MyModel"] = products2;

    return View(products2 );
}

Second Action is:

public IActionResult PrintProducts()
{
    List<Product> model= TempData["MyModel"] as List<Product>;
    return View(model);
}

but in this way, the first view didn't load at all! I got status code 500.

Is there any way to solve this problem?

Answer 1

Pagination

Normally, you would use pagination if you want to show a lot of data. This essentially divides your data into multiple chunks of records called pages. Now, If you want to show all data on a single page, you can call the GET multiple times underwater to get all the data you want. This reduces the amount of data in a single call. It also makes things more scalable.

Filtering

Filtering is used, so the user can filter on certain criteria. For example, a search box. This would allow the user to enter a name, and you only return the items that match these criteria.

Ordering

If you are going to page the data, you also need to ensure the data is fetched in a particular order. If the data is in a random order for each call, the pages will contain different items each time they are fetched. It also allows your users to sort by different properties.

Example

Here is how I do this, it also contains filtering and sorting.

[HttpGet]
[Route("GetAll")]
virtual public async Task<ActionResult<DbItem[]>> GetAll(string? filter, string? order, int? pageNo, int? pageSize)
{
    IQueryable<DbItem> query = _context.Set<DbItem>();

    // Apply filters to the query (you need to implement your filter logic)
    if (!string.IsNullOrEmpty(filter))
    {
        //Example of how to filter by title
        query = query.Where(a=>a.Title.Contains(filter));
    }

    // Apply ordering to the query if orderBy is provided
    if (!string.IsNullOrEmpty(order))
    {
        // Exmaple where order contains your property name
        query.OrderBy(e => EF.Property<DbItem>(e, order));
    }

    // Ensure the pagesize is something reasonable
    pageSize ??= 30;
    if (pageSize < 1 || pageSize > 30)
        pageSize = 30;

    // Ensure the page is something reasonable
    pageNo ??= 0;
    if (pageNo < 0)
        pageNo = 0;

    // Apply paging to the query
    int skip = pageNo.Value * pageSize.Value;
    query = query.Skip(skip).Take(pageSize.Value);

    // Execute the query and return the items
    var result = await query.ToListAsync();
    return Ok(result);
}

How to show this

On the HTML side of things, there are different solutions depending on how you want your user experience. A few options you see a lot on the internet:

• Add a paginator at the bottom of the page: https://getbootstrap.com/docs/4.0/components/pagination/
• Use an endless scroller, this is what apps like Instagram, TikTok etc.
• Use a table, that fetches new data when you are scrolling towards the bottom.
• Since you are using ASP for the frontend, you might want to fetch more data using AJAX and append this to the page using jQuery.

More info

The Microsoft documentation has a very nice explanation: https://learn.microsoft.com/en-us/aspnet/core/data/ef-mvc/sort-filter-page?view=aspnetcore-7.0

Answer 2

The tempdata's provider is cookie-based by default. Most web clients such as web browsers enforce limits on the maximum size of each cookie and the total number of cookies. When using the cookie TempData provider, verify the app won't exceed these limits. Consider the total size of the data. Account for increases in cookie size due to encryption and chunking.

So we don't suggest you store 3000 records inside the tempdata , one possible way is storing the records ID and then inside another method query the data by using that ID.

Another way is storing the data inside the session, memory cache, or redis cache.

More details about how tempdata works and select which storage to store cache, you could refer to this article.