Question

I using code from this blog Autocompletion Textbox in MVC Using jQuery

but my jQuery isn’t firing. I suspect its to do with my selector. I am using MVC as well but I don’t see how that would make the javascript any different.

Code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using UserManager.Models;

namespace UserManager.Controllers
{
    public class UserManagerController : Controller
    {
        //
        // GET: /UserManager/

        public ActionResult Index()
        {
            try
            {
                var data = new UserManager.Models.UserManagerTestEntities();
                return View(data.vw_UserManager_Model_Add_Users.ToList());

            }
            catch (Exception ex)
            {
                return View(ViewBag);
            }

        }

        public ActionResult CreateUser()
        {

            var data = new UserManager.Models.UserManagerTestEntities();
            ViewBag.Message = "Create New User";
            return View();
        }

        public ActionResult LookUpGroupName(string q, int limit)
        {
            //TODO: Map list to autocomplete textbox control
            DAL d = new DAL();
            List<string> groups = d.groups();

            var GroupValue = groups
                .Where(x => x.StartsWith(q))
                .OrderBy(x => x)
                .Take(limit)
                .Select(r => new { group = r });

            // Return the result set as JSON
            return Json(GroupValue, JsonRequestBehavior.AllowGet);
        }
    }
}

@model UserManager.Models.vw_UserManager_Model_Add_Users
@{
    ViewBag.Title = "Create New User";
}
<h2>
    CreateUser</h2>
@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>New User Details</legend>
        <div class="editor-label">
            @Html.LabelFor(Model => Model.salutation)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => Model.salutation)
            @Html.ValidationMessageFor(model => Model.salutation)
        </div>
        <div class="editor-label">
            @Html.LabelFor(Model => Model.firstname)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => Model.firstname)
            @Html.ValidationMessageFor(model => Model.firstname)
        </div>
        <div class="editor-label">
            @Html.LabelFor(Model => Model.lastname)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => Model.lastname)
            @Html.ValidationMessageFor(model => Model.lastname)
        </div>
        <div class="editor-label">
            @Html.LabelFor(Model => Model.password)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => Model.password)
            @Html.ValidationMessageFor(model => Model.password)
        </div>
        <div class="editor-label">
            @Html.LabelFor(Model => Model.email)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => Model.email)
            @Html.ValidationMessageFor(model => Model.email)
        </div>
        <div class="editor-label">
            @Html.LabelFor(Model => Model.isactive)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => Model.isactive)
            @Html.ValidationMessageFor(model => Model.isactive)
        </div>
        <div class="editor-label">
            @Html.Label("Group Name")
            <!-- GroupName -->
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => Model.group_name)
            @Html.ValidationMessageFor(model => Model.group_name)
        </div>
        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>

    <div>
        @Html.ActionLink("Back to List", "Index")
    </div>
}
<script type="text/javascript">
    $(document).ready(function () {
        $("#group_name").autocomplete('@Url.Action("LookUpGroupName")', 
        {
        dataType: 'json',
        parse: function (data) {
            var rows = new Array();
            alert("before loop");
            for (var i = 0; i < data.length; i++) {
                rows[i] = { data: data[i], value: data[i].group, result: data[i].group }
            }
            return rows;
        },
        formatItem: function (row, i, max) {
            return row.group
        },
        width: 300,
        highlight: false,
        multiple: true,
        multipleseparator: ","
    });
});

</script>

HTML rendered to browser:

<input name="group_name" class="text-box single-line" id="group_name" type="text" value=""/>

Probably something simple I just cant see it. Any ideas? Thanks!

Answer 1

When using MVC3 Razor this syntax will not work:

$("#postTags").autocomplete('<%=Url.Action("LookUpGroupName",) %>', 

This is because Razor Engine doesn’t understand WebForms Engine Syntax. Instead I used:

$("#group_name").autocomplete('@Url.Action("LookUpGroupName")',

I used the overloaded method which accepts ActionResult name only. This worked for me but you if your solution is setup differently you might have to supply both Controller and ActionResult arguements.

Finally I was getting error code 500 when my AJAX request was being made. This is because in my LookUpGroupName method I had to refactor this line of code:

return Json(GroupValue);

To:

return Json(GroupValue, JsonRequestBehavior.AllowGet);

My original post has all the correct code for anybodys future reference.