vb.net MVC中文本框的自动完成
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29605278/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Autocomplete for textbox in mvc
提问by Aayushi Jain
This is my view and controller. I have converted code from c# to vb the code was working perfectly in C# but i dont know why this java script is not working in vb. I started debugging but controllers never get called when i type something in search box.
这是我的视图和控制器。我已将代码从 c# 转换为 vb 代码在 C# 中运行良好，但我不知道为什么这个 java 脚本在 vb 中不起作用。我开始调试，但当我在搜索框中键入内容时，控制器永远不会被调用。
Code for View
查看代码
@ModelType PrudentHealthCare.Product
@Code
Layout = Nothing
End Code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Search</title>
</head>
<body>
<div>
@Using (Html.BeginForm())
@Html.HiddenFor(Function(model) model.id)
@<input type="text" id="search" placeholder="Search for a product" required />
@<input type="submit" value="Go" id="submit" />
End Using
</div>
</body>
</html>
<link href="~/Content/AutoComplete/jquery-ui.css" rel="stylesheet" />
<script src="~/Content/AutoComplete/jquery-ui.js"></script>
<script src="~/Content/AutoComplete/jquery-1.9.1.js"></script>
<script type="text/javascript">
var url = '@Url.RouteUrl( "DefaultApi" , New With { .httproute = "", .controller = "ProductApi" })';
$('#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>
ProductApiController
产品接口控制器
Imports System.Web.Mvc
Namespace Controllers
Public Class ProductApiController
Inherits Controller
<HttpGet>
Public Function GetProducts(Optional query As String = "") As IEnumerable(Of Product)
Dim xyz As String
xyz = query
End Function
End Class
End Namespace
回答by Parth Akbari
jQuery UI has an AutoCompletewidget. The autocomplete widget is quite nice and straight forward to use. In this post, how to integrate the AutoComplete widget with an ASP.NET MVC application.
jQuery UI 有一个自动完成小部件。自动完成小部件非常好用且直接使用。在这篇文章中，如何将 AutoComplete 小部件与 ASP.NET MVC 应用程序集成。
The first step is to add the jQuery scripts and styles. With ASP.NET MVC 4, the following code does the work:
第一步是添加 jQuery 脚本和样式。使用 ASP.NET MVC 4，以下代码完成了这项工作：
@Styles.Render("~/Content/themes/base/css")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
Using the AutoComplete widget is also simple. You will have to add a textbox and attach the AutoComplete widget to the textbox. The only parameter that is required for the widget to function is source. For this example, we will get the data for the AutoComplete functionality from a MVC action method.
使用自动完成小部件也很简单。您必须添加一个文本框并将 AutoComplete 小部件附加到文本框。小部件运行所需的唯一参数是源。对于此示例，我们将从 MVC 操作方法获取 AutoComplete 功能的数据。
$(document).ready(function () {
$('#tags').autocomplete(
{
source: '@Url.Action("TagSearch", "Home")'
});
})
In the above code, the textbox with id=tags is attached with the AutoComplete widget. The source points to the URL of TagSearch action in the HomeController: /Home/TagSearch. The HTML of the textbox is below:
在上面的代码中，带有 id=tags 的文本框与 AutoComplete 小部件相连。源指向 HomeController 中 TagSearch 操作的 URL：/Home/TagSearch。文本框的 HTML 如下：
<input type="text" id="tags" />
When the user types some text in the textbox, the action method - TagSearch is called with a parameter in the request body. The parameter name is term. So, your action method should have the following signature:
当用户在文本框中键入一些文本时，将使用请求正文中的参数调用操作方法 - TagSearch。参数名称是 term。因此，您的操作方法应具有以下签名：
public ActionResult TagSearch(string term)
{
// Get Tags from database
string[] tags = { "ASP.NET", "WebForms",
"MVC", "jQuery", "ActionResult",
"MangoDB", "Java", "Windows" };
return this.Json(tags.Where(t => t.StartsWith(term)),
JsonRequestBehavior.AllowGet);
}
