How to get autocomplete text box value when post in ASP.NET with DevExtreme

Question

I need to get the value of the text when I post the form in ASP.NET Core app.

In my HTML file I have this DevExtreme control:

<div class="form-group">
     <label asp-for="@Model.Account.FullName" class="control-label"></label>

      @(Html.DevExtreme().Autocomplete()
             .DataSource(d => d.Mvc().Controller("Offer").LoadAction("GetFullNames"))
             .ShowClearButton(true)
             .Placeholder("Type name")
       )
</div>

I'm getting all other values from the form through this line:

<div class="form-group">
      <input asp-for="@Model.Account.Email" class="form-control" />
</div>

The Devextreme docs don't give any information how to extract the typed value in this field. I'm not sure if it can be done with jQuery since my front-end knowledge is limited.

I'm using this Get method to fill the autocomplete box, but my issue is how to get the value when the autocomplete is inside the form and I'm submitting the form.

  [HttpGet]
  public object Get(DataSourceLoadOptions loadOptions)
  {
      return DataSourceLoader.Load(_context.Account, loadOptions);
  }

Answer 1

Are you going to submit the form and bind the field value to the Account model in the httpost action? If so, you should add the Name attribute to the Autocomplete widget.

Maybe you can refer to the below codes:

Model:

public class TestModel
{
    public Account Account { get; set; }
}

public class Account
{
    public string FullName { get; set; }
}

View:

@model TestModel

<h2>Home</h2>

<form asp-action="Test">
    <div class="form-group">
        <label asp-for="@Model.Account.FullName" class="control-label"></label>

        @(Html.DevExtreme().Autocomplete()
             .DataSource(d => d.Mvc().Controller("Offer").LoadAction("GetFullNames"))
             .ShowClearButton(true)
             .Placeholder("Type name")
             .Name("FullName")
       )

        <input type="submit" value="submit" class="btn btn-primary" />
    </div>
</form>

OfferController:

public class OfferController : Controller
{
   
    [HttpGet]
    public object GetFullNames(DataSourceLoadOptions loadOptions)
    {
        List<string> names = new List<string>
        {
            "aa", "ab", "bb", "bc", "cc", "cd"
        };

        return DataSourceLoader.Load(names, loadOptions);
    }
}

HomeController:

[HttpPost]
public IActionResult Test(Account account)
{


    return Ok(account);
}

Result: