This is a migrated thread and some comments may be shown as answers.

connecting asp.net MVC application to Asp.net webapi

3 Answers 505 Views
Grid
This is a migrated thread and some comments may be shown as answers.
onjus
Top achievements
Rank 1
onjus asked on 15 May 2018, 04:53 AM

HI I have asp.net mvc application with below telerik grid whcih i want to bind with asp.net webapi hosted on IIS. i can't find any ecample where to put the webapi url and how weapi's controller is invoked. please help in responding to this

 

 @(Html.Kendo().Grid<TelerikMvcApp131.Models.DeviceDetailsChild>()
                        .Name("webapi_grid")
                        .Columns(columns =>
                        {
                            columns.Bound(p => p.person).Title("ID").Width(100);
                         
                            columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);
                        })
                        .ToolBar(tools =>
                        {
                            tools.Create();
                        })
                        .Sortable()
                        .Pageable()
                        .Filterable()
                        .DataSource(dataSource =>
                            dataSource
                            .WebApi()
                            .Model(model =>
                            {
                                model.Id(p => p.Network);
                            })
                            .Events(events => events.Error("error_handler"))
                            .Read(read => read.Url(Url.HttpRouteUrl("DefaultApi", new { controller = "product" })))
                     
                        )
                    )

 

Where should i define DefaultApi inside asp.net mvc application (note DefaultApi is defined inside webapi already)

3 Answers, 1 is accepted

Sort by
0
Boyan Dimitrov
Telerik team
answered on 16 May 2018, 11:21 AM
Hello,

We do have an example that shows how to bind the Kendo UI Grid for ASP.NET MVC to web api controller. Please take a look at the https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/grid/grid-web-api-crud-incell project. The project also supports CRUD operations if you need such support within your scenario. 

I would suggest to take a look at the WebApiConfig.cs file in the App_Start folder where the the http route for the DefaultApi is defined and Global.asax file where this route is registered for the application. 


Regards,
Boyan Dimitrov
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
onjus
Top achievements
Rank 1
answered on 17 May 2018, 05:18 AM

but in this example, everything is returned from asp.net mvc application like inside constructor of ProductController().   what i need is something like below

1.kendogrid-->attached to mvc controller 

2.mvc controller makes call to web api hosted somewhere and fetches data back

3.some calculations inside mvc controller 

4.and finally mvc controller returns refined data to kendo grid

 

 

 

0
Boyan Dimitrov
Telerik team
answered on 18 May 2018, 04:26 PM
Hello,

I would like to suggest an approach for your case since we do not have such example. Since the mvc controller is not where happens the actual retrieval of data from the data base you can simply extract the query parameters from request url as shown below: 

string queryParams = this.Request.RequestUri.Query;

This will help you to construct the url to call the actual web api hosted somewhere and the web api controller should be able to parse the incoming query parametes and create the DataSourceRequest object containing information about the filter, sort and etc descriptors. The web api controller method should have such signature: 

public DataSourceResult Get([System.Web.Http.ModelBinding.ModelBinder(typeof(WebApiDataSourceRequestModelBinder))]DataSourceRequest request)
       {
           return db.Products.Select(p => new ProductViewModel
           {
               ProductID = p.ProductID,
               ProductName = p.ProductName,
               UnitPrice = p.UnitPrice ?? 0,
               Discontinued = p.Discontinued,
               UnitsInStock = p.UnitsInStock ?? 0
           }).ToDataSourceResult(request);
       }


Make the data fetch and calculations and return the data to the mvc controller and the mvc controller will return it to the grid. 

Regards,
Boyan Dimitrov
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
onjus
Top achievements
Rank 1
Answers by
Boyan Dimitrov
Telerik team
onjus
Top achievements
Rank 1
Share this question
or