Question

我想使用jQuery-ui自动完成在MVC C＃View中显示自动完成文本框，这是我的视图代码

@{
    ViewBag.Title = "Index";
}
<script src ="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

    <script type="text/javascript">
        $(function () {
            $("#SearchString").autocomplete({
                source: "/Borrar/autocompletar",
                minLength: 1,
                select: function (event, ui) {
                    if (ui.item) {
                        $("#SearchString").val(ui.item.value);
                    }
                }
            });
        });
    </script>
    <div class="container col-md-10 col-md-offset-3">
        <h2>Autocompletar</h2>
        @using (Html.BeginForm())
        {
            <p>
                Empresa: @Html.TextBox("SearchString")
                <input type="submit" value="Search" />
            </p>
        }
    </div>

这是应该填充文本框的控制器代码

 public JsonResult autocompletar(string prefix)
        {
            List<GFC_Site.ViewModels.EmpresaAutocomplete> listado = new List<GFC_Site.ViewModels.EmpresaAutocomplete>();
            ProxyGFC.ServiceGFCClient cliente = new ProxyGFC.ServiceGFCClient();
            List<WcfService.Entidades.EmpresaAutocomplete> listadoBase = new List<WcfService.Entidades.EmpresaAutocomplete>();
            listadoBase = cliente.Autocompletar(prefix);
            foreach (var item in listadoBase)
            {
                GFC_Site.ViewModels.EmpresaAutocomplete dato = new ViewModels.EmpresaAutocomplete();
                dato.empresa = item.empresa;
                //dato.np = item.np;
                listado.Add(dato);
            }
            return Json(listado, JsonRequestBehavior.AllowGet);

        }

其中（GFC_Site.ViewModels.EmpresaAutocomplete）是只有一个字符串属性（empresa）的类，（ProxyGFC.ServiceGFCClient cliente）是与WCF服务器的连接，WCF是连接应用程序与数据库的连接（List listadoBase）是WCF中的一个具有两个属性（empresa和np）的类。

这是WCF中检索我想要在文本框中显示的信息的方法

public List<EmpresaAutocomplete> Autocompletar(string prefix)
{
    OdbcCommand cmd = Helper.Commandos.CrearComando();
    cmd.CommandText = "select numero_patronal, nombre_empresa from empresas where estado= ? and nombre_empresa like ?";
    cmd.Parameters.Add("@estado", OdbcType.VarChar).Value = "1";
    cmd.Parameters.AddWithValue("@empresa", prefix + "%");
    List<EmpresaAutocomplete> data = new List<EmpresaAutocomplete>();
    try
    {
        cmd.Connection.Open();
        var reader = cmd.ExecuteReader();
        while (reader.Read())
        {
            EmpresaAutocomplete datos = new EmpresaAutocomplete();
            datos.np = reader["numero_patronal"].ToString();
            datos.empresa = reader["nombre_empresa"].ToString();
            data.Add(datos);
        }

    }
    catch (Exception ex)
    {

        throw new ApplicationException("Excepcion :", ex);
    }
    return data;

}

好吧，我的问题是文本框没有显示任何内容，实际上它被冻结了

你可以告诉我你的问题是什么吗？

Answer 1

首先，让我们看看自动完成功能，从文本输入开始：

<label for=”somevalue”>Some value:</label><input type=”text” id=”somevalue” name=”somevalue”/>

如果我们添加对jQuery UI脚本文件和css文件的引用，我们可以在视图中添加一个脚本块：

<script type=”text/javascript” language=”javascript”> 
$(document).ready(function () { 
    $(‘#somevalue’).autocomplete({ 
        source: ‘@Url.Action(“Autocomplete”)’ 
    }); 
}) </script>

此脚本块标识由id输入的文本，然后调用自动完成功能以连接此DOM元素的自动完成行为。我们传递一个URL来识别数据的来源。对于这篇文章，我简单地创建了一个返回JSON数据的ASP.NET MVC动作（如下所示）。请注意，在视图中，我使用Url.Action在路由表中查找此操作的URL - 避免对URL进行硬编码的诱惑，因为这会重复路由表并使以后很难更改路由。

public ActionResult Autocomplete(string term) 
{ 
var items = new[] {“Apple”, “Pear”, “Banana”, “Pineapple”, “Peach”};

var filteredItems = items.Where( 
    item => item.IndexOf(term, StringComparison.InvariantCultureIgnoreCase) >= 0 
    ); 
return Json(filteredItems, JsonRequestBehavior.AllowGet); 
}

https://blogs.msdn.microsoft.com/stuartleeks/2012/04/23/asp-net-mvc-jquery-ui-autocomplete/

jQueryu ui autocomplete在MVC c＃中没有显示任何内容

1 个答案: