Autocomplete with MVC 4 / Razor

asp.net-mvc, jquery, razor

Solution

If you have the `@Scripts.Render` lines at the bottom of the `body` element in the layout and after the `@RenderBody()` you need to put your script in the `scripts` section:

@section scripts
<script type="text/javascript">
    $(function () {
        $("#Number").autocomplete({
            source: '@Url.Action("Numbers","Home")',
            minLength: 1
        });
    });
</script>
End Section

Because your script depends on jQuery so jQuery should be loaded first.

Or just move your `@Scripts.Render` declaration into the `head` in the layout then you don't need to put your code into the `scripts` section (but you are better off with using the section)

Problem

I think I am missing something obvious while attempting to add autocomplete functionality in MVC 4. From what I have found in other posts I have been able to put together an example however the method in my controller is not being called. What I have tried so far... _Layout ``` @Styles.Render("~/Content/themes/base/css") @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/jqueryui") @Scripts.Render("~/bundles/jqueryval") ``` Controller ``` Public Function Numbers(term As String) As ActionResult Return Json(New String() {"one", "two", "three", "four", "five", "six"}, JsonRequestBehavior.AllowGet) End Function ``` View (I have hard coded the Home/Numbers for now) ``` <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> ``` When I run my app and type in the textbox nothing happens. I have put a breakpoint in the "Numbers" function and it seems that it is never called. My project can be found here http://www.filedropper.com/testapp

Original source