How to display the data on the grid view in which data will come from the asp .net web API
3 Replies
Hi Ishan,
Thanks for your patience.
Based on your suggestion we have prepared a sample with the help of our Angular with ASP.Net getting started section. To enable CORS configuration in your application we suggest you to enable the cross-origin request in the startup.cs file as mentioned in the below code example. Please refer it.
|
[startup.cs]
public void ConfigureServices(IServiceCollection services)
{
. . . .
services.AddCors(options =>
{
options.AddPolicy("EnableCORS", builder =>
{
builder.AllowAnyOrigin().AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod().AllowCredentials().Build();
});
});
. . . .. .
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
app.UseCors("EnableCORS");
. . .. . .
}); |
Cross configuration for aspnetcore version as 3 : https://docs.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-3.1
By default in ASP.NET Core the JSON results are returned in camelCase format, so the grid field names are also changed in camelCase and grid will be render without data. The mentioned issue is reproduced due to the SerializerSettings. So, we suggest you to add the below code in your startup.cs file to overcome the problem.
|
public void ConfigureServices(IServiceCollection services)
{
services.AddMvc().AddJsonOptions(x =>
{
x.SerializerSettings.ContractResolver = null;
});
. . . .
} |
For more information : https://ej2.syncfusion.com/aspnetcore/documentation/grid/data-binding/#troubleshoot-grid-render-rows-without-data
In this sample we have render grid with web API request using below code snippets.
|
<ejs-grid #grid [dataSource]='data' allowPaging="true">
<e-columns>
<e-column field='OrderID' headerText='Order ID' isPrimaryKey=true width='150'></e-column>
<e-column field='CustomerID' headerText='Customer Name' width='150'></e-column>
<e-column field='ShipCity' headerText='ShipCity' width='150' textAlign='Right'></e-column>
</e-columns>
</ejs-grid>
|
|
export class Pivot_Table1_Component {
public data: any;
@ViewChild('grid')
public grid: GridComponent;
ngOnInit(): void {
this.data = new DataManager({
url: 'http://localhost:55055/api/Orders/', // Send hosted link
adaptor: new WebApiAdaptor,
crossDomain: true
});
} |
GitHub sample for more reference : https://github.com/SyncfusionExamples/ASP-.NET-Core-with-Angular-using-EJ2-controls/tree/master/
To run our sample please follow the below steps.
1. Run WebApplciation5 in visual studio and set this hosted link to Webapi Data Manger’s URL like above code snippet.
2. Run “npm install” command in ClientApp root folder.
3. Run angular project (ClientApp) using “ng serve” command.
Note : if you are facing the serve command requires to be run in an angular project, but a project definition could not be found angular while running the ng serve command please follow below reference links.
Please get back to us, if you need any further assistance.
Regards,
Thiyagu S.
SIGN IN To post a reply.
