如何在MVC5中使用Jquery在模式中实现自动完成

时间:2018-05-22 03:14:49

标签: javascript jquery asp.net-mvc modal-dialog jquery-ui-autocomplete

我有一个模态窗口,我想要显示Jquery UI的自动完成,这个对象位于一个表单中,然后通过提交按钮发送到控制器操作

modal

我主视图中的模态窗口:

<div class="modal fade" id="agregarProducto">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Agregar Material</h5>              
            </div>            
                <form id="myForm">
                    <label>Producto</label> &nbsp;&nbsp;
                    <input type="text" class="form-control" name="nombreproducto" id="nombreproducto" autofocus="" />
                    <br />
                    <label>Precio Producto</label> &nbsp;&nbsp;
                    <br />
                    <input type="text" class="form-control" name="precio" id="idprecioproducto" />
                </form>
            </div>
            <div class="modal-footer">
                <input type="submit" value="Agregar Material" class="btn btn-primary" id="btnSubmit" />
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>

我的主视图中的Javascript代码调用了一个查找产品的JsonResult方法:

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
<script>
        $(function () {
            $("#nombreproducto").autocomplete({
                source: "/Recepcions/BuscarProducto"
            });
        });

    </script>
}

我的控制员:

public JsonResult BuscarProducto(string term)
{
    using (DataContext db = new DataContext())
    {
        var resultado = db.Productoes.Where(x => x.v_Nombre.Contains(term)).Select(y => y.v_Nombre).Take(10).ToList();
        return Json(resultado, JsonRequestBehavior.AllowGet);
    }
}

如何通过按下调用我的模态窗口的按钮来确定

<a href="#" class="btn btn-primary" data-toggle="modal" data-target="#agregarProducto">Agregar Material </a>

我的模态窗口可以显示自动完成我的产品吗?

我必须从我的按钮调用该事件?我在哪里放Jquery代码?这是我第一次开发类似的东西......我必须处理哪些Jquery事件?

PS:这个实现转到我的控制器的JsonResult,但显然它没有显示任何内容,为什么?

我的任何例子或帮助?

1 个答案:

答案 0 :(得分:0)

您使用的是哪个版本?如果您使用的是基于JQuery UI Autocomplete文档的这些版本,则由于冲突,这可能对您的引导模式不起作用。

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

尝试在您的Javascript代码上使用这些版本,它可以正常运行:

 <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
 <script src="https://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>

以下是基于您的代码的屏幕截图:

enter image description here