为什么我的自动完成工作MVC3剃刀引擎

Question

我使用代码从这个博客Autocompletion Textbox in MVC Using 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呈现到浏览器：

​​

可能是一些简单的我只是不能看到它。有任何想法吗？谢谢！

Answer 1

当使用MVC3剃刀，这句法将不起作用：

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

这是因为剃刀引擎不理解的WebForms引擎语法。相反，我用：

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

我用重载的方法只接受ActionResult名称。这对我有效，但如果你的解决方案设置不同，你可能不得不提供Controller和ActionResult的争论。

最后，当我的AJAX请求发出时，我收到了错误代码500。这是因为在我LookUpGroupName方法，我不得不重构这行代码：

return Json(GroupValue); 

要：

return Json(GroupValue, JsonRequestBehavior.AllowGet); 

我原来的职位对任何人的将来参考所有正确的代码。

Answer 2

我不相信@Html.EditorFor(model => Model.group_name)为它创建的元素添加了ID，因此您的选择器将不匹配。您可以添加一个ID是这样的：

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

另外，如果你wan't使用jQuery上的ID选择，最好是使用ID选择器代替#group_name，除非你确实有许多元素其中ID实际上始于group_name，并且您想一次选择所有元素。

更新

您使用attribute start with选择input[id^=group_name，并在其一个错字。您在选择器中遗失了]。即使如此，如果您不打算选择多个元素都具有以group_name开头的ID，那么标记表明您没有。那么你应该真的使用ID选择器。

Answer 3

做一个测试运行与此

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