How to bind Grid in Ajax call method using ArryList object in asp.net

Question

Hi All  How to bind the gridview through ajax call Method using Arraylist Object result. i have implemented it . i am not sure where did mistake. can anyone check correct my mistake.I never bind grid like this . Sample code : Ajax call : $(document).ready(function () { var CategoryName = 'FERRERO'; $.ajax({ type: POST contentType: application/json; charset=utf-8 url: InteractiveDashboard.aspx/WebGrid1 data: {CategoryName:' + CategoryName + '} dataType: json success: function (data) { for (var i = 0; i { $(#gvDetails).append(  + dataval[i].Branch +   + dataval[i].Barcode +   + dataval[i].Name +   + dataval[i].InventoryDesc +   + dataval[i].CategoryName +   + dataval[i].Amount +   + dataval[i].Qty +  ); //$(#gvDetails).append(  + data.d[i].Branch + //   + data.d[i].Barcode +  ); } } error: function (result) { alert(Error); } }); }); dummy grid : private void BindColumnToGridview() { DataTable dt = new DataTable(); dt.Columns.Add(Branch); dt.Columns.Add(Barcode); dt.Columns.Add(Name); dt.Columns.Add(InventoryDesc); dt.Columns.Add(CategoryName); dt.Columns.Add(Amount); dt.Columns.Add(Qty); dt.Rows.Add(); gvDetails.DataSource = dt; gvDetails.DataBind(); gvDetails.Rows[0].Visible = false; } Note : Arraylist having data  when append time its not loading properly.

Tuhin Paul · Answer

$(document).ready(() => { const categoryName: string = 'FERRERO'; $.ajax({ type: POST url: InteractiveDashboard.aspx/WebGrid1 contentType: application/json; charset=utf-8 data: JSON.stringify({ CategoryName: categoryName }) dataType: json success: (data: any) => { if (data && data.d && data.d.length > 0) { populateTable(data.d); } else { $(#gvDetails tbody).html( No data available ); } } error: (xhr: JQuery.jqXHR status: string error: string) => { alert(An error occurred while fetching data:  + error); } }); }); function populateTable(data: any[]): void { const $tableBody: JQuery = $(#gvDetails tbody); $tableBody.empty(); data.forEach((item: any) => { const row: string = ` ${item.Branch} ${item.Barcode} ${item.Name} ${item.InventoryDesc} ${item.CategoryName} ${item.Amount} ${item.Qty} `; $tableBody.append(row); }); } In this TypeScript version I've added type annotations for variables and function parameters. This helps catch type-related errors during development making your code more robust. I've used arrow functions for event handlers to check lexical scoping of this . If you have TypeScript configured in your project this code will be type-checked during compilation providing additional safety and better code maintenance.

Amit Mohanty · Answer

Once try this: $(document).ready(function () { var CategoryName = 'FERRERO'; $.ajax({ type: POST contentType: application/json; charset=utf-8 url: InteractiveDashboard.aspx/WebGrid1 data: JSON.stringify({ CategoryName: CategoryName }) dataType: json success: function (data) { $(#gvDetails tbody).empty(); // Clear existing rows except headers for (var i = 0; i ${data.d[i].Branch} ${data.d[i].Barcode} ${data.d[i].Name} ${data.d[i].InventoryDesc} ${data.d[i].CategoryName} ${data.d[i].Amount} ${data.d[i].Qty} `); } } error: function (result) { alert(Error); } }); });

Tuhin Paul · Answer

$(document).ready(function () { var categoryName = 'FERRERO'; // Use lowercase for consistency $.ajax({ type: GET url: InteractiveDashboard.aspx/WebGrid1 data: { CategoryName: categoryName } // Send as query parameters dataType: json success: function (data) { $(#gvDetails tbody).empty(); // Clear existing rows except headers for (var i = 0; i ${data.d[i].Branch} ${data.d[i].Barcode} ${data.d[i].Name} ${data.d[i].InventoryDesc} ${data.d[i].CategoryName} ${data.d[i].Amount} ${data.d[i].Qty} `); } } error: function (jqXHR textStatus errorThrown) { console.error(Error: textStatus errorThrown); // Log the error // Optionally display a user-friendly error message here } }); }); You can use template literals (backticks ``) for cleaner string interpolation instead of string concatenation ( + ). This improves readability. While the data is being fetched you can display a loading indicator (e.g. spinner) to provide feedback to the user. Remove it when the data is loaded or in case of an error.