Still using Radzen Studio?
Achieve more with Radzen Blazor Studio

Radzen Blazor Studio is our new flagship product and vision of how rapid Blazor application development should be done.

Go to Radzen Blazor Studio

Invoke custom server-side method

Radzen has now built-in support for custom methods. Check the Invoke custom method article instead.

This help article shows how to create custom server-side controller and invoke one of its methods. This approach allows you to consume custom business logic in Radzen applications.

Source Code

  1. Create new application with single MainPage page and add Sample Microsoft SQL Server data-source:

  2. Create types and data properties on Page load event. Bind DropDown component to types and DataGrid component to data with single column bound to name property:

  3. Add new change event handler for the DropDown component to execute the following code return (<any>this).getData(event.text);. This will invoke the custom action method via HTTP request.

  4. Add a Then event handler which sets the data properto to result. This will update the value of the data property with the result of the custom action method.

  5. Run and stop the application in order to generate server and client projects. Add new CustomMethodController.cs to server\Controllers\Sample folder with the following code:

    using System.Collections.Generic;
    using Microsoft.AspNetCore.Mvc;
    
    namespace Sample.Controllers
    {
          public class MyObject
          {
                public string Name { get; set; }
          }
    
          [Route("api/[controller]/[action]")]
          public class CustomMethodController : Controller
          {
                public IActionResult GetData(string type)
                {
                      var list = new List<MyObject>();
    
                      for (var i = 0; i < 10; i++)
                      {
                            list.Add(new MyObject() { Name = string.Format("{0}{1}", type, i) });
                      }
    
                      return Json(list);
                }
          }
    }
    
    Imports System.Collections.Generic
    Imports Microsoft.AspNetCore.Mvc
    
    Namespace Sample.Controllers
    Public Class MyObject
          Public Property Name As String
    End Class
    
    <Route("api/[controller]/[action]")>
    Public Class CustomMethodController
          Inherits Controller
    
          Public Function GetData(ByVal type As String) As IActionResult
                Dim list = New List(Of MyObject)()
    
                For i = 0 To 10 - 1
                list.Add(New MyObject() With {
                      .Name = String.Format("{0}{1}", type, i)
                })
                Next
    
                Return Json(list)
          End Function
    End Class
    End Namespace
    

    and add new getData() method in main.component.ts file in the client\src\app\main folder:

       import { Component, Injector } from '@angular/core';
       import { MainPageGenerated } from './main-page-generated.component';
    
       // Import HttpClient and HttpParams which are needed to make HTTP calls.
       import {HttpClient, HttpParams} from '@angular/common/http';
       // Import the environment to get the server URL
       import {environment} from '../../environments/environment';
    
       @Component({
             selector: 'main-page',
             templateUrl: './main-page.component.html'
       })
       export class MainPageComponent extends MainPageGenerated {
             constructor(injector: Injector, private http: HttpClient) {
                   super(injector);
             }
    
             getData(type: string) {
                   // Extract the server URL
                   const url = environment.sample.replace(/odata.*/, '');
    
                   return this.http
                         // Request the GetData action method
                         .get(`${url}api/custommethod/getdata`, {
                         // Pass the type parameter
                         params: new HttpParams().set('type', type)
                         })
                         .toPromise();
             }
       }
    
  6. Run the application and change types from the DrownDown component: