[英]jQuery Autocomplete, MVC4, and WebAPI
我從http://www.codeproject.com/Tips/639578/jQuery-Autocomplete-下載了有關自動填充文本框的教程的源代碼(例如,開始鍵入,並且下拉列表將顯示與前幾個字符匹配的選項) 。 MVC和WebAPI-我可以對其進行編譯,並且可以完美運行。
嘗試使其適應用戶名查找,但出現了問題。 一切都可以編譯,但下拉菜單不觸發。 我想念什么,但我不知道該怎么辦!
ApiController:
public class UserApiController : ApiController
{
[HttpGet]
public IEnumerable<ApplicationUser> GetUsers(string query = "")
{
using (var db = new ApplicationDbContext())
{
return String.IsNullOrEmpty(query) ? db.Users.ToList() :
db.Users.Where(p => p.UserName.Contains(query)).ToList();
}
}
}
控制器:
[HttpGet]
public ActionResult Search()
{
return View();
}
[HttpPost]
public ActionResult Search(ApplicationUser user)
{
return RedirectToAction("Details", "PrivateMessage", new { Id = user.Id });
}
public ActionResult Details(string Id)
{
using (var db = new ApplicationDbContext())
{
return View(db.Users.FirstOrDefault(p => p.Id == Id));
}
}
模型(時髦的名稱是要排除其他地方的沖突):
public class ComposeMyMessageModel
{
public string Id { get; set; }
public string Title { get; set; }
public string NewAddress { get; set; }
}
網頁:
@model MyWebsite.Models.ComposeMyMessageModel
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
@{
ViewBag.Title = "Compose";
}
@using (Html.BeginForm()){
@Html.HiddenFor(model => model.Id)
<input type="text" id="search" placeholder="Search for a product" required />
<input type="submit" value="Go" id="submit" />
}
<script type="text/javascript">
var url = '@Url.RouteUrl("DefaultApi", new { httproute = "", controller = "UserApi" })';
$('#search').autocomplete({
source: function (request, response) {
$.ajax({
url: url,
data: { query: request.term },
dataType: 'json',
type: 'GET',
success: function (data) {
response($.map(data, function (item) {
return {
label: item.Description,
value: item.Id
}
}));
}
})
},
select: function (event, ui) {
$('#search').val(ui.item.label);
$('#Id').val(ui.item.value);
return false;
},
minLength: 1
});
</script>
路由:
public static class WebApiConfig
{
public static void Register(HttpConfiguration config)
{
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
}
}
如果我沒有粘貼任何相關的代碼,那是因為我不知道它是否相關! 將相應地更新。 謝謝。
您可以在瀏覽器的“網絡”標簽中查看請求和響應以查看得到的內容嗎? 還要在成功函數中設置一個斷點以驗證數據。
那應該為您指明正確的方向。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.