CRUD in Blazor Server App template and Entity Framework

[Costa]

Hi. How to implement CRUD operations in EjsGrid using the Blazor Server App template and Entity Framework? If possible, give an example.

[Vignesh Natarajan]

Hi Costa,  

Greetings from Syncfusion support  

Query: “How to implement CRUD operations in EjsGrid using the Blazor Server App template and Entity Framework” 

As per your requirement we have prepare a sample for CRUD operation in Grid using Blazor hosted Application (Server + Client). We have achieved the CRUD operation using WebAPI Adaptor and WebAPI controller. Kindly download the sample from below  

Sample: https://www.syncfusion.com/downloads/support/forum/146621/ze/EFGrid-126728579  

Note:  If you want to achieve the same behavior using Blazor server application, then you need to use two application. One application to handle server operation (Hosted Application) and another application (Server app) to render the Grid. One difference will be that you need to give the entire Url of your service in EjsDataManager’s Url property in Server Application Grid. Refer the below code example  

 

<EjsGrid id="Grid" @ref="@grid" AllowPaging="true" AllowSorting="true" AllowFiltering="true" toolbar="@(new List<string>() {"Add", "Edit", "Delete", "Cancel", "Update" })"> 

    <EjsDataManager Url="http://localhost:51972/api/Default" CrossDomain="true" Adaptor="Adaptors.WebApiAdaptor"></EjsDataManager> 

    <GridEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true" Mode="EditMode.Normal"></GridEditSettings> 

    <GridColumns> 

       ………………………………………….. 

    </GridColumns> 

</EjsGrid> 

Please get back to us if you have further queries.  

Regards, 

Vignesh Natarajan.

[Costa]

"Note:  If you want to achieve the same behavior using Blazor server application, then you need to use two application. One application to handle server operation (Hosted Application) and another application (Server app) to render the Grid. One difference will be that you need to give the entire Url of your service in EjsDataManager’s Url property in Server Application Grid..."

Sorry, but I can’t figure out how to implement this. Could you give an example, using VS 2019 Preview Version 16.3.0 Preview 3.0 and, accordingly, .NET Core 3.0.0-preview9?

Thanks.

[Renjith Singh Rajendran]

Hi Costa, 

We are glad to inform that our latest Nuget package (17.2.0.50) has been successfully rolled out. Please find the latest Nuget package from below   

Nuget: https://www.nuget.org/packages/Syncfusion.EJ2.Blazor/17.2.0.50-beta  

In this release we have updated our components to .NET Core 3.0 Preview 9. Please find the release notes regarding the changes we have done in our component.   

Release notes: https://ej2.syncfusion.com/blazor/documentation/release-notes/17.2.50/ 

 

And also we have prepared a server blazor application based on your requirement in .NET Core 3.0 Preview 9 with our latest version(17.2.50). Please download the sample from the link below, 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/TestGridApi-1340996410 

 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran. 

[Costa]

Thanks! It works)

[Vignesh Natarajan]

Hi Costa, 

Thanks for the acknowledgement.  

We are glad to hear that your query has been resolved by our solution.  

Please get back to us if you have further queries.  

Regards, 

Vignesh Natarajan.  

[Costa]

Hi. How to configure filtering in this scenario (filters do not work in this example)? And how do I set the number of unique values in an Excel filter? (Blazor Server Application).

[Renjith Singh Rajendran]

Hi Costa, 

Thanks for your update. 

Query 1 : How to configure filtering in this scenario (filters do not work in this example)?  

When using the WebAPI services, you need to handle these actions(filter/sort/paging actions) at server side by using the “Request.Query” you get from the request, just like the paging which is handled in our previously attached sample. Please handle the filtering at server side for filter to work based on the “Request.Query” you get from the request. 

 

        [HttpGet] 

        public object Get() 

        { 

            IQueryable<Order> data = db.GetAllOrders().AsQueryable(); 

            var count = data.Count(); 

            var queryString = Request.Query;                  //Based on this request query, handle the filter action 

            ... 

       } 

 

Query 2 : And how do I set the number of unique values in an Excel filter? 

By default, in Excel type filter the filter choice record count is limited to 1000 (take first 1000 records and then apply distinct value)for better performance. So only the first thousand records is fetched in the filter choices. To overcome this default behavior, you can set the filter choice record count as per your requirement by setting the desired count for “FilterChoiceCount” in “OnActionBegin” event.  

But currently we don’t have support for this in Blazor Grid. So, we have considered this as a usability feature improvement “Provide support to set the FilterChoiceCount in Blazor Grid”. We have logged a feature task for the same and added to our feature request list. We are always trying to make our products better and feature requests like yours are a key part of our product growth efforts. We have added this feature request to our database.  

  

At the planning stage for every release cycle, we review all open features and identify features for implementation based on specific parameters including product vision and technological feasibility. We have planned to implement this feature in our subsequent bi-weekly Nuget release which is expected to be roll out on or before November 30, 2019.  

 

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.  

Link : https://www.syncfusion.com/feedback/9873/provide-support-to-set-filterchoicecount-in-blazor-grid 

 

Once the release is rolled out you can set the number of unique values to get displayed in Excel filter by using the below codes, 

 

 

<EjsGrid TValue="Order" DataSource="@Orders" Height="315" AllowFiltering="true"> 

    <GridFilterSettings Type="FilterType.Excel"></GridFilterSettings> 

    <GridEvents OnActionBegin="OnActionBegin" TValue="Order"></GridEvents> 

    ... 

</EjsGrid> 

 

@code {  

   public void OnActionBegin(ActionEventArgs<Order> args) 

   { 

       if (args.RequestType.ToString() == "FilterChoiceRequest") 

       { 

           args.FilterChoiceCount = 2;                    //here, you can override the default take count of the filter records 

       } 

   } 

   ... 

} 

 

Disclaimer: The above code may change during the implementation. 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran.  

[Costa]

"Please handle the filtering at server side..."

Thanks. Can you show me how to apply $filter from the Request.Query to the 'IQueryable<Entity> data'?

[Renjith Singh Rajendran]

Hi Costa, 

We have prepared a sample by handling the filter operations at server side and we are attaching the sample for your convenience, please download the sample from the link below, 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/TestGridApi1357158484 

In the below code, based on the generated query for the corresponding operations(filter) we have handled the operations at server side programmatically based on the Grid’s data. 

 

[DefaultController.cs] 

 

        //Handle filter operations at server side 

        [HttpGet] 

        public object Get() 

        { 

            IQueryable<Order> data = db.GetAllOrders().AsQueryable();  

            var count = data.Count(); 

            var queryString = Request.Query;  

            string filter = queryString["$filter"];   //filter query 

            string auto = queryString["$inlineCount"]; 

            if (filter != null)   //Filtering – Here you need to handle the filtering programmatically at server side, based on your Grid. 

            { 

                var newfiltersplits = filter; 

                var filtersplits = newfiltersplits.Split('(', ')', ' '); 

                var filterfield = filtersplits[1]; 

                var filtervalue = filtersplits[3]; 

                ... 

               switch (filterfield) 

                { 

                    case "OrderID":               //Here we have performed filter by selecting the data matching the value 

                        data = (from cust in data 

                                where cust.OrderID.ToString() == filtervalue.ToString() 

                                select cust); 

                        break; 

                    ... 

               } 

            } 

            ... 

       } 

        return take != 0 ? new { Items = data.Skip(skip).Take(take).ToList(), Count = data.Count() } : new { Items = data, Count = data.Count() };  

     } 

 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran. 

[Costa]

Are you suggesting that I should write a syntax analyzer for your $filter to make your grid work? Doesn't sound like a satisfactory solution.

[Renjith Singh Rajendran]

Hi Costa, 

We already had a plan to implement this in our Syncfusion EjsDataManager’s WebApiAdaptor. We have considered this as a feature “Add improvements to WebApiAdaptor”. We have logged a feature task for the same and added to our feature request list. We are always trying to make our products better and feature requests like yours are a key part of our product growth efforts. 

  

At the planning stage for every release cycle, we review all open features and identify features for implementation based on specific parameters including product vision and technological feasibility. We have planned to implement this feature in our upcoming Volume 4, 2019 release.  

 

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.  

Link : https://www.syncfusion.com/feedback/9950/add-improvements-to-webapiadaptor 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran. 

[Costa]

Hi.

I tested the following approach:

MovieAdaptor.cs:

namespace Services

{

    // Implementing custom adaptor by extending the DataAdaptor class

    public class MovieAdaptor : DataAdaptor

    {

        readonly ApplicationDbContext db;

        public IQueryable Movies { get; set; }

        public MovieAdaptor(ApplicationDbContext db)

        {

            this.db = db;

            Movies = db.Movies;

        }

        // Performs data Read operation

        public override object Read(DataManagerRequest dm, string key = null)

        {

            var DataSource = Movies;

            if (dm.Search != null && dm.Search.Count > 0)

            {

                // Searching

                DataSource = DataOperations.PerformSearching(DataSource, dm.Search);

            }

            if (dm.Sorted != null && dm.Sorted.Count > 0)

            {

                // Sorting

                DataSource = DataOperations.PerformSorting(DataSource, dm.Sorted);

            }

...

Startup.cs:

        public void ConfigureServices(IServiceCollection services)

        {

...

services.AddScoped<MovieAdaptor>();

...

Index.razor:

...

@inject MovieAdaptor mad

    <EjsGrid TValue="Movie" ID="Grid" AllowSorting="true" AllowFiltering="true" AllowPaging="true" Toolbar="@(new List() { "Add", "Delete", "Update", "Cancel" })" > 

        <EjsDataManager AdaptorInstance="@typeof(MovieAdaptor)" Adaptor="Adaptors.CustomAdaptor"gt; < /EjsDataManager > 

...

Seems to be working as expected. Do you think this approach can be used?

[Renjith Singh Rajendran]

Hi Costa, 

Thanks for your update. 

Yes, you can use “CustomAdaptor”. When you bind Grid with custom adaptor, then you can perform the sorting, filtering or searching using our inbuilt methods “PerformFiltering”, “PerformSearching”, “PerformSorting” etc. 

Documentation : https://ej2.syncfusion.com/blazor/documentation/grid/custom-binding/ 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran. 

[Costa]

I wanted to clarify. Is it acceptable to register DataAdaptor as a service and then use it by injection?

[Renjith Singh Rajendran]

Hi Costa, 

It is not necessary to @inject the “MovieAdaptor” in your application. You just need to create a class(MovieAdaptor) extending from DataAdaptor class. And register that “MovieAdaptor” class in the Startup.cs file.  

We have handled fetching this from the service collection in our source level, based on the value provided in “AdaptorInstance”. We have already documented this, please refer the documentation link below, 

Documentation : https://ej2.syncfusion.com/blazor/documentation/grid/custom-binding/#data-binding 

 

You can use the codes which you have shared in your previous update, to perform data operations.  

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran.