Asp.net 当用户输入文本时显示PartialView？像自动完成功能？
我在asp.net上看了这些视频，在网上看了看，什么也没找到 我在一个网站上有一个搜索框，可以搜索食谱。每个食谱都有一个你正在制作的图像、标题和类型（甜点、午餐、晚餐） 所有这些项目都在一个数据服务中，我可以对其进行查询并获得他们正在搜索的项目的列表 现在，我正在使用VB的ASP.NETMVC3 w/Razors来创建这个网站，我试图在用户输入文本时自动完成一些操作 当用户输入文本时，它将在搜索控制器中调用ActionResult。它查询数据服务并将所有搜索结果放在一个模型中。对于该模型，我返回一个部分视图，结果，包括模型 它应该显示部分视图，但当用户删除所有文本时，我将删除部分视图 下面是我实现的。在布局视图中Asp.net 当用户输入文本时显示PartialView？像自动完成功能？,asp.net,asp.net-mvc,vb.net,autocomplete,partial-views,Asp.net,Asp.net Mvc,Vb.net,Autocomplete,Partial Views,我在asp.net上看了这些视频，在网上看了看，什么也没找到 我在一个网站上有一个搜索框，可以搜索食谱。每个食谱都有一个你正在制作的图像、标题和类型（甜点、午餐、晚餐） 所有这些项目都在一个数据服务中，我可以对其进行查询并获得他们正在搜索的项目的列表 现在，我正在使用VB的ASP.NETMVC3 w/Razors来创建这个网站，我试图在用户输入文本时自动完成一些操作 当用户输入文本时，它将在搜索控制器中调用ActionResult。它查询数据服务并将所有搜索结果放在一个模型中。对于该模型，我返回
@Code
Using Ajax.BeginForm("FastSearchResults", "Search", "", New AjaxOptions With {.UpdateTargetId = "searchitems", .HttpMethod = "GET", .InsertionMode = InsertionMode.Replace})
Html.BeginForm("Results", "Search", FormMethod.Get)
@<input type="text" name="id" id="searchbox" data-autocomplete="@Url.Action("FastSearchResults", "Search")" class="recipevox" value="Search Movie Title or Actor Here" />
Html.EndForm()
End Using
End Code
<span id="searchitems"></span>
$(document).ready(function () {
$(":input[data-autocomplete]").autocomplete({ source: $(this).attr("data-autocomplete") }); });
我很好奇为什么这不起作用，我还缺少什么？您的
FastSearchResults<HttpPost()>
Function SearchResults(ByVal id As String) As ActionResult
' TODO: Query your service and return a list of model containing Id and Value properties
Dim model = Enumerable.Range(1, 10).Select(Function(x) New With {.Id = x, .Value = "item" & x})
Return Json(model)
End Function
<script src="@Url.Content("~/Scripts/jquery-1.5.1.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.js")" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$(":input[data-autocomplete]").autocomplete({
source: function (request, response) {
$.ajax({
url: this.element.attr('data-autocomplete'),
type: 'POST',
data: { id: request.term },
success: function (result) {
response(
$.map(result, function (item) {
return {
// Here we must map between the server side JSON
// and the autocomplete expected format
label: item.Value,
id: item.Id
};
})
);
}
});
},
minLength: 2
});
});
</script>
函数SearchResults（ByVal id作为字符串）作为ActionResult
'TODO:查询您的服务并返回包含Id和值属性的模型列表
Dim model=Enumerable.Range（1，10）。选择（函数（x）使用{.Id=x、.Value=“item”&x}新建）
返回Json（模型）
端函数
<HttpPost()>
Function SearchResults(ByVal id As String) As ActionResult
' TODO: Query your service and return a list of model containing Id and Value properties
Dim model = Enumerable.Range(1, 10).Select(Function(x) New With {.Id = x, .Value = "item" & x})
Return Json(model)
End Function
<script src="@Url.Content("~/Scripts/jquery-1.5.1.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.js")" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$(":input[data-autocomplete]").autocomplete({
source: function (request, response) {
$.ajax({
url: this.element.attr('data-autocomplete'),
type: 'POST',
data: { id: request.term },
success: function (result) {
response(
$.map(result, function (item) {
return {
// Here we must map between the server side JSON
// and the autocomplete expected format
label: item.Value,
id: item.Id
};
})
);
}
});
},
minLength: 2
});
});
</script>
$（函数（）{
$（“：输入[数据自动完成]”）。自动完成({
来源：功能（请求、响应）{
$.ajax({
url:this.element.attr（'data-autocomplete'），
键入：“POST”，
数据：{id:request.term}，
成功：功能（结果）{
回应(
$.map（结果、功能（项目）{
返回{
//这里我们必须在服务器端JSON之间进行映射
//和自动完成预期格式
标签：item.Value，
id:item.id
};
})
);
}
});
},
最小长度：2
});
});
至于返回部分视图的其他控制器操作，您可以保留它，并且在使用AJAX提交表单时将执行它，其结果将被注入
#searchitemsFastSearchResults<HttpPost()>
Function SearchResults(ByVal id As String) As ActionResult
' TODO: Query your service and return a list of model containing Id and Value properties
Dim model = Enumerable.Range(1, 10).Select(Function(x) New With {.Id = x, .Value = "item" & x})
Return Json(model)
End Function
<script src="@Url.Content("~/Scripts/jquery-1.5.1.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.js")" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$(":input[data-autocomplete]").autocomplete({
source: function (request, response) {
$.ajax({
url: this.element.attr('data-autocomplete'),
type: 'POST',
data: { id: request.term },
success: function (result) {
response(
$.map(result, function (item) {
return {
// Here we must map between the server side JSON
// and the autocomplete expected format
label: item.Value,
id: item.Id
};
})
);
}
});
},
minLength: 2
});
});
</script>
函数SearchResults（ByVal id作为字符串）作为ActionResult
'TODO:查询您的服务并返回包含Id和值属性的模型列表
Dim model=Enumerable.Range（1，10）。选择（函数（x）使用{.Id=x、.Value=“item”&x}新建）
返回Json（模型）
端函数
<HttpPost()>
Function SearchResults(ByVal id As String) As ActionResult
' TODO: Query your service and return a list of model containing Id and Value properties
Dim model = Enumerable.Range(1, 10).Select(Function(x) New With {.Id = x, .Value = "item" & x})
Return Json(model)
End Function
<script src="@Url.Content("~/Scripts/jquery-1.5.1.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.js")" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$(":input[data-autocomplete]").autocomplete({
source: function (request, response) {
$.ajax({
url: this.element.attr('data-autocomplete'),
type: 'POST',
data: { id: request.term },
success: function (result) {
response(
$.map(result, function (item) {
return {
// Here we must map between the server side JSON
// and the autocomplete expected format
label: item.Value,
id: item.Id
};
})
);
}
});
},
minLength: 2
});
});
</script>
$（函数（）{
$（“：输入[数据自动完成]”）。自动完成({
来源：功能（请求、响应）{
$.ajax({
url:this.element.attr（'data-autocomplete'），
键入：“POST”，
数据：{id:request.term}，
成功：功能（结果）{
回应(
$.map（结果、功能（项目）{
返回{
//这里我们必须在服务器端JSON之间进行映射
//和自动完成预期格式
标签：item.Value，
id:item.id
};
})
);
}
});
},
最小长度：2
});
});
至于返回部分视图的其他控制器操作，您可以保留它，当使用AJAX提交表单时将执行该操作，并将其结果注入
#searchitems