使用JQuery和數據庫自動完成 - APS.NET MVC

我很抱歉這是一種重複，但是，即使在查看關於該主題的其他幾個問題之後，我仍然無法獲得我的工作。使用JQuery和數據庫自動完成 - APS.NET MVC

我想在我的表單中使用JQuery自動完成小部件從數據庫中的30K +記錄中進行選擇。我相信我的問題出現在.autocomplete函數的source左右。

HTML + JS

@using (Html.BeginForm()) 
{ 
    @Html.LabelFor(model => model.Name) 
    @Html.TextBoxFor(model =>model.Name, new { id="Search"}) 
} 
<script type="text/javascript"> 
    $('#Search').autocomplete({ 
     source: '@Url.Action("GetVendors", "TestAutoComplete")', 
     minLength: 3 
    }); 
</script>

控制器動作

[HttpGet] 
public JsonResult GetVendors(string Search) 
{ 
    return Json(DB.VendorLookUp(Search), JsonRequestBehavior.AllowGet); 
}

我知道我的DB.VendorLookUp方法的工作（我單獨測試它），我有沒有按該GetVendors方法中的斷點不會受到打擊。

在控制檯中我得到這個錯誤：

GET http://localhost:50848/TestAutoComplete/GetVendors?term=mic 500 (Internal Server Error)

（其中 '麥克風' 是我試圖搜索）。我假設問題的至少一部分是我的控制器方法是除了字符串「搜索」，當JS正在嘗試獲取「術語」。

在此先感謝您的幫助。

編輯：事情我已經嘗試：

改變參數在我的控制器行動「搜索」到「術語」
由於沒有在我的控制器行動
更新任何參數@ Url.Action（）沿值傳遞給：
- source: '@Url.Action("GetVendors", "TestAutoComplete", new {Search= $('#VendorSearch').val() })'
- ，但得到的錯誤
- Invalid anonymous type member declarator. Anonymous type members must be declared with a member assignment, simple name or member access.

UPDATE：錯誤消息

UPDATE：

多虧了評論意見，望着通過網絡錯誤 - >檢查響應了我一個有意義的錯誤。我試圖趕上js調用，我可以有2個控制器動作 - 一個帶有參數，另一個帶無參數。這使代碼混淆。我刪除了沒有參數的動作，現在控制器動作正常運行，DB.VendorLookUp返回Vendor_VM列表（控制器正確地轉換爲JSON對象）。

但是，結果沒有正確返回 - 請參閱下面的圖3。選項不在下拉列表中，並且不顯示任何值。

如何更新cshtml/js以將名稱傳遞給輸入表單？
如何讓這些值以適當的下拉方式顯示？

來源

2017-02-27 swallis1

更改方法'公共JsonResult GetVendors（字符串項）' –

我已經試過了。仍然得到錯誤：'GET HTTP：//本地主機：50848/TestAutoComplete/GetVendors項=麥克風500（內部服務器錯誤）'當我控制器操作如下：？'[HTTPGET] 公共JsonResult GetVendors（字符串項） { 返回Json（DB.VendorLookUp（term），JsonRequestBehavior.AllowGet）; }' – swallis1

然後你的'VendorLookUp（）'方法拋出一個異常。使用您的瀏覽器工具（網絡選項卡檢查結果，其中將包括錯誤的詳細信息） –

這工作：1）建立在你的控制器的操作，並設置RouteConfig開始這個動作

public class HomeController : Controller 
{ 
    public ActionResult Index20() 
    { 
     MyViewModel m = new MyViewModel(); 
     return View(m); 
    }

沒有任何類型的母版頁中創建一個視圖

收藏此視圖模型：

public class MyViewModel 
{ 
    public string SourceCaseNumber { get; set; } 
}

由蒂姆·威爾遜Typeahead.js爲MVC 5種型號

更改爲添加HtmlHelpers.cs的命名空間System.Web.Mvc.Html和重建 -

轉到管理的NuGet包或PM控制檯，並添加到MVC 5項目

加入這個類：

public class CasesNorm 
{ 
    public string SCN { get; set; } 
}

將這些方法添加到您的控制器：

private List<Autocomplete> _AutocompleteSourceCaseNumber(string query) 
    { 
     List<Autocomplete> sourceCaseNumbers = new List<Autocomplete>(); 
     try 
     { 
      //You will goto your Database for CasesNorm, but if will doit shorthand here 

      //var results = db.CasesNorms.Where(p => p.SourceCaseNumber.Contains(query)). 
      // GroupBy(item => new { SCN = item.SourceCaseNumber }). 
      // Select(group => new { SCN = group.Key.SCN }). 
      // OrderBy(item => item.SCN). 
      // Take(10).ToList(); //take 10 is important 

      CasesNorm c1 = new CasesNorm { SCN = "11111111"}; 
      CasesNorm c2 = new CasesNorm { SCN = "22222222"}; 
      IList<CasesNorm> aList = new List<CasesNorm>(); 
      aList.Add(c1); 
      aList.Add(c2); 
      var results = aList; 

      foreach (var r in results) 
      { 
       // create objects 
       Autocomplete sourceCaseNumber = new Autocomplete(); 

       sourceCaseNumber.Name = string.Format("{0}", r.SCN); 
       sourceCaseNumber.Id = Int32.Parse(r.SCN); 
       sourceCaseNumbers.Add(sourceCaseNumber); 
      } 
     } 
     catch (EntityCommandExecutionException eceex) 
     { 
      if (eceex.InnerException != null) 
      { 
       throw eceex.InnerException; 
      } 
      throw; 
     } 
     catch 
     { 
      throw; 
     } 
     return sourceCaseNumbers; 
    } 

    public ActionResult AutocompleteSourceCaseNumber(string query) 
    { 
     return Json(_AutocompleteSourceCaseNumber(query), JsonRequestBehavior.AllowGet); 
    } 

    throw; 
    } 
    catch 
    { 
     throw; 
    } 
    return sourceCaseNumbers; 
} 

public ActionResult AutocompleteSourceCaseNumber(string query) 
{ 
    return Json(_AutocompleteSourceCaseNumber(query), JsonRequestBehavior.AllowGet); 
}

歸功於http://timdwilson.github.io/typeahead-mvc-model/

來源

2017-02-27 21:38:14 kblau

使用JQuery和數據庫自動完成 - APS.NET MVC

回答

相關問題