オートコンプリートJSON

Question

私はautocompleteとdatepickerため、次の波に従って持っていますが、第二に動作しないことができる自動補完がある任意のrazor syntax日付ピッカーとオートコンプリート

javascriptfile

を表示します

/// <reference path="jquery-1.5.1-vsdoc.js" /> 
/// <reference path="jquery-ui-1.8.11.js" /> 

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

ビューファイル

@model TestDateTimePicker.Models.TestClass 

@{ 
    ViewBag.Title = "Create"; 
} 

<h2>Create</h2> 

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script> 

@using (Html.BeginForm()) { 
    @Html.ValidationSummary(true) 
    <fieldset> 
     <legend>TestClass</legend> 

     <div class="editor-label"> 
      @Html.LabelFor(model => model.City) 
     </div> 
     <div class="editor-field"> 
      <input data-autocomplete="@Url.Action("AutoComplete", "City","City")" class="text-box single-line" id="City" name="City" type="text" value="" />       
      @Html.ValidationMessageFor(model => model.City) 
     </div> 

     <div class="editor-label"> 
      @Html.LabelFor(model => model.Date) 
     </div> 
     <div class="editor-field">    
      <input class="text-box single-line" data-val="true" data-val-required="The Date field is required." id="Date" name="Date" type="text" value="" data-datepicker="true"/> 
      @Html.ValidationMessageFor(model => model.Date)    
     </div> 

     <p> 
      <input type="submit" value="Create" /> 
     </p> 
    </fieldset> 



    } 

<div> 
    @Html.ActionLink("Back to List", "Index") 
</div> 

JSONコントローラー

public ActionResult AutoComplete(String s) 
     { 
      var d = db.Cities 
       .Where(r => r.Name.Contains(s)) 
       .Select(r => new { label = r.Name });    
      return Json(d, JsonRequestBehavior.AllowGet); 
     } 

Answer 1

@Url.Action("AutoComplete", "City", "City") 

が

@Url.Action("AutoComplete", "City") 

する必要があります使用している3番目の引数は、匿名オブジェクトではなくでなければならないルート値を表し、文字列。オートコンプリートプラグインに関する限り、データを取得するAJAXリクエストを実行するときには、クエリ文字列termを使用します。 （あなたのコード例でそれを見ることができない）

public ActionResult AutoComplete(string term) 
{ 
    var d = db.Cities 
       .Where(r => r.Name.Contains(term)) 
       .Select(r => new { label = r.Name });    
    return Json(d, JsonRequestBehavior.AllowGet); 
} 

またそのjquery-ui-1.8.11.min.jsスクリプトは、あなたのページで参照されていることを確認してください：だからあなたにも、あなたのコントローラのアクションパラメータの名前を変更する必要があります。

まだ動作しない場合は、クエリの実行時にオートコンプリートアクションが例外をスローしないことを確認してください。また、いくつかのJavaScriptエラーがなく、AJAXリクエストが正しく送信されている場合は、FireBugまたは開発者ツールを参照してください。