none
Ayuda con Autocompletar de c# y mvc RRS feed

  • Pregunta

  • Resulta que estoy desarrollando una aplicación Mvc con la Platilla AdminLtE, pues no he podido implementar el método autocompletar de jquery, quería ver si pueden echarme una mano.

    les explico 

    1.-  este el modelo 

    using System;
    using System.Collections.Generic;
    using System.ComponentModel.DataAnnotations;
    using System.Linq;
    using System.Text;
    using System.Threading.Tasks;
    
    namespace SISTEMADBT.Models
    {    
        public partial class CodigoPostal
        {
            [Key]
            public int CodigoPostalId { get; set; }
    
            [Required]
            public int CodPostal { get; set; }
    
            [Required]
            public string Colonia { get; set; }
    
            [Required]
            public string Municipio { get; set; }
    
            [Required]
            public string Estado { get; set; }
    
            public virtual ICollection<MaestroProveedor> List_Proveedores { get; set; }
        }
    }
    

    y esta es la vista.

    @model SISTEMADBT.Models.EditarProveedor  
    
    @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()
        <div>
            <div class="box box-success">
                <div class="box-header with-border">
                    <h3 class="box-title">@Model.Proveedor.RazonSocial</h3>
                    <div class="box-tools pull-right">
                        <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                    </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body" style="display: block;">
                    <div class="row">
                        <div class="col-md-12">
                            <!--Contenido-->
                            <div class="col-xs-12 col-sm-6 col-sm-6 col-lg-12">
                                <div class="nav-tabs-custom">
                                    <ul class="nav nav-tabs">
                                        <li class="active"><a href="#Informacion" data-toggle="tab" aria-expanded="false">Información General</a></li>
                                        <li class=""><a href="#RepresentanteLegal" data-toggle="tab" aria-expanded="false">Representante Legal</a></li>
                                        <li class=""><a href="#Inversionistas" data-toggle="tab" aria-expanded="true">Inversionistas</a></li>
                                    </ul>
                                    <div class="tab-content">
                                        <div class="tab-pane active" id="Informacion">
                                            <!-- Post -->
                                            <div class="post">
                                                <!--Primera Fila captura-->
                                                <div class="row">
                                                    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                                                        <div class="form-group">
                                                            @Html.LabelFor(model => model.Proveedor.RfcProveedor, htmlAttributes: new { @class = "control-label" })
                                                            @Html.EditorFor(model => model.Proveedor.RfcProveedor, new { htmlAttributes = new { @class = "form-control", placeholder = Html.DisplayNameFor(model => model.Proveedor.RfcProveedor), autocomplete = "off" } })
                                                            @Html.ValidationMessageFor(model => model.Proveedor.RfcProveedor, "", new { @class = "text-danger" })
                                                        </div>
                                                    </div>
                                                    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                                                        <div class="form-group">
                                                            @Html.LabelFor(model => model.Proveedor.EstratificacionId, htmlAttributes: new { @class = "control-label" })
                                                            @Html.DropDownList("ESTRATIFICACIONID", null, htmlAttributes: new { @class = "form-control", })
                                                            @Html.ValidationMessageFor(model => model.Proveedor.EstratificacionId, "", new { @class = "text-danger" })
                                                        </div>
                                                    </div>
    
    
                                                </div>
    
                                                <div class="row">
                                                    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                                                        <div class="form-group">
                                                            @Html.LabelFor(model => model.Proveedor.Calle, htmlAttributes: new { @class = "control-label" })
                                                            @Html.EditorFor(model => model.Proveedor.Calle, new { htmlAttributes = new { @class = "form-control", placeholder = Html.DisplayNameFor(model => model.Proveedor.Calle), autocomplete = "off" } })
                                                            @Html.ValidationMessageFor(model => model.Proveedor.Calle, "", new { @class = "text-danger" })
                                                        </div>
                                                    </div>
    
                                                    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                                                        <div class="form-group">
                                                            @Html.LabelFor(model => model.Proveedor.CodigoPostal, htmlAttributes: new { @class = "control-label" })
                                                            @Html.EditorFor(model => model.Proveedor.CodigoPostal, new { htmlAttributes = new { @class = "form-control", placeholder = Html.DisplayNameFor(model => model.Proveedor.CodigoPostal), autocomplete = "off" } })
                                                            @Html.ValidationMessageFor(model => model.Proveedor.CodigoPostal, "", new { @class = "text-danger" })
                                                        </div>
                                                    </div>
    
                                                    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                                                        <div class="form-group">
                                                            @Html.LabelFor(model => model.Proveedor.Colonia, htmlAttributes: new { @class = "control-label" })
                                                            @Html.EditorFor(model => model.Proveedor.Colonia, new { htmlAttributes = new { @class = "form-control", placeholder = Html.DisplayNameFor(model => model.Proveedor.Colonia), autocomplete = "off" } })
                                                            @Html.ValidationMessageFor(model => model.Proveedor.Colonia, "", new { @class = "text-danger" })
                                                        </div>
                                                    </div>
    
    
    
                                                </div>
    
                                                <div class="row">
                                                    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                                                        <div class="form-group">
                                                            @Html.LabelFor(model => model.Proveedor.Delegacion, htmlAttributes: new { @class = "control-label" })
                                                            @Html.EditorFor(model => model.Proveedor.Delegacion, new { htmlAttributes = new { @class = "form-control", placeholder = Html.DisplayNameFor(model => model.Proveedor.Delegacion), autocomplete = "off" } })
                                                            @Html.ValidationMessageFor(model => model.Proveedor.Delegacion, "", new { @class = "text-danger" })
                                                        </div>
                                                    </div>
    
                                                    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                                                        <div class="form-group">
                                                            @Html.LabelFor(model => model.Proveedor.Municipio, htmlAttributes: new { @class = "control-label" })
                                                            @Html.EditorFor(model => model.Proveedor.Municipio, new { htmlAttributes = new { @class = "form-control", placeholder = Html.DisplayNameFor(model => model.Proveedor.Municipio), autocomplete = "off" } })
                                                            @Html.ValidationMessageFor(model => model.Proveedor.Municipio, "", new { @class = "text-danger" })
                                                        </div>
                                                    </div>
    
                                                    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                                                        <div class="form-group">
                                                            @Html.LabelFor(model => model.Proveedor.Estado, htmlAttributes: new { @class = "control-label" })
                                                            @Html.EditorFor(model => model.Proveedor.Estado, new { htmlAttributes = new { @class = "form-control", placeholder = Html.DisplayNameFor(model => model.Proveedor.Estado), autocomplete = "off" } })
                                                            @Html.ValidationMessageFor(model => model.Proveedor.Estado, "", new { @class = "text-danger" })
                                                        </div>
                                                    </div>
    
    
                                                </div>
    
                                                <div class="row">
                                                    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                                                        <div class="form-group">
                                                            @Html.LabelFor(model => model.Proveedor.Telefono, htmlAttributes: new { @class = "control-label" })
                                                            @Html.EditorFor(model => model.Proveedor.Telefono, new { htmlAttributes = new { @class = "form-control", placeholder = Html.DisplayNameFor(model => model.Proveedor.Telefono), autocomplete = "off" } })
                                                            @Html.ValidationMessageFor(model => model.Proveedor.Telefono, "", new { @class = "text-danger" })
                                                        </div>
                                                    </div>
    
                                                    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                                                        <div class="form-group">
                                                            @Html.LabelFor(model => model.Proveedor.Telefono2, htmlAttributes: new { @class = "control-label" })
                                                            @Html.EditorFor(model => model.Proveedor.Telefono2, new { htmlAttributes = new { @class = "form-control", placeholder = Html.DisplayNameFor(model => model.Proveedor.Telefono2), autocomplete = "off" } })
                                                            @Html.ValidationMessageFor(model => model.Proveedor.Telefono2, "", new { @class = "text-danger" })
                                                        </div>
                                                    </div>
    
                                                    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                                                        <div class="form-group">
                                                            @Html.LabelFor(model => model.Proveedor.Mail, htmlAttributes: new { @class = "control-label" })
                                                            @Html.EditorFor(model => model.Proveedor.Mail, new { htmlAttributes = new { @class = "form-control", placeholder = Html.DisplayNameFor(model => model.Proveedor.Mail), autocomplete = "off" } })
                                                            @Html.ValidationMessageFor(model => model.Proveedor.Mail, "", new { @class = "text-danger" })
                                                        </div>
                                                    </div>
    
    
                                                </div>
    
                                                <div class="row">
                                                    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                                                        <div class="form-group">
                                                            @Html.LabelFor(model => model.Proveedor.Escritura, htmlAttributes: new { @class = "control-label" })
                                                            @Html.EditorFor(model => model.Proveedor.Escritura, new { htmlAttributes = new { @class = "form-control", placeholder = Html.DisplayNameFor(model => model.Proveedor.Escritura), autocomplete = "off" } })
                                                            @Html.ValidationMessageFor(model => model.Proveedor.Escritura, "", new { @class = "text-danger" })
                                                        </div>
                                                    </div>
    
                                                    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                                                        <div class="form-group">
                                                            @Html.LabelFor(model => model.Proveedor.Notario, htmlAttributes: new { @class = "control-label" })
                                                            @Html.EditorFor(model => model.Proveedor.Notario, new { htmlAttributes = new { @class = "form-control", placeholder = Html.DisplayNameFor(model => model.Proveedor.Notario), autocomplete = "off" } })
                                                            @Html.ValidationMessageFor(model => model.Proveedor.Notario, "", new { @class = "text-danger" })
                                                        </div>
                                                    </div>
    
                                                    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                                                        <div class="form-group">
                                                            @Html.LabelFor(model => model.Proveedor.NumeroNotaria, htmlAttributes: new { @class = "control-label" })
                                                            @Html.EditorFor(model => model.Proveedor.NumeroNotaria, new { htmlAttributes = new { @class = "form-control", placeholder = "Número Notaria", autocomplete = "off" } })
                                                            @Html.ValidationMessageFor(model => model.Proveedor.NumeroNotaria, "", new { @class = "text-danger" })
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- /.tab-pane -->
    
                                        <div class="tab-pane" id="RepresentanteLegal">
                                            <!-- The timeline -->
                                            @if (Model.List_RepresentanteLegal.Count >= 0)
                                            {
                                                @Html.Action("ListApoderado", new { id = Model.Proveedor.MaestroProveedorId})                                            
                                            }
                                        </div>
                                        <!-- /.tab-pane -->
    
                                        <div class="tab-pane" id="Inversionistas">
                                            @if (Model.List_RepresentanteLegal.Count >= 0)
                                            {
                                                @Html.Action("ListInversionistas", new { id = Model.Proveedor.MaestroProveedorId })
                                            }
                                        </div>
                                        <!-- /.tab-pane -->
                                    </div>
                                    <!-- /.tab-content -->
                                </div>
                                <!-- /.nav-tabs-custom -->
                            </div>
                            <!--Fin-Contenido-->
                        </div>
    
                    </div><!-- /.row -->
                </div>
                <!-- /.box-body -->
            </div>
            <div class="pull-right">
                @Html.ActionLink("Regresar", "Index", null, new { @class = "btn btn-success" })
                <input type="submit" value="Guardar Cambios" class="btn btn-info" />
            </div>
        </div>
    }
    

    El objeto donde quiero que se ejecute el autocompletar es este que esta dentro de la vista

    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                                                        <div class="form-group">
                                                            @Html.LabelFor(model => model.Proveedor.CodigoPostal, htmlAttributes: new { @class = "control-label" })
                                                            @Html.EditorFor(model => model.Proveedor.CodigoPostal, new { htmlAttributes = new { @class = "form-control", placeholder = Html.DisplayNameFor(model => model.Proveedor.CodigoPostal), autocomplete = "off" } })
                                                            @Html.ValidationMessageFor(model => model.Proveedor.CodigoPostal, "", new { @class = "text-danger" })
                                                        </div>
                                                    </div>

    y el js donde pido  que se ejecute la busqueda es.

    $(document).ready(function () {
        $("#CodigoPostal").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "/Generic/AutoCompleteCodigoPostal",
                    type: "POST",
                    dataType: "json",
                    data: { Prefix: request.term },
                    success: function (data) {
                        response($.map(data, function (item) {
                            return { label: item.CodigoPostalId, value: item.CodigoPostal };
                        }))
    
                    }
                })
            },
            messages: {
                noResults: "", results: ""
            }
        });
    });

    y el ActionResult es :

     public JsonResult AutoCompleteCodigoPostal(string Prefix)
            {
                var results = (from p in db.CodigoPostal
                               where (p.CodPostal.ToString()).Contains(Prefix)
                               orderby p.CodPostal
                               select new { p.CodigoPostalId, p.CodPostal }).Take(10).ToList();
    
                return Json(results, JsonRequestBehavior.AllowGet);
            }

    El Error que me manda en la consola al depurar es el siguiente:

    TypeError: $(…).autocomplete is not a function

    Podrían Ayudarme por Favor. de antemano muchas gracias


    Horacio Xochitemol Bautista

    martes, 31 de enero de 2017 18:28

Todas las respuestas

  • Mi recomendación es que en vez de utilizar el autocomplete, hagas una función jquery donde cuando haga change, valla a tu controller y recupere la información.

    es decir :

    $('#nombredetuforeditor').change(function (){

      // aqui dentro el ajax que llama tu controller.

    });


    Si mi respuesta te ha ayudado a resolver tus problemas, Selecciona "Proponer como respuesta"

    Blog
    J.Joaquin

    miércoles, 1 de febrero de 2017 17:38
  • Hola

    El autocomplete es una función de jquery ui, tienes que agregar la librería de jquery y después la línea con la librería de jquery ui.

    Como tienes las referencias a tus scripts?

    Saludos

    miércoles, 1 de febrero de 2017 19:30
  • Que tal AMigos gracias por responder.

    las Librerias las cargo en el BundleConfig

     public class BundleConfig
        {
            // Para obtener más información sobre Bundles, visite http://go.microsoft.com/fwlink/?LinkId=301862
            public static void RegisterBundles(BundleCollection bundles)
            {
                
                bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                     "~/Scripts/jquery-{version}.js"));
                
                bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                    "~/Scripts/jquery-ui-{version}.js",
                    "~/Scripts/jquery-ui.unobtrusive-{version}.js"));
    
               
                bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                            "~/Scripts/jquery.validate*"));
    
                           
                // Utilice la versión de desarrollo de Modernizr para desarrollar y obtener información. De este modo, estará
                // preparado para la producción y podrá utilizar la herramienta de compilación disponible en http://modernizr.com para seleccionar solo las pruebas que necesite.
                bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                            "~/Scripts/modernizr-*"));
    
                
                            
                /*estilos para bootstrop y el sitio*/
                bundles.Add(new StyleBundle("~/Content/css").Include(
                          "~/Content/bootstrap.css",                      
                          "~/Content/site.css",
                          "~/Content/jquery-ui.css",
                          "~/Content/jquery.ui.autocomplete.css",                      
                          "~/Content/PagedList.css",
                          "~/Content/bootstrapValidator.css",
                          "~/Content/bootstrap-datetimepicker.css",
                          "~/Content/datepicker.css",
                          "~/Content/bootstrap-datetimepicker.min.css"
                          ));
    
                bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                        "~/Scripts/bootstrap.js",
                        "~/Scripts/moment.js",
                        "~/Scripts/bootstrap-datepicker.js",
                        "~/Scripts/respond.js",                                        
                        //"~/Scripts/bootstrap-datetimepicker.js",
                        "~/Scripts/bootstrapValidator.js",
                        "~/Scripts/Licitacion/Proveedores.js",
                        "~/Scripts/Licitacion/Licitacion.js",
                        "~/Scripts/DBT.js"));
            }
        }

    Estos son Script que tengo


    Horacio Xochitemol Bautista

    miércoles, 1 de febrero de 2017 20:48
  • Hola

    En tu vista o en tu layout como esta la implementación de los bundles?

    Saludos

    miércoles, 1 de febrero de 2017 21:27
  • muchas Gracias por Contestar en el Layout 
        @Scripts.Render("~/bundles/modernizr")
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/jqueryui")
        @Scripts.Render("~/bundles/bootstrap")    
        @Scripts.Render("~/bundles/jqueryval")       
        @Scripts.Render("~/bundles/bootstrap")
        @Scripts.Render("~/bundles/typeahead")
        @Scripts.Render("~/bundles/typeahead-bloodhound")
        @Scripts.Render("~/bundles/typeahead-jquery")
        
        


    Horacio Xochitemol Bautista

    miércoles, 1 de febrero de 2017 22:26