使用JQuery& amp;数据库 - ASP.NET MVC

时间:2017-02-27 20:25:42

标签: jquery asp.net-mvc autocomplete

我道歉这是一种重复,但即使在查看有关该主题的其他几个问题后,我仍然无法让我的工作。

我想在表单中使用JQuery AutoComplete小部件来从数据库中的30K +记录中进行选择。我相信我的问题源于source函数的.autocomplete

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)

(其中&#39; mic&#39;是我尝试的搜索)。 我假设至少部分问题是我的控制器方法不是字符串&#34;搜索&#34;,当JS试图获得&#34; term&#34;。

提前感谢您的协助。

编辑: 我已经尝试过的事情:

  • 更改参数&#34;搜索&#34;到&#34;术语&#34;在我的控制器动作中
  • 我的控制器操作中没有任何参数
  • 更新@ 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.

更新:错误消息 Console Error

Network Error

更新:

感谢评论建议,通过网络查看错误 - &gt;检查响应给了我一个有意义的错误。我试图捕捉js调用无论如何我可以有2个控制器动作 - 一个带参数,一个带参数。这让代码感到困惑。我删除了没有参数的操作,现在控制器操作正常,DB.VendorLookUp返回一个Vendor_VM列表(控制器正确转换为JSON对象)。

但是,结果未正确返回 - 请参见下面的图3。这些选项不在下拉列表中,也不显示任何值。

  1. 如何更新cshtml / js以将Name传递给输入表单?
  2. 如何以适当的下拉方式显示值?
  3. AutoComplete Results not showing

1 个答案:

答案 0 :(得分:0)

这有效:1)在控制器中创建一个动作并设置RouteConfig以启动此动作

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

创建没有任何类型母版页的视图

添加此视图模型:

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

转到管理Nuget包或PM控制台并添加到MVC 5项目 - Tim Wilson的MVC 5模型的Typeahead.js

将添加的HtmlHelpers.cs的命名空间更改为System.Web.Mvc.Html并重建

添加此课程:

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/