C# Razor Page populating/processing data on click of a button

Question

I am new to ASP.net and trying to modify a page where it shows list of data into html. Due to the fact that bindata being enormous, it takes longer to load this page.

When I think of solution to this, I thought of creating a event for each individual button @item.zone, process bindata, and append to the html. SO if I click on one of header tag/button, It would then process bindata and show the data correspond to it. However, since I can not access c# variable from client side, I wasn't able to do so.

I measured the execution time for the C# code, noticed that the nested forloop is taking most of loading time.

Is there any right? preferable? recommended approach to this issue?

@model ValueDataSet[]
@{
ViewBag.Title = "Bin List View";
Pallet[] ActivePallets = ViewBag.ActivePalletArr;
var bindata = Model.GroupBy(x => new { x.description }).Select(x => new
{
    Zone = x.Key.description,
    Location = x.Select(s => new
    {
        PalletItem = ActivePallets.FirstOrDefault(a => a.GetLocation() == s.key),
        BIN = s.key,
        LOCATION = s.value
    }).Select(s => new
    {
        PalletItem = s.PalletItem,
        Aging = (DateTime.Now - (s.PalletItem?.CreatedOn ?? DateTime.Now)).Days,
        BIN = s.BIN,
        LOCATION = s.LOCATION
    })
}).OrderByDescending(x => x.Zone).ToArray();
List<StagingPallets> StagingPalletList = ViewBag.StagingPalletList;

var widthpercent = (100m / (decimal)bindata.Length).ToString("0.00");
}



@{ var zoneidx = 0;}
@foreach (var item in bindata)
{
    <h5><b onclick="toggledetails(@(zoneidx))" style="cursor:pointer;">@item.Zone (@(item.Location.Where(x => x.PalletItem != null).Count()) / @(item.Location.Count()))</b></h5>
         <div class="zonewidth toggledetail_@zoneidx" style="display:none;">
              @foreach (var bin in item.Location)
              {
                  var order = bin.PalletItem?.ContainerItem?.OrderItem ?? new OrderItem();
                  <div class="binlocation @(bin.Aging > 12 ? "aging2" : bin.Aging > 0 ? "aging1" : "")">
                       @bin.BIN (@bin.Aging)
                       <div>
                             <small>@(bin.PalletItem?.LicensePlate)</small>
                             <small><a href="/order/edit/@order.ItemKey" target="_blank">@order.OrderNumber</a></small>
                       </div>
                 </div>
              }
        </div>
  zoneidx++;
}

Answer 1

Seems to me like you have quite a headache, which is normally connected with the web development problem of how to load and display efficiently large sets of data. Dynamically loading the data with only the initiative of the user as they interact with the page is indeed a very strong technique to employ. Some of the strategies that should be followed or are usually recommended to optimize your ASP.NET page follow.

Use AJAX for Dynamic Data Loading

On the other side, that could be fetched, instead of loading everything up when the user clicks on some zone. You'll need to add some JavaScript (or jQuery) to your server-side C# code. When a user clicks a zone button, trigger an AJAX call that requests the data for that specific zone from the server. Write the action method for server-side (C#) which accepts a zone identifier, retrieves zone data for this zone, processes that data, and returns processing results back in the form of JSON. On returning from the client side, AJAX calls create HTML elements attached to the DOM dynamically from JavaScript.

Implement Paging or Infinite Scroll

If the dataset is very large, you might want to implement paging or infinite scrolling, where at first only a subset of data is rendered and more data can be fetched and rendered on demand.

Caching

If the data should not change frequently, maybe then, the processed data should be considered to be cached, so that the same data is not processed again and again for some other user or the same user but with some other request.

Example of AJAX Implementation

Here’s a simplistic example of how you might set up the AJAX call and the corresponding server-side action.

public ActionResult GetZoneDetails(int zoneId)
{
    var data = { }; //from your datastore
    return Json(data, JsonRequestBehavior.AllowGet);
}

function getDetail(zone) {
    $.ajax({
        url: '/PATH',
        type: 'GET',
        data: { zoneId: zone.Id },
        success: function(data) {
            // Process and display data
            $(selector).html(data);
        }
    });
}