Oqtane 4 Blazor module example

[Mark A Gregory]

I've followed the excellent example on how to create an Oqtane 3 module using the syncfusion grid control, but it did not work for Oqtane 4. The example I followed is found here on the syncfusion website.

Please let me know if you were able to get this example to work with Oqtane 4 or know of another example. I really could do with some assistance to move past this challenge.

[Sarveswaran Palani]

Hi  Mark,

Greetings from Synncfusion support.

Based on the provided details, we were able to reproduce the issue. We have prepared a Net7.0 module sample by using Oqtane-framework-4.0.1 and then used Syncfusion Blazor component (V22.1.39) in it. We suspect that this is an issue related to the Oqtane framework since the styles and scripts are not being applied to the sample, even when we used the IHostResources interface to add static resource references for CSS and JavaScript libraries. However, when we tried to register Syncfusion resources in the Syncfusion.Helpdesk module using the Declaration = ResourceDeclaration.Global attribute in the HostResources class, as mentioned in the following link, it did not work out.

Nevertheless, we suggest you declare the Syncfusion Styles and scripts in each razor component for your module where you need to use the Syncfusion component, as recommended in the following GitHub issue link. 

​https://github.com/oqtane/oqtane.framework/discussions/2024#discussioncomment-2312003

Please refer to the following code snippet for reference:

Syncfusion.Module.Helpdesk\Client\Modules\Syncfusion.Module.Helpdesk\Index.razor

@using Syncfusion.Module.Helpdesk.Services

@using Syncfusion.Module.Helpdesk.Models

 

@namespace Syncfusion.Module.Helpdesk

@inherits ModuleBase

@inject IHelpdeskService HelpdeskService

@inject NavigationManager NavigationManager

@inject IStringLocalizer<Index> Localizer

@using Syncfusion.Blazor.Grids

 

@if (_Helpdesks == null)

 

{

 

    <p><em>Loading...</em></p>

}

 

else

 

{

 

    <br />

    @if (_initialized)

    {

        <ActionLink Action="Add"

 

        Security="SecurityAccessLevel.Edit"

 

        Text="Add" />

 

        <br />

 

        <br />

 

        @if (_Helpdesks.Count != 0)

 

        {

            <SfGrid DataSource="@_Helpdesks"

 

            AllowPaging="true">

 

                <GridPageSettings PageSize="5"></GridPageSettings>

 

            </SfGrid>

        }

 

    }

 

}

 

@code {

    public bool _initialized { get; set; } = false;

    public override List<Resource> Resources => new List<Resource>()

    {

        new Resource { ResourceType = ResourceType.Stylesheet, Url = ModulePath() + "Module.css" },

        new Resource { ResourceType = ResourceType.Script, Url = ModulePath() + "Module.js" },

        new Resource { ResourceType = ResourceType.Stylesheet, Url = "_content/Syncfusion.Blazor/styles/bootstrap4.css"},

        new Resource { ResourceType = ResourceType.Script, Url = "_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js"}

    };

 

 //…

}

Note: If you are using version 22.1.39, you are supposed to register the Syncfusion Blazor scripts also. Please find the Release notes for reference: https://blazor.syncfusion.com/documentation/release-notes/21.1.35?type=all#breaking-changes

Please let us know if you have any concerns.

Regards,

Sarvesh

[Mark A Gregory]

Hi, thx, found this and made the change. I can now see the control. I think there is another problem with this example. When I try to run the module I get an error, that I assume is related to accessing the database. I think there may have been changes made to the way this is done in the most recent Oqtane.

May I ask if you have a working version of the example provided on your website with Oqtane 4.1? If so this would save me many hours to work out what is happening.

The code in HelpDeskController.cs at line 40 is

            var HelpDeskTickets = _HelpdeskRepository.GetSyncfusionModuleHelpDeskTickets(int.Parse(entityid))

                .Where(x => x.CreatedBy == username)

                .OrderBy(x => x.HelpDeskTicketId)

                .ToList();

The error is:

System.ArgumentNullException: Value cannot be null. (Parameter 's')

   at System.Int32.Parse(String s)

   at Syncfusion.Module.Helpdesk.Controllers.HelpdeskController.Get(String username, String entityid) in C:\share\Repos\Syncfusion.Module.Helpdesk\Server\Controllers\HelpdeskController.cs:line 40

   at lambda_method1440(Closure, Object, Object[])

   at Microsoft.AspNetCore.Mvc.Infrastructure.ActionMethodExecutor.SyncObjectResultExecutor.Execute(ActionContext actionContext, IActionResultTypeMapper mapper, ObjectMethodExecutor executor, Object controller, Object[] arguments)

   at Microsoft.AspNetCore.Mvc.Infrastructure.ControllerActionInvoker.InvokeActionMethodAsync()

   at Microsoft.AspNetCore.Mvc.Infrastructure.ControllerActionInvoker.Next(State& next, Scope& scope, Object& state, Boolean& isCompleted)

   at Microsoft.AspNetCore.Mvc.Infrastructure.ControllerActionInvoker.InvokeNextActionFilterAsync()

--- End of stack trace from previous location ---

   at Microsoft.AspNetCore.Mvc.Infrastructure.ControllerActionInvoker.Rethrow(ActionExecutedContextSealed context)

   at Microsoft.AspNetCore.Mvc.Infrastructure.ControllerActionInvoker.Next(State& next, Scope& scope, Object& state, Boolean& isCompleted)

   at Microsoft.AspNetCore.Mvc.Infrastructure.ControllerActionInvoker.InvokeInnerFilterAsync()

--- End of stack trace from previous location ---

   at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeNextResourceFilter>g__Awaited|25_0(ResourceInvoker invoker, Task lastTask, State next, Scope scope, Object state, Boolean isCompleted)

   at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.Rethrow(ResourceExecutedContextSealed context)

   at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.Next(State& next, Scope& scope, Object& state, Boolean& isCompleted)

   at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.InvokeFilterPipelineAsync()

--- End of stack trace from previous location ---

   at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeAsync>g__Logged|17_1(ResourceInvoker invoker)

   at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeAsync>g__Logged|17_1(ResourceInvoker invoker)

   at Microsoft.AspNetCore.Routing.EndpointMiddleware.<Invoke>g__AwaitRequestTask|6_0(Endpoint endpoint, Task requestTask, ILogger logger)

   at Swashbuckle.AspNetCore.SwaggerUI.SwaggerUIMiddleware.Invoke(HttpContext httpContext)

   at Swashbuckle.AspNetCore.Swagger.SwaggerMiddleware.Invoke(HttpContext httpContext, ISwaggerProvider swaggerProvider)

   at Microsoft.AspNetCore.Authorization.AuthorizationMiddleware.Invoke(HttpContext context)

   at Microsoft.AspNetCore.Authentication.AuthenticationMiddleware.Invoke(HttpContext context)

   at Oqtane.Infrastructure.JwtMiddleware.Invoke(HttpContext context) in C:\share\Repos\oqtane.framework\Oqtane.Server\Infrastructure\Middleware\JwtMiddleware.cs:line 90

   at Oqtane.Infrastructure.TenantMiddleware.Invoke(HttpContext context) in C:\share\Repos\oqtane.framework\Oqtane.Server\Infrastructure\Middleware\TenantMiddleware.cs:line 67

   at Microsoft.AspNetCore.Localization.RequestLocalizationMiddleware.Invoke(HttpContext context)

[Sarveswaran Palani]

Hi Mark,

As per your request, we have prepared a sample using the Oqtane framework in the latest version. Please refer to the attached sample and documentation link for your reference. The sample exceeds 200 MB in size; therefore, we have compressed it into a ZIP file and provided a link to download it from Google Drive.

Sample link: https://drive.google.com/file/d/1BgPBJnLHqPPd8UeDDDo7WxiqhTTHyOA4/view?usp=drive_link

Documentation link: https://www.syncfusion.com/succinctly-free-ebooks/custom-blazor-oqtane-modules-succinctly/create-the-help-desk-module

                              https://www.syncfusion.com/succinctly-free-ebooks/custom-blazor-oqtane-modules-succinctly/add-syncfusion

If you have any further queries, please get back to us.

Regards,
Sarvesh