autocomplete JSON

Question

j'ai suivi la vague suivante pour autocomplete et datepicker mais le complet automatique ne peut pas travailler est Deuxièmement, il y a une razor syntax pour montrer la datepicker et autocomplete

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

Le fichier Afficher

@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> 

Le contrôleur 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") 

devrait être

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

Le troisième argument que vous utilisez représente les valeurs de la route qui doit être un objet anonyme et non une chaîne. En ce qui concerne le plugin autocomplete, il utilise la chaîne de requête term lors de l'exécution de la requête AJAX pour récupérer les données. Donc, vous devrez renommer votre paramètre d'action du contrôleur ainsi:

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

Assurez-vous également que ce script jquery-ui-1.8.11.min.js est référencé dans votre page (ne peut pas voir dans votre exemple de code).

Si cela ne fonctionne toujours pas, assurez-vous que l'action de saisie semi-automatique ne génère pas d'exception lors de l'exécution de la requête. Regardez aussi avec FireBug ou Developer Tools s'il n'y a pas d'erreurs javascript et si la requête AJAX est correctement envoyée.