AutoComplete Textbox with database - asp.net-mvc-4

Question

I wanna do autocomplete when i enter a letter.
I have a database "USERS" and it has name .When i try texted for example e
it must show "edgar,edwin,emir" but ,t shows nothing.
ClientController here:
public class ClientController : Controller
{
public JsonResult AutocompleteSuggestions(string searchstring)
{
ModelContext db = new ModelContext();
var suggestions = from E in db.USERS
select E.Name;
var namelist = suggestions.Where(n => n.ToLower().Contains(searchstring.ToLower()));
return Json(namelist, JsonRequestBehavior.AllowGet);
}
}
index.cshtml here:in here there is a textbox and i send client controller autocopleteSuggeston method but it doesnt go or it doesnt work.I add jquery script file on cshtml but it still not working.
#using (Html.BeginForm())
{
<p>
Name: #Html.TextBox("SearchString")
<input type="submit" value="Search" />
</p>
}
<script type="text/javascript">
window.jQuery(function () {
window.jQuery("#SearchString").autocomplete({
source: "/Client/AutocompleteSuggestions",
minLength: 1,
select: function (event, ui) {
if (ui.item) {
window.jQuery("#SearchString").val(ui.item.value);
window.jQuery("form").submit();
}
}
});
});
</script>
i add jquery
Where is the mistake?

Answer 1

you need to add [HttpPost] before JsonResult method like this:
[HttpPost]
public JsonResult AutocompleteSuggestions(string searchstring)
{
ModelContext db = new ModelContext();
var suggestions = from E in db.USERS
select E.Name;
var namelist = suggestions.Where(n => n.ToLower().Contains(searchstring.ToLower()));
return Json(namelist, JsonRequestBehavior.AllowGet);
}
as the form here is submitted using window.jQuery("form").submit(),it invokes a Post Action, so you need to add [HttpPost] for capturing the form submissions or any kind of Post Action!
Change your View Code to
#using( Html.BeginForm(null, null, FormMethod.Post, new{#id ="SearchForm"} ))
{
<p>
Name: #Html.TextBox("SearchString")
<input type="submit" value="Search" />
</p>
}
$(function() {
$("#SearchString").autocomplete({
source: "/Client/AutocompleteSuggestions",
select: function(event, ui) {
$("#SearchString").val(ui.item.value);
$("#SearchForm").submit();
}
});
});