为什么我的自动完成不起作用 MVC3 剃须刀引擎

Question

i使用此博客自动完成文本框使用MVC中的代码，使用jQuery

但是我的jQuery没有开火。我怀疑它与我的选择器一起做。我也在使用MVC，但我看不出这将如何使JavaScript有所不同。

代码：

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渲染到浏览器：

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

可能简单的东西我看不到它。有任何想法吗？谢谢！

Answer 1

我不相信 @Html.EditorFor(model => Model.group_name)添加和ID添加到其创建的元素中，因此您的选择器将不匹配。您可以添加这样的ID：

@Html.EditorFor(model => Model.group_name, new { ID = "group_name"})

此外，如果您不打算使用jQuery选择ID，则最好使用ID-SELECTOR #group_name，除非您实际上有许多元素，在这些元素中，ID实际上都以group_name开头，您想一次选择所有元素。

update

您将属性启动使用Selector input[id^=group_name，并在其中包含错别字。您缺少选择器中的]关闭。即使这样，如果您不打算选择以group_name开头的ID的多个元素，则标记表明您没有。然后，您应该真正使用ID选择器。

Answer 2

用此

进行测试运行

 $(function() {
        var availableTags = [
            "ActionScript",
            "AppleScript",
            "Asp",
            "BASIC",
            "Scala",
            "Scheme"
        ];
        $( "#group_name" ).autocomplete({
            source: availableTags
        });
    });

Answer 3

使用MVC3剃须刀时，此语法将无法使用：

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

这是因为Razor Engine不了解WebForms引擎语法。相反，我使用了：

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

我使用了仅接受ActionResult名称的超载方法。这对我有用，但是如果您的解决方案的设置不同，您可能必须同时提供控制器和Action Result争论。

最后，当我提出AJAX请求时，我将获得错误代码500。这是因为在我的LookupGroupName方法中，我必须重构此代码行：

return Json(GroupValue);

to：

return Json(GroupValue, JsonRequestBehavior.AllowGet);

我的原始帖子具有Anybodys将来参考的所有正确代码。