Question

这是我的观点和控制器。我已经将代码从c＃转换为vb代码在C＃中完美运行但我不知道为什么这个java脚本在vb中不起作用。我开始调试但是当我在搜索框中输入内容时，控制器永远不会被调用。

查看代码

@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

Answer 1

jQuery UI有一个AutoComplete小部件。自动完成小部件非常好并且可以直接使用。在这篇文章中，如何将AutoComplete小部件与ASP.NET MVC应用程序集成。

第一步是添加jQuery脚本和样式。使用ASP.NET MVC 4，以下代码可以完成工作：

@Styles.Render("~/Content/themes/base/css")
@Scripts.Render("~/bundles/jquery")    
@Scripts.Render("~/bundles/jqueryui")

使用AutoComplete小部件也很简单。您必须添加文本框并将AutoComplete小部件附加到文本框。窗口小部件运行所需的唯一参数是source。对于此示例，我们将从MVC操作方法获取AutoComplete功能的数据。

$(document).ready(function () {
$('#tags').autocomplete(
    {
        source: '@Url.Action("TagSearch", "Home")'
});
})

在上面的代码中，带有id = tags的文本框附带了AutoComplete小部件。源指向HomeController中的TagSearch操作的URL：/ Home / TagSearch。文本框的HTML如下：

<input type="text" id="tags" />

当用户在文本框中键入一些文本时，将使用请求正文中的参数调用操作方法 - 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);
}

在mvc中自动完成文本框

1 个答案: