1

私の見解では、私は持っています。

@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を取得して、コントローラーに投稿できるようにするために何をするかです。

4

1 に答える 1

2

現在、フォーム内には、選択した値を保持するテキストフィールドが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ヘルパーを使用してそれらを生成する必要があり、明らかにビューモデルを使用する必要があります。

于 2012-10-08T16:52:08.283 に答える