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
  1. Home
  2. Forum
  3. ASP.NET Core
  4. Grid using ASP .NET Core 2 with Razor Pages

Grid using ASP .NET Core 2 with Razor Pages

Hello,

Could you please a working sample of the grid control in an ASP .NET Core 2 app using the new Razor page functionality?

I tried hacking my way through Razor pages, to no avail. For instance, I have the following grid declaration:

<e-datamanager json="(IEnumerable<object>)ViewBag.datasource" insert-url="/Clients/InsertClient" adaptor="remoteSaveAdaptor" />

In the Clients code-behind file, I have the following method:

public void OnPostInsertClient()
{
}

The method does not get called and in the browser developer tools I see:

   Request URL: http://localhost:51315/Clients/InsertClient
   Request Method: POST
   Status Code: 404 / Not Found

What am I doing wrong?

11 Replies
SA Saravanan Arunachalam Syncfusion Team September 19, 2017 09:16 AM UTC

Hi Valer, 
Thanks for contacting Syncfusion’s support. 
Query 1: Could you please a working sample of the grid control in an ASP .NET Core 2 app using the new Razor page functionality? 
We have analyzed your query and we have already discussed this query in the following UG document and online demo that can be refer from the below links. 
And also we have created a sample based on your requirement that can be refer from the below link. 
Query 2: What I am doing wrong? 
We have analyzed your provided code, the reported issue could be possibly occur due to the requested is not found on the server side. So, we suspect that you have specified “/Clients/InsertClient” in the insert-url of dataManager that the method was not defined on the server which was the cause of the issue. 
So, please ensure the action name in the Url and defined action name on server will be same to avoid your reported issue. 
Regards, 
Saravanan A.   
 


SO Steven Olensky October 2, 2017 11:03 PM UTC

I am having the same problem.

I think you guys at Synfusion missed the fact that this is "Razor Pages" in Core 2.0. Razor Pages support multiple "Handlers". Please look at: https://docs.microsoft.com/en-us/aspnet/core/mvc/razor-pages/?tabs=visual-studio#customizing-routing

For some reason, the post method on the Razor Page never gets called.


SA Saravanan Arunachalam Syncfusion Team October 3, 2017 02:29 PM UTC

Hi Steven, 
We have analyzed your provided link, the Razor page handler is called by the form post which make the full post back with server and the DataManager called the handler by the ajax post back which make the partial post back with server. So, our DataManager is entirely different from the Razor page handler. 
Regards, 
Saravanan A. 


RB R Brian Lindahl October 5, 2017 05:13 PM UTC

The problem is probably due to the fact that razor pages automatically check for the RequestVerificationToken, assuming a form-driven post. I found it necessary to do the following:

1. Add a property & constructor to the pagemodel to receive the anti-forgery injection:

    public IAntiforgery Xsrf { get; private set; }

    public MyPageModel(IAntiforgery xsrf)
    {
      Xsrf = xsrf;
    }

2. Declare a property on the pages' codebehind:

    public List> Headers
    {
      get
      {
        var hdr = new List>();
        var dict = new Dictionary
        {
          ["RequestVerificationToken"] = Xsrf.GetAndStoreTokens(HttpContext).RequestToken
        };
        hdr.Add(dict);
        return hdr;
      }
    }

3. In the datamanager tag helper, add a "headers" attribute:

                            insert-url="/Content/Insert"
                           remove-url="/Content/Remove"
                           update-url="/Content/Update"
                           adaptor="remoteSaveAdaptor"
                           headers=@Model.Headers />

This will send the token as part of the header to any of the CRUD requests, and you should see the handlers firing.

Also, make sure you have

@page "{handler?}"

at the top of your cshtml so that it knows to route the extra handlers. (see the link that Steven posted for more info)


SA Saravanan Arunachalam Syncfusion Team October 6, 2017 10:03 AM UTC

Hi Brian, 
The support incident has been created under your account for your reported query. Please log on to our support website to check for further updates. 
Regards, 
Saravanan A. 


SP stephane pasin January 18, 2018 09:08 AM UTC

in the same idea,
Do you have a working sample for asp.net core razor pages ?

That is to say without MVC nor file controler ...



only .cshtml and .cshtml.cs pages.

I think it's possible but I can not configure it

RS Renjith Singh Rajendran Syncfusion Team January 19, 2018 03:33 PM UTC

Hi Stephane,  
 
To use DataManager in ASP.NET Core Razor pages, you need to add AntiForgery tokens in the headers property of the DataManager and set ValidateAntiForgeryToken attribute in the server side method. Make sure that you have defined the route in your view: @page “{handler?}”. Refer to the below code.  
 
[Index.cshtml]  
@page "{handler?}"  
@model IndexModel  
<ej-grid id="FlatGrid" query="new ej.Query()">  
    <e-datamanager url="DataSource" adaptor="UrlAdaptor" headers='new List<Dictionary<string,object>> { new Dictionary<string, object>() { { "XSRF-TOKEN", "YOUR ANTI FORGERY TOKEN HERE" } } }'></e-datamanager>  
    <e-columns>  
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .   
    </e-columns>  
</ej-grid>  
 
[Index.cshtml.cs]  
[ValidateAntiForgeryToken]  
public ActionResult OnPostDataSource()  
{  
              
. . . . . . . . . . . . . . . . . . . . . . . . . .   
}  
 
 
Regards,  
Renjith Singh Rajendran. 



SP stephane pasin January 19, 2018 11:39 PM UTC

Hello, Thank you for you answer 
If i use your sample i dont have data into the grid 

the same in my projet


with the same datasource a table have row but not the grid



GA gaso replied to Saravanan Arunachalam January 21, 2018 12:53 PM UTC

Hi Brian, 
The support incident has been created under your account for your reported query. Please log on to our support website to check for further updates. 
Regards, 
Saravanan A. 


i like it and i want it

SP stephane pasin January 21, 2018 09:28 PM UTC

Yes 

1)
I too hope we will have an answer on Monday 

2)
For synfusion support 

I want to limit the number of row par page to 6 row. 

How should I write it with Razor


have a nice day

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team January 25, 2018 04:07 PM UTC

Hi Stephane, 

We have checked your query and  further analyzing your screenshots you have used remoteSaveAdaptor on Razor pages so that we have prepared sample using remoteSaveAdaptor and return the data using model. 
Please ensure in your sample project you have resolved camel casing problem i.e  make first Letter of the FieldName in capital (ex:- OrderID, CustomerID).   

Please refer to the link:- 

Please refer to the code example:- 

<div style="padding:20px;"> 
    <ej-grid id="FlatGrid" allow-paging="true"> 
        <e-datamanager json="@Model.TestModel.Orderdata" update-url="NormalUpdate" insert-url="NormalInsert" remove-url="NormalDelete" adaptor="remoteSaveAdaptor" /> 
          <e-columns> 
            <e-column field="OrderID" header-text="Order ID" is-primary-key="true"  text-align="Right" width="75"></e-column> 
            <e-column field="CustomerID" header-text="Customer ID" width="80"></e-column> 
            .   .    . 
        </e-columns> 
    </ej-grid> 
    
</div> 
 
 
public class IndexModel : PageModel 
    { 
        [BindProperty] 
        public TestModel TestModel { get; set; } 
        public void OnGet(){ 
 
            GetDataSource(); 
        } 
 
        public IActionResult OnPost(TestModel value){ 
 
            .  .    . 
        } 
 
        public void GetDataSource(){ 
 
                TestModel.Orderdata.Add(new Order(code + 1, "ALFKI", i + 0, 2.3 * i, new DateTime(1991, 05, 15), "Berlin")); 
 
                TestModel.Orderdata.Add(new Order(code + 2, "ANATR", i + 2, 3.3 * i, new DateTime(1990, 04, 04), "Madrid")); 
 
           } 
        } 
     } 
 
   public class Order 
 
    { 
 
        public Order() 
 
        { 
 
 
 
        } 
 
        .        .   . 
    } 
} 


Please refer to the sample:- 

Please get back to us if you need any further assistance. 

Regards, 

Farveen sulthana T 


Loader.
Up arrow icon