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

Webapi failure

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




7 Replies

UD UdhayaKumar Duraisamy Syncfusion Team January 23, 2023 02:29 AM UTC

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.



MA Martin January 25, 2023 01:24 PM UTC

I suspect that is an error message of some kind.   Can I get the results of the API call (as the dropdown sees it)?



UD UdhayaKumar Duraisamy Syncfusion Team January 26, 2023 10:02 AM UTC

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.


API- Reference: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ActionCompleteEventArgs.html#Syncfusion_Blazor_DropDowns_ActionCompleteEventArgs_Result



MA Martin February 3, 2023 09:26 AM UTC

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; }
}


UD UdhayaKumar Duraisamy Syncfusion Team February 7, 2023 12:05 PM UTC

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


Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/UrlAdaptor_DropdownList-1912359786



MA Martin June 8, 2023 06:32 AM UTC

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



UD UdhayaKumar Duraisamy Syncfusion Team June 12, 2023 12:27 PM UTC


Loader.
Up arrow icon