オートコンプリートテキストボックスの変更イベントをMVC3に追加するには

Question

MVC3オートコンプリートテキストボックス変更イベントを追加するにはどうすればよいですか？以下は私のコードです。

マイビューコード

<div style="float: left"> 

States Filter : 

</div> 

<div style="float: left; padding-left: 10px"> 
    @Html.TextBox("Statestxt") 
</div> 

<div style="padding-left: 10px; float: left"> 
    <input type="image" value="submit" src="../../Images/FilterBrowse.gif" 
      alt="submit Button" />  
</div> 

マイコントローラ：

public ActionResult AutocompleteAsync(string term) 
{ 
    var suggestions = from s in Adm.states 
    select s.state_name; 
    var namelist = suggestions.Where(n => n.ToLower().StartsWith(term.ToLower())); 

    return Json(namelist, JsonRequestBehavior.AllowGet); 
} 


[AcceptVerbs(HttpVerbs.Post)] 
public ActionResult States(state stateModel, string _stateName, 
    FormCollection formvalues) 
{ 
    AdmDataContext Adm = new AdmDataContext; 

    if (Request.Form["Statestxt"] == null) 
    { 
     ViewBag.Error = "Enter State Name."; 
     ViewData["name"] = false; 

     return View(); 
    } 
    else 
    { 
     _stateName = Request.Form["Statestxt"].ToString(); 
     var record = (from state in Adm.states 
         where state.state_name == _stateName 
         select state).Count(); 

     if (record == 0) 
     { 
      ViewBag.Error = "Enter Valid State Name."; 

      return View(); 

     } 

     var _Stateid = from state in Adm.states 
         where state.state_name == _stateName 
         select state; 

     int StateId = (int)_Stateid.First().state_id; 
     var state1 = am.FindUpcomingStates2(StateId).ToList(); 

     if (state1 != null) 
     { 
      ViewData["name"] = true; 
      return View("States", state1); 
     } 

    } 
} 

私はStatestextを入力した後、データを変更したいです。 Textbox changedイベントのコードはどこに書くことができますか？

ありがとうございました。

Answer 1

ユーザーがテキストを変更したときにJavascript関数を呼び出したいと思っています。あなたはこのために使用することができますHtml.TextBoxヘルパーのためのオーバーロードがあります：

@Html.TextBox("Statestxt", "", new { onkeyup = "fnAjaxAutocomplete(this)" }) 

その後、あなたのハンドラJavascriptの方法は、次のようになります。

function fnAjaxAutocomplete(element) 
{ 
    var ajaxUrl = '@Url.Action("AutocompleteAsync")' + '?text=' + element.value; 
    $.get(ajaxUrl(function(suggestionsJson) { 
     // handle JSON result here 
    }); 
}