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++;
}

How many items are there in the bindata? I see you already had a JS event handler toggledetails(@(zoneidx)) to do something, what's the problem with that? — quyentho
– quyentho, Commented Mar 26, 2024 at 16:10
@quyentho there are 20 Zones consists of 1000~2000 elements each. toogledetails(@(zoneidx)) is just java script to open and unfold selected div. nothing wrong with javascript — MAREY
– MAREY, Commented Mar 26, 2024 at 21:51
I asked about the js event because you can use that to only fetch data when users click on the selected div to reduce the number of items rendered at once. You can create an API endpoint, move all the item's calculation logic to that endpoint, and when someone clicks the zone, you fetch the respective locations. Let me know if you don't know how to do that, I'll try to come up with some example code. By the way, are you using Razor pages or MVC? — quyentho
– quyentho, Commented Mar 27, 2024 at 2:58

Emre Akdemir · Accepted Answer · 2024-03-26 14:57:34Z

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);
        }
    });
}

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related