AutoCompleteFor should select a different field as the completion field

[Thomas Lämmlein]

Hi,

imaging there is a 'City' model:

namespace MyModels {
public class City{
public int Id {get; set;}
public string Name { get;set;} }}

Example data:
public Cities[] = new { {"1 Paris", 1}, {"2 London", 2}, { "3 New York", 3}}

And I would like to have an auto completion for the name, but send the Id to a razor page which process the Id.

I read the article https://ej2.syncfusion.com/aspnetcore/AutoComplete/AutoCompleteFor#/material but if I understand its correctly it is a binding of an array of strings to one selected string.

I would like to do something like this

            
            <form class="d-flex" method="post" asp-page="Search">
                <ejs-autocomplete id="BasicinfoCompletion" dataSource="@Model.BasicInfos" placeholder="z.B. 1 or Paris">
                    <e-autocomplete-fields value="Name"></e-autocomplete-fields>
                </ejs-autocomplete>
                <div id="submitbutton">
                    <ejs-button id="submitButton" content="Search"></ejs-button>
                </div>
            </form>

----------------------------------------

As you can see I would like to call the razor page called 'Search'(asp-page="Search") which gets only the 'Id'of the city.

I hope you can help me in this case.

Thomas

[Vinitha Jeyakumar]

Hi Thomas,

Currently, we are validating your reported query. we will update you the further details in two business days on or before 09/02/2022.

Regards,

Vinitha

[Thomas Lämmlein]

Thank you.

[Vinitha Jeyakumar]

Hi Thomas,

We have created a sample as per your requirement to call a razor page on form submission and to get the enterted value's Id on that razor page. please check the code and sample below,

Code snippet:

index.cshtml

<form method="post">

                    <table>

                        <ejs-autocomplete id="autocompletefor" name="val" dataSource="@Model.data" placeholder="e.g. Basketball" ejs-for="@Model.val">

                            <e-autocomplete-fields Text="Name" Value="Code"></e-autocomplete-fields>

                        </ejs-autocomplete>

                        <tr>

                            <td></td>

                            <td><input type="submit" value="Submit" asp-page-handler="Submit" /></td>

                        </tr>

                    </table>

                    <hr />

                   

                </form>

index.cshtml.cs

public class PersonModel

    {

        [BindProperty]

        public string val { get; set; }

    }

   

    public class IndexModel : PageModel

    {

        public string AutoValue { get; set; }

        public string val { get; set; }

        public List<Countries> data = new Countries().CountriesList();

        public RedirectToPageResult OnPostSubmit(PersonModel person)

        {

            this.AutoValue = person.val;

            return RedirectToPage("Search", "SingleOrder", new { countryId = person.val });

        }
}

Search.cshtml.cs

public class SearchModel : PageModel

    {      

        public string value { get; set; }

        public void OnGetSingleOrder(string countryId)

        {

            this.value = countryId;

        }

       

    }

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Core_Razor-304185341

Regards,

Vinitha