1. Home
  2. Forum
  3. jQuery
  4. Blazor Server Side Integration

Blazor Server Side Integration

Hi Team,

I am able to use ejSpreadsheet control in my Blazor server side project, however i am struggling with export functionality as i don't have webapi project, could you please suggest:

const sheetElement = document.getElementById(id);
        $(sheetElement).ejSpreadsheet({
            scrollSettings:
            {
                width: "100%",
                height: 850,
                isResponsive: true
            },
            menuClick: function (args) {
                debugger;
                if (args.element.id == "ExportXL") {
                    args.cancel;
                    var objc = $("#" + this._id).data("ejSpreadsheet");
                    var jsondata = objc.saveAsJSON();
                    var dataContainer = JSON.stringify(jsondata.dataContainer);
                    var model = JSON.stringify(jsondata.model);
                    dotnetHelper.invokeMethodAsync("ExcelExport", model, dataContainer,"ExcelFile");
                };
            },
            exportSettings:
            {
                allowExporting: true,
                excelUrl: "https://js",
            }
        });

Blazor server side:

SpreadsheetEj.razor

@code {

 [JSInvokable]
    public void ExcelExport(string sheetModel, string sheetData, string fileName)
    {
        Syncfusion.EJ.Export.Spreadsheet.Save(sheetModel, sheetData, fileName, Syncfusion.EJ.Export.ExportFormat.XLSX, Syncfusion.XlsIO.ExcelVersion.Excel2013);
    }
}

Many thx,
Navneet

8 Replies 1 reply marked as answer
SP Sangeetha Priya Murugan Syncfusion Team April 6, 2021 07:11 AM UTC

Hi Navneet , 

Thank you for contacting Syncfusion support. 

We have checked your reported query, we can achieve your requirement using java script. Please refer below code snippets. 
 
Index.razor 
 

 
@inject IJSRuntime jsRuntime 
 
<h4>jQuery Spreadsheet UI Components in Blazor</h4> 
 
<div class="e-container-spreadsheet"> 
    <div id="Spreadsheet"></div> 
</div> 
 
@code { 
    protected override async Task OnAfterRenderAsync(bool firstRender) 
    { 
        base.OnAfterRender(firstRender); 
        await jsRuntime.InvokeVoidAsync("renderjQueryComponents"); 
    } 
} 
 
 
<head> 
    <link rel='nofollow' href="css/site.css" rel="stylesheet" /> 
    <link rel="stylesheet" rel='nofollow' href="https://cdn.syncfusion.com/19.1.0.54/js/web/flat-azure/ej.web.all.min.css" /> 
    <!--  jquery script  --> 
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> 
    <!--  jsrender script  --> 
    <!-- Essential JS UI widget --> 
 
    <link rel='nofollow' href="_content/Syncfusion.Blazor/styles/bootstrap4.css" /> 
</head> 
 
<script> 
            function renderjQueryComponents() { 
        $("#Spreadsheet").ejSpreadsheet({ 
             allowImport: true, 
            importSettings: { 
                importMapper: "https://js.syncfusion.com/demos/ejservices/api/Spreadsheet/Import" 
            }, 
            exportSettings: 
            { 
                allowExporting: true, 
            } 
          }); 
        } 
 
    </script> 
 
We have prepared sample for JS spreadsheet to a Blazor page,  
 
 
Currently Spreadsheet component is not available in Blazor platform, we have already logged this as improvement, and you can track the same through the below feedback link.  
  
 
We have prepared sample for JS spreadsheet to a Blazor page,  
 
Please let us know, if you need any further assistance. 
 
Regards, 
Sangeetha M 


NS Navneet Saraswat April 7, 2021 08:43 AM UTC

Hello Sangeetha,

I need work around for importMapper: "https://js.syncfusion.com/demos/ejservices/api/Spreadsheet/Import" as I do not have api for spreadsheet import also don't have excelUrl: "https://js.syncfusion.com/demos/ejservices/api/Spreadsheet/ExcelExport" export api.

I also don't want to depend on js.syncfusion.com/demo/ejservices/api

I have manage to create a client side event below
                    var objc = $("#" + this._id).data("ejSpreadsheet");
                    var jsondata = objc.saveAsJSON();
                    var dataContainer = JSON.stringify(jsondata.dataContainer);
                    var model = JSON.stringify(jsondata.model);
                    dotnetHelper.invokeMethodAsync("ExcelExport", model, dataContainer,"ExcelFile");

on server side, I have got model, datacontainer and file name, is there any .net core 3.1 or .net core 5 excel library can i use to fire export event with Model & data Container?

Regards,
Navneet





AS Aravinthan Seetharaman Syncfusion Team April 9, 2021 01:58 AM UTC

 
We have checked your query. We can use web API for spreadsheet Import and Export functionalities. Please refer the below code snippet and sample. 
 
Service API In MVC 
 
  public partial class SpreadsheetController : Controller 
    {         
         public ActionResult SpreadsheetFeatures() 
        { 
            return View(); 
        } 
 
        [AcceptVerbs(HttpVerbs.Post)] 
        public ActionResult Import(ImportRequest importRequest) 
        { 
            return importRequest.SpreadsheetActions(); 
        } 
        [AcceptVerbs(HttpVerbs.Post)] 
        public void ExportToExcel(string sheetModel, string sheetData, string password) 
        { 
            if (String.IsNullOrEmpty(password)) 
                Spreadsheet.Save(sheetModel, sheetData, "sample", ExportFormat.XLSX, ExcelVersion.Excel2013); 
            else 
                Spreadsheet.Save(sheetModel, sheetData, "sample", ExportFormat.XLSX, ExcelVersion.Excel2013, password); 
        } 
 
        [AcceptVerbs(HttpVerbs.Post)] 
        public void ExportToCsv(string sheetModel, string sheetData) 
        { 
            Spreadsheet.Save(sheetModel, sheetData, "sample", ExportFormat.CSV); 
        } 
 
        [AcceptVerbs(HttpVerbs.Post)] 
        public void ExportToPdf(string sheetModel, string sheetData) 
        { 
            Spreadsheet.Save(sheetModel, sheetData, "sample", ExportFormat.PDF); 
        } 
 
 
    } 
 
 
_Host.cshtml 
 
<script> 
            function renderjQueryComponents() { 
        $("#Spreadsheet").ejSpreadsheet({ 
             allowImport: true, 
            importSettings: { 
                importMapper: "http://localhost:57670/Spreadsheet/Import" 
            }, 
            exportSettings: 
            { 
                allowExporting: true, 
                excelUrl: "http://localhost:57670/Spreadsheet/ExportToExcel", 
                csvUrl: "http://localhost:57670/Spreadsheet/ExportToCsv", 
                pdfUrl: "http://localhost:57670/Spreadsheet/ExportToPdf" 
            } 
          }); 
        } 
 
    </script> 
 
 
For your reference we have created Service and sample here. 
 
 
 
Please let us know, if you have any concern on this. 
 
Regards, 
Aravinthan S 


Marked as answer
NS Navneet Saraswat June 10, 2021 03:42 AM UTC

Hello Team,

Sorry looks like I was not clear in previou question, instead of using webapi, is there any way could i use controller with the project, i do not want to relay on external api excelUrl: "https://js.syncfusion.com/demos/ejservices/api/Spreadsheet/ExcelExport"

Or is there anyway could i use “Blazor call .net method from javascript”

DotNet.invokeMethodAsync('{ASSEMBLY NAME}', '{.NET METHOD ID}', {ARGUMENTS});

Many thx


GK Gayathri KarunaiAnandam Syncfusion Team June 12, 2021 06:11 AM UTC

Hi Navneet, 

We have checked your reported query. We need to check the feasibility to provide the custom sample for the reported requirement. And we will provide further details on June 15th, 2021. We appreciate your patience until then. 

Regards, 
Gayathri K 


GK Gayathri KarunaiAnandam Syncfusion Team June 17, 2021 03:59 AM UTC

Hi Navneet, 

Sorry for the inconvenience. 

We need to validate and check more cases for this reported query. So, we will update you the further details on June 18th, 2021. We appreciate your patience until then. 

Regards, 
Gayathri K 


NS Navneet Saraswat June 17, 2021 08:44 AM UTC

No worries Gayathri


GK Gayathri KarunaiAnandam Syncfusion Team June 28, 2021 04:55 PM UTC

Hi Navneet, 

Sorry for the inconvenience caused. 

We have analyzed your query. Currently, we does not have support for Spreadsheet in blazor. We have already considered this as a control in blazor and it is expected to be available in our Essential studio 2021 Volume 4 release which will be scheduled on middle of December 2021. We will consider and implement your requirement while we implement Spreadsheet in Blazor. We appreciate your patience until then.   
  
You can track the status of this feature using below link.   
  

Regards, 
Gayathri K 


Loader.
Up arrow icon