Havit Blazor Does Not Work with Blazor Interactive Server?

[chobo2]

Hi

I am tyring to get "HxAutosuggest" to work, but I not sure what I am missing.

I pretty much am using the example in the documentation with some minor changes (hooked up my own service methods to grab the data, my own DTO and using a long instead of int")

I am using Blazor 8 with InteractiveServer so when I was going through the "getting started" insturctions I am a bit confused on what to use and not to use.

@Html.Raw(HxSetup.RenderBootstrapJavaScriptReference()) - does not seem to work for me

builder.Services.AddHxServices(); // not sure if I need this or not

I don't see _host.cshtml/_layout.cshtml anymore

I don't see a Statup.cs anymore as well

So I am not sure if this what is casuing my problem or not.

What is happening is only "ResolveAutosuggestItemFromValue" is being triggered, when I type anything in the box the "ProvideSuggestions" never gets triggered. I also noticed the "X" button on the input box does nothing as well.

So this leads me to think I am missing something.

@inject IDemoDataService DemoDataService

<HxAutosuggest Label="Employee"
			   Placeholder="Start typing to search by name"
			   TItem="EmployeeDto"
			   TValue="int?"
			   @bind-Value="@selectedEmployeeId"
			   DataProvider="ProvideSuggestions"
			   ValueSelector="employee => employee.Id"
			   TextSelector="employee => employee.Name"
			   ItemFromValueResolver="ResolveAutosuggestItemFromValue">
	<EmptyTemplate>
		<span class="p-2">Couldn't find any matching employee</span>
	</EmptyTemplate>
</HxAutosuggest>

<p class="mt-3">Selected employee ID: @selectedEmployeeId</p>

@code
{
	private int? selectedEmployeeId = 1;

	private async Task<AutosuggestDataProviderResult<EmployeeDto>> ProvideSuggestions(AutosuggestDataProviderRequest request)
	{
		var matchingEmployees = await DemoDataService.FindEmployeesByNameAsync(request.UserInput, limitCount: 10, request.CancellationToken);

		return new AutosuggestDataProviderResult<EmployeeDto> { Data = matchingEmployees };
	}

	private async Task<EmployeeDto> ResolveAutosuggestItemFromValue(int? value)
	{
		if (value is null)
		{
			return null;
		}

		return await DemoDataService.GetEmployeeByIdAsync(value.Value);
	}
}

[chobo2]

I have created a full example if that helps. With this code if I load the page up I will see the thumbups and I will see the input box with "Jim" in it.

If I try to type "bob" nothing happens.

@page "/"

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<HxIcon Icon="@BootstrapIcon.HandThumbsUp" CssClass="display-3" />


<HxAutosuggest Label="Employee"
			   Placeholder="Start typing to search by name"
			   TItem="EmployeeDto"
			   TValue="int?"
			   @bind-Value="@selectedEmployeeId"
			   DataProvider="ProvideSuggestions"
			   ValueSelector="employee => employee.Id"
			   TextSelector="employee => employee.Name"
			   ItemFromValueResolver="ResolveAutosuggestItemFromValue">
	<EmptyTemplate>
		<span class="p-2">Couldn't find any matching employee</span>
	</EmptyTemplate>
</HxAutosuggest>

<p class="mt-3">Selected employee ID: @selectedEmployeeId</p>

@code
{
	private int? selectedEmployeeId = 1;
	private List<EmployeeDto> employeeDtos = new List<EmployeeDto>()
	{
		 new EmployeeDto(){ Id = 1, Name = "Jim"},
		 new EmployeeDto(){ Id = 2, Name = "Bob"}
	};

	private async Task<AutosuggestDataProviderResult<EmployeeDto>> ProvideSuggestions(AutosuggestDataProviderRequest request)
	{
		await Task.Delay(500);
		// var matchingEmployees = await DemoDataService.FindEmployeesByNameAsync(request.UserInput, limitCount: 10, request.CancellationToken);

		return new AutosuggestDataProviderResult<EmployeeDto> { Data = employeeDtos };
	}

	private async Task<EmployeeDto> ResolveAutosuggestItemFromValue(int? value)
	{
		await Task.Delay(500);

		if (value is null)
		{
			return null;
		}

		return employeeDtos.First(x => x.Id == value.Value);
	}

	public class EmployeeDto
	{
		public int? Id { get; set; }
		public string? Name { get; set; }
	}
}

using BlazorApp2.Components;
using Havit.Blazor.Components.Web;

namespace BlazorApp2
{
    public class Program
    {
        public static void Main(string[] args)
        {
            var builder = WebApplication.CreateBuilder(args);

            // Add services to the container.
            builder.Services.AddRazorComponents()
                .AddInteractiveServerComponents();

            //builder.Services.AddHxServices();

            var app = builder.Build();

            // Configure the HTTP request pipeline.
            if (!app.Environment.IsDevelopment())
            {
                app.UseExceptionHandler("/Error");
                // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
                app.UseHsts();
            }

            app.UseHttpsRedirection();

            app.UseStaticFiles();
            app.UseAntiforgery();

            app.MapRazorComponents<App>()
                .AddInteractiveServerRenderMode();

            app.Run();
        }
    }
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <link href="_content/Havit.Blazor.Components.Web.Bootstrap/defaults.css" rel="stylesheet" />

    <link rel="stylesheet" href="BlazorApp2.styles.css" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <HeadOutlet />
</head>

<body>
    <Routes />
    <script src="_framework/blazor.web.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>

</html>

[chobo2]

Never mind I forgot already how Blazor 8 works. I choose interatciveServer and per component which defaults to static mode for the pages. I I had to speciify the render mode to make it work.

Now it is working. It still would be great to see the documentation updated on where to put what as I am still not sure if I put everything in the right place.