Question

在我看来，我有;

@using (Ajax.BeginForm("AddExistingSite", new AjaxOptions { UpdateTargetId = "siteRows" }))
            {

                <input type="text" name="q" style="width: 800px" 
                       data-autocomplete="@Url.Action("SiteSearch", "DataService", new { contractId = @Model.Contract.ContractId })" />
                <input type="submit" value="Add site to contract" />
            }

在我的控制器中我有

public ActionResult SiteSearch(string term, int contractId)
    {
        using (var db = new SherryGreenGroupEntities())
        {
            var sites = db.Sites
                .Include("SiteContracts")
                .Where(x => x.SiteContracts.All(y => y.ContractId != contractId || y.EndDate.HasValue)  &&
                    x.Address.Contains(term))
                .Take(10)
                .Select(x => new { id = x.SiteId, label = x.Address }).ToList();
            return this.Json(sites, JsonRequestBehavior.AllowGet);
        }
    }

我已经设置了jquery;

$(":input[data-autocomplete]").each(function () {
    $(this).autocomplete({ source: $(this).attr("data-autocomplete") });
});

现在自动完成工作正常，但我想知道的是如何选择所选项目的ID以便将其发布到控制器？

Answer 1

目前，您的表单中只有一个文本字段，用于保存所选值。如果您需要相应的ID，则可以添加一个隐藏字段，用于存储此信息：

@using (Ajax.BeginForm("AddExistingSite", new AjaxOptions { UpdateTargetId = "siteRows" }))
{
    <input type="text" name="q" style="width: 800px" data-autocomplete="@Url.Action("SiteSearch", "DataService", new { contractId = @Model.Contract.ContractId })" />
    <input type="hidden" name="itemId" class="itemId" />
    <input type="submit" value="Add site to contract" />
}

然后订阅自动填充的select事件并使用相应的值进行更新：

$(':input[data-autocomplete]').each(function () {
    $(this).autocomplete({
        source: $(this).attr('data-autocomplete'),
        select: function (event, ui) {
            $(this).closest('form').find('.itemId').val(ui.item.value);
        }
    });
});

现在在目标控制器操作中，同时获取标签和id：

是微不足道的

[HttpPost]
public ActionResult AddExistingSite(string q, string itemId)
{
    ...
}

显然，这只是一个原始的例子。在实际应用程序中，您不应该在视图中硬编码输入字段，但是您应该使用HTML帮助程序来生成它们，您显然应该使用视图模型。

MVC jquery自动完成，如何获取所选的Id？

1 个答案: