MVC jquery autocomplete, 선택한 ID를 어떻게 가져 옵니까?

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" /> 
      } 

내가 jQuery를 설정 한

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

있다;

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

지금 자동 완성이 작동하지만, 내가 데리러 무엇을해야합니까 내가 알고 싶은 것은 선택한 항목의 ID 그래서 그것을가 컨트롤러에 게시 할 수 있습니까?

Answer 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="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를해야하는 경우이 정보를 저장하는 데 사용되는 숨겨진 필드를 추가 할 수 있습니다 이 라벨과 ID를 모두 얻을 수 사소한 대상 컨트롤러 액션 내부 지금

:

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

는 물론이 모든 단지 원시입니다 예. 실제 응용 프로그램에서는 뷰의 입력 필드를 하드 코딩하지 말아야하지만 HTML 도우미를 사용하여 생성해야하며 뷰 모델을 사용해야합니다.