爲什麼我的自動完成工作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 
     }); 
    });