I have a drop down list. Syncfusion version is 20.4.0.44, Dot Net 6, VS v 17.4.4.
<SfDropDownList TValue="int" TItem="Project" Placeholder="Select a Project">
<SfDataManager Url="api/Project" Adaptor="Adaptors.WebApiAdaptor" CrossDomain="true"></SfDataManager>
<DropDownListFieldSettings Text="Project1" Value="Projectid"></DropDownListFieldSettings>
<DropDownListEvents TValue="int" TItem="Project" OnActionFailure="@OnActionFailurehandler"> </DropDownListEvents>
</SfDropDownList>
If I run https://localhost:7208/api/Project the api runs and returns the correct data. However when the dropdown list above the API appears not to run (a breakpoint on the first line of the controller is not reached). An error is trapped by the OnActionFailurehandler which reads:
"'<' is an invalid start of a value. Path: $ | LineNumber: 2 | BytePositionInLine: 0."
The content of the project table referenced in the APi call is:
ProjectID Project
1 C4W
2 Froglife Ltd
3 Green Pathways Pboro
4 London TOAD
5 RNDF
6 SDF
What is going on?
Many thanks
M
This error message suggests that the DropDownList component is expecting a JSON object, but it is receiving an invalid value. The error message "'<' is an invalid start of a value" specifically suggests that the response from the API is starting with a '<' character, which is not a valid start for a JSON object. This could be caused by an issue with the API returning an HTML page instead of a JSON object. I would recommend checking the API to ensure that it is returning a JSON object and not an HTML page. Additionally, you can check the network tab in browser developer tools to see the exact response from the API and further debug the issue.
If you are still experiencing the same issue, please provide a runnable sample of your code. This will allow us to better understand and assist with resolving your issue.
I suspect that is an error message of some kind. Can I get the results of the API call (as the dropdown sees it)?
The OnActionComplete event in our product allows you to access the selected items from the data source through its Result property. This will return the selected items as a JSON object for further analysis.
I still can't get this to work. Here is a razor page:
@page "/register"
@using Syncfusion.Blazor
@using Syncfusion.Blazor.Data
@using Syncfusion.Blazor.DropDowns
@inject IJSRuntime JsRuntime;
<h3>Register</h3>
<div class="col-lg-12 control-section">
<div class="control-wrapper">
<div class="cascading">
<label class="example-label">Project</label>
<SfDropDownList TValue="string" TItem="Project" Placeholder="Select a Project">
<SfDataManager Url="api/Project" Adaptor="Adaptors.WebApiAdaptor" CrossDomain="true"></SfDataManager>
<DropDownListFieldSettings Text="project" Value="projectId"></DropDownListFieldSettings>
<DropDownListEvents TValue="string" TItem="Project" OnActionFailure="@OnActionFailurehandler" OnActionComplete="@OnActionCompleteHandler">
</DropDownListEvents>
</SfDropDownList>
</div>
</div>
</div>
<style>
.control-wrapper {
max-width: 250px;
margin: 0 auto;
padding: 10px 0px 0px;
}
.example-label {
font-size: 14px;
margin-bottom: 6px;
}
.control-wrapper .cascading {
padding: 30px 0px 0px;
}
</style>
@code {
public class Project
{
public int projectId { get; set; }
public string? project { get; set; }
}
private async void OnActionFailurehandler(Exception args)
{
await JsRuntime.InvokeAsync("console.log", args.Message);
}
private async void OnActionCompleteHandler(ActionCompleteEventArgs args)
{
await JsRuntime.InvokeAsync("console.log", args.Result);
}
}
The controller code is:
using Microsoft.AspNetCore.Mvc;
using FroglifeSurveyManagement.Shared.DataAccess;
using FroglifeSurveyManagement.Models;
using Microsoft.Extensions.Primitives;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using System.Web;
using Microsoft.AspNetCore.Http;
using Microsoft.JSInterop;
namespace FroglifeSurveyManagement.Controllers
{
[Produces("application/json")]
[Route("api/[controller]")]
[ApiController]
public class ProjectController : ControllerBase
{
ProjectDataAccessLayer db = new ProjectDataAccessLayer();
[HttpGet]
public Object Get()
{
IQueryable data = db.GetAllProjects().AsQueryable();
var count = data.Count();
var queryString = Request.Query;
if (queryString.Keys.Contains("$inlinecount"))
{
StringValues Skip;
StringValues Take;
int skip = (queryString.TryGetValue("$skip", out Skip)) ? Convert.ToInt32(Skip[0]) : 0;
int top = (queryString.TryGetValue("$top", out Take)) ? Convert.ToInt32(Take[0]) : data.Count();
return new { Items = data.Skip(skip).Take(top), Count = count };
}
else
{
return data;
}
}
}
}
When the razor code is run the controller is not run (as evidenced from breakpoints). On the other hand (using Visual Studio) I can access teh API directly using https://localhost:7208/api/Project and that returns the right data as JSON.
Oh the EF model class for Project is:
namespace FroglifeSurveyManagement.Models;
public partial class Project
{
public int projectId { get; set; }
public string? project { get; set; }
}
You can use UrlAdaptor for your requirement instead of WebApiAdaptor. We have also prepared a sample and shared it below for your reference. Please refer to the shared documentation for more information.
[Index.razor]
<div style="margin:130px auto;width:300px"> <label class="example-label">Project</label> <SfDropDownList ID="CustomerID" TValue="string" TItem="Orders" Placeholder="Select a Project"> <SfDataManager Url="/api/Default" Adaptor="Adaptors.UrlAdaptor" CrossDomain="true"></SfDataManager> <DropDownListFieldSettings Text="CustomerID" Value="CustomerID"></DropDownListFieldSettings> <DropDownListEvents TValue="string" TItem="Orders" OnActionFailure="@OnActionFailurehandler" OnActionComplete="@OnActionCompleteHandler"> </DropDownListEvents> </SfDropDownList> </div> |
|
Documentation: https://blazor.syncfusion.com/documentation/data/adaptors#url-adaptor
I bypassed this issue this time doing things a different way. However it has arisen in a subsequent project and more searching leads me t believe it is substantively the same as https://www.syncfusion.com/forums/160767/post-upgrade-issue-sfdatamanager-with-webapiadaptor.
Was a solution ever foun