如何使用 DevExtreme 在 ASP.NET 中 post 时获取自动完成文本框值

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

当我 post 在 ASP.NET 核心应用程序中的表单时,我需要获取文本的值。

在我的 HTML 文件中,我有这个 DevExtreme 控件:

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

我通过这一行从表单中获取所有其他值:

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

Devextreme 文档没有提供任何有关如何提取此字段中键入的值的信息。 我不确定是否可以用 jQuery 完成,因为我的前端知识有限。

我正在使用此 Get 方法来填充自动完成框,但我的问题是当自动完成在表单内部并且我正在提交表单时如何获取值。

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

您要提交表单并将字段值绑定到 httpost 操作中的 Account 模型吗?如果是这样,您应该将 Name 属性添加到自动完成小部件。

或许你可以参考下面的代码:

型号:

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

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

查看:

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

家庭控制器:

[HttpPost]
public IActionResult Test(Account account)
{


    return Ok(account);
}

结果: