Can autocomplete be used with ajax binding within a razorpage?

[BitShift]

I see the example in the docs setting a custom datasource, but I dont see any mention of using Ajax for the datasource binding?  It looks like this wont work with razorpages using one of the page handlers for the datasource read methods. So I guess another option is to use a web api handler and use that?

[BitShift]

Ok, I figured it out.  This is the kind of info that would be in *very* helpful in a separate section of the docs specifically for RAZORPAGES!

I had to figure this out on my own.
- Where in the docs does it mention that the .data methods can be chained?
- When building Razorpages, I have to remember to use the Url
- Where is it mentioned that the autocomplete defaults to httpget requests, and if you want to use http post, you need to change the type?

 

[ Razorpage called Tester ]

Autocomplete

@(Html.Kendo().AutoComplete()
      .Name("products")
      .DataTextField("name")
      .Filter("contains")
      .MinLength(3)
      .HtmlAttributes(new { style = "width:100%" })
      .DataSource(source =>
              {
                  source
                      .Read(s =>
                      {
                          //s.Url("api/test/GetCustomers").Data("onAdditionalData");
                          s.Url("/Tester?handler=GetCustomers").Data("onAdditionalData").Data("forgeryToken").Type(HttpVerbs.Post);
                      })
              .ServerFiltering(true);
      })
)

In the pagemodel class

        public JsonResult OnPostGetCustomers(NameVal a)
        {
            var retval = new[]
            {
                new {name = "Bob Builders",code = "BB" },
                new {name = "Other", code = "Other" }
            }.ToList();

            return new JsonResult(retval);

        }

Where the type NameVal is

    public class NameVal
    {
        public string name { get; set; }
    }

Note, above the commented out line using an api endpoint, add a new folder in your app /api, then add 

    [Route("api/[controller]/[action]")]
    [ApiController]
    public class TestController : ControllerBase
    {
        [HttpGet]
        public IActionResult GetCustomers(string test)
        {
            var retval = new[]
            {
                new {name = "Bob Builders",code = "BB" },
                new {name = "Other", code = "Other" }
            }.ToList();

            // TODO get list of customers

            return Ok(retval);
        }
    }

[Luke]

Interesting. I created a Razor Page and copied in your code, but for some reason it does not work. What might be the problem here?

I noticed that when I set a breakpoint inside the OnPostGetCustomers, that code is never triggered.

Razorpage:

 

@page
@model TestProject.Pages.TesterModel
@{
}
@(Html.Kendo().AutoComplete()
      .Name("products")
      .DataTextField("name")
      .Filter("contains")
      .MinLength(3)
      .HtmlAttributes(new { style = "width:100%" })
      .DataSource(source =>
              {
                  source
                      .Read(s =>
                      {
                          //s.Url("api/test/GetCustomers").Data("onAdditionalData");
                          s.Url("/Tester?handler=GetCustomers").Data("onAdditionalData").Data("forgeryToken").Type(HttpVerbs.Post);
                      })
              .ServerFiltering(true);
      })
)

 

CodeBehind:

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
namespace TestProject.Pages
{
    public class TesterModel : PageModel
    {
        public JsonResult OnPostGetCustomers(NameVal a)
        {
            var retval = new[]
            {
                new {name = "Bob Builders",code = "BB" },
                new {name = "Other", code = "Other" }
            }.ToList();
            return new JsonResult(retval);
        }
        public class NameVal
        {
            public string name { get; set; }
        }
    }
}

[Petar]

Hi Luke and BitShift,

I am not sure if the current thread is about just binding the AutoComplete component to a datasource using Ajax or the targeted functionality is to have the AutoComplete realized with server filtering? Please clarify the targeted functionality and I will prepare an example.

Regarding BitShift's feedback about the Razor Pages documentation, I can agree with him that there should be more information and examples about how the UI for ASP.NET Core components can be used in RazorPages context. We are currently working on such a task and soon more data and examples should be available. 

Regards,
Petar
Progress Telerik