Autocomplete avec MVC 4/Razor
Je pense qu'il me manque quelque chose d'évident lorsque j'essaie d'ajouter une fonctionnalité de saisie semi-automatique dans MVC 4. D'après ce que j'ai découvert dans d'autres publications, j'ai pu constituer un exemple, mais la méthode de mon contrôleur n'est pas appelée.
Ce que j'ai essayé jusqu'à présent ...
_Disposition
@Styles.Render("~/Content/themes/base/css")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/bundles/jqueryval")
Manette
Public Function Numbers(term As String) As ActionResult
Return Json(New String() {"one", "two", "three", "four", "five", "six"}, JsonRequestBehavior.AllowGet)
End Function
Voir (j'ai codé en dur la maison/les chiffres pour l'instant)
<div class="editor-label">
@Html.LabelFor(Function(model) model.Number)
</div>
<div class="editor-field">
@Html.EditorFor(Function(model) model.Number)
@Html.ValidationMessageFor(Function(model) model.Number)
</div>
<script type="text/javascript">
$(function () {
$("#Number").autocomplete({
source: 'Home/Numbers',
minLength: 1
});
});
</script>
Lorsque je lance mon application et que je tape dans la zone de texte, rien ne se passe. J'ai mis un point d'arrêt dans la fonction "Nombres" et il semble que ce n'est jamais appelé.
Mon projet peut être trouvé ici http://www.filedropper.com/testapp
Si vous avez les lignes @Scripts.Render au bas de l'élément body dans la présentation et après la @RenderBody(), vous devez placer votre script dans la section scripts:
@section scripts
<script type="text/javascript">
$(function () {
$("#Number").autocomplete({
source: '@Url.Action("Numbers","Home")',
minLength: 1
});
});
</script>
End Section
Parce que votre script dépend de jQuery, jQuery doit être chargé en premier.
Ou bien, déplacez simplement votre déclaration @Scripts.Render dans la head de la présentation, vous n'avez pas besoin de mettre votre code dans la section scripts (mais l'utilisation de la section est préférable)
Ceci est le projet de code total de l'exemple de zone de saisie semi-automatique.
Je vous suggère de contrôler les erreurs dans Chrome pour vous assurer que les bibliothèques jQuery fonctionnent correctement. S'il n'y a pas de problème, essayez ce script:
$(document).ready(function () {
$("#Number").each(function () {
$(this).autocomplete({ source: $(this).attr("data-autocomplete") });
});
});
Puis dans votre rasoir (C #):
<input type="text" id="Number" data-autocomplete="@Url.Action("Action","Controller")" autocomplete="on" />
Si vous souhaitez utiliser Razor Html Helpers au lieu d'utiliser la balise 'input', l'attribut id est identique à Model.Member. Notez que dans Controller, vous devez saisir une chaîne avec le nom 'term', tel qu'il est écrit dans votre code . Pour des raisons de sécurité, vous devez éviter d'utiliser les paramètres du fichier js qui indique la technologie du site. La méthode déclarée ci-dessus n'utilise jamais le fichier js pour obtenir l'adresse de la ressource.
Pour Viewpage
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<input type="text" id="txtmasterserach" name="txtmasterserach" placeholder="City, region, district or specific hotel" autocomplete="off"/>
<input type="hidden" name="hidenkeyvalues" id="MovieID" />
<script type="text/javascript">
$(document).ready(function () {
$("#txtmasterserach").autocomplete({
source: function (request, response) {
$.ajax({
url: "/Company/getautobox",
type: "POST",
dataType: "json",
data: { Prefix: request.term },
success: function (data) {
response($.map(data, function (item) {
return { value: item.Id, label: item.name };
}))
}
})
},
select: function (event, ui) {
$("#MovieID").val(ui.item.value);
$("#txtmasterserach").val(ui.item.label);
event.preventDefault();
return false;
},
focus: function (event, ui) {
$("#MovieID").val(ui.item.value);
// $("#txtmasterserach").val(ui.item.label);
event.preventDefault();
return false;
},
messages: {
noResults: "", results: ""
}
});
});
</script>
Pour contrôleur:
public class companyController : Controller
{
public JsonResult getautobox(String Prefix)
{
SqlConnection con = new SqlConnection();
con.ConnectionString = ConfigurationManager.ConnectionStrings["Connection"].ConnectionString;
SqlCommand cmd = new SqlCommand("procedurename", con);
cmd.Parameters.AddWithValue("@prefix", Prefix);
cmd.CommandType = CommandType.StoredProcedure;
DataSet ds = new DataSet();
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(ds);
List<autosearchdatalist> auto = new List<autosearchdatalist>();
if (ds.Tables[0].Rows.Count > 0)
{
for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
{
auto.Add(new autosearchdatalist
{
Id = ds.Tables[0].Rows[i]["Id"].ToString(),
name = ds.Tables[0].Rows[i]["hotelname"].ToString()
});
}
}
if (ds.Tables[1].Rows.Count > 0)
{
for (int i = 0; i < ds.Tables[1].Rows.Count; i++)
{
auto.Add(new autosearchdatalist {
Id = ds.Tables[1].Rows[i]["Id"].ToString(),
name = ds.Tables[1].Rows[i]["hotelname"].ToString()
});
}
}
if (ds.Tables[2].Rows.Count > 0)
{
for (int i = 0; i < ds.Tables[2].Rows.Count; i++)
{
auto.Add(new autosearchdatalist
{
Id = ds.Tables[2].Rows[i]["Id"].ToString(),
name = ds.Tables[2].Rows[i]["hotelname"].ToString()
});
}
}
String msg = "";
return Json(auto);
}
}
Conserver les paramètres par défaut du routeur, sinon l'action ne sera pas appelée
public class RouteConfig
{
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "company", action = "Index", id = UrlParameter.Optional }
);
}
}