MVC Ajax Live Suche mit kaum Javascript

Das fertige Example steht unten zum Download bereit!

WICHTIG: Wir benötigen das Nuget Package „Microsoft.jQuery.Unobtrusive.Ajax“, dies war früher standardmäßig im MVC Template dabei und ist es nicht mehr!

Zum Einbinden des Packages am Einfachsten in der „BundleConfig.cs“ bei jquery auch jquery.unobstrusive* hinzufügen

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
            "~/Scripts/jquery.unobtrusive*", //added for mvc ajax support
            "~/Scripts/jquery-{version}.js"));

WICHTIG: Ich hatte später Probleme, dass mir die Console sagte „unobstrusive is undefined“. Sicherheitshalber einfach noch mittels /View/Other-Windows/Package-Manager-Console folgenden Befehl ausführen

Update-Package Microsoft.jQuery.Unobtrusive.Ajax

In der View (z.B. Index.cshtml) mittels Ajax.BeginForm ein Ajax Formular erstellen und AjaxOptions definieren. Weiters auch die mittels Id referenzierten HTML elemente einbauen. Ist recht selbsterklärend.

@*This is a form that gets submitted asynchronously*@
@using (Ajax.BeginForm("SearchPeople", "AjaxStuff", new AjaxOptions { HttpMethod = "GET", InsertionMode = InsertionMode.Replace, UpdateTargetId = "searchResult", LoadingElementId = "loading" }))
{
    @Html.TextBox("keyword", "", new{ id = "keyword" })
    
}

@*this table gets filled via Ajax.BeginForm*@

Mit diesem Code in der View (z.B. Index.cshtml) lässt sich auf den Submit Button verzichten

@section Scripts{
    
}

Jetzt zum Controller der die Action zum anzeigen der View (z.B. Index.cshtml) enthält noch eine Action hinzufügen, welche die Suche durchführt. Diese gibt ein PartialViewResult zurück. Hier wird Beispielhaft nach Namen in Usern gesucht.

public PartialViewResult SearchPeople(string keyword)
{
    var data = db.UserSet.Where(x => x.Name.Contains(keyword)).ToList();
    return PartialView(data);
}

MVC Ajax Example Live Search

1 Datei(en) 11.84 MB

Download