We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

CRUD in Blazor Server App template and Entity Framework

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

15 Replies

VN Vignesh Natarajan Syncfusion Team August 12, 2019 09:29 AM UTC

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  


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.


CO Costa September 5, 2019 12:38 PM UTC

"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.


RS Renjith Singh Rajendran Syncfusion Team September 6, 2019 01:17 PM UTC

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   

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.   
 
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, 
 
Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran. 



CO Costa September 6, 2019 03:41 PM UTC

Thanks! It works)


VN Vignesh Natarajan Syncfusion Team September 9, 2019 04:17 AM UTC

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.  



CO Costa October 31, 2019 10:46 AM UTC

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).


RS Renjith Singh Rajendran Syncfusion Team November 1, 2019 12:31 PM UTC

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.  
 
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.  



CO Costa November 3, 2019 10:55 AM UTC

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

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


RS Renjith Singh Rajendran Syncfusion Team November 4, 2019 12:51 PM UTC

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, 

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. 



CO Costa November 5, 2019 06:08 AM UTC

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.


RS Renjith Singh Rajendran Syncfusion Team November 5, 2019 12:40 PM UTC

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.  

Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran. 



CO Costa November 15, 2019 12:20 PM UTC

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?


RS Renjith Singh Rajendran Syncfusion Team November 18, 2019 01:08 PM UTC

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. 

Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran. 



CO Costa November 18, 2019 02:04 PM UTC

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


RS Renjith Singh Rajendran Syncfusion Team November 19, 2019 08:45 AM UTC

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, 
 
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. 


Loader.
Live Chat Icon For mobile
Up arrow icon