Cómo crear un autocompletador con Entity Framework

En este tutorial crearemos un elemento web que contenga un autocompletador de datos extraidos de WCF (JSON) que se almacenarán en la entidad seleccionada a través EntityFramework. ¿Por qué os traigo este tutorial? Os cuento... Mi problema surgió porque no pude encontrar un control que se encargara de las entidades, las cuales necesitaba para seleccionar datos de una lista y ser capaz de almacenarlos en forma de entidad. Encontré algunos ejemplos en la red, pero ninguno de ellos cumplía con el ciclo de almacenamiento de la entidad, por lo que no tuve otra opción que construirlo desde cero. También necesitaba otra característica, que pudiera ser utilizado en un gridview para su edición. El problema actual con un combobox es que al cargar la página, se cargan necesariamente todos los datos. El control de búsqueda está optimizado para responder a través de (JSON), así como la consulta (LINQ - AsNoTracking - AsParallel).

Utilizaremos...

• Visual Studio 2013 - Update 5
• AjaxControlToolkit versión=15.1.4.0
• EntityFramework versión=6.1.3
• jQuery versión=2.1.4
• Newtonsoft.Json versión=7.0.1
• Windows Communication Foundation

Cómo llevarlo a cabo...

Cuando el control se ha inicializado, cargamos dinámicamente los archivos JavaScript a los eventos OnClientPopulating, OnClientHiding, OnClientPopulated, OnClientItemSelected.

Private Sub Page_Init(sender As Object, e As EventArgs) Handles Me.Init

        Dim Evento_OnClientPopulating As String
        Dim Evento_OnClientCompleted As String
        Dim Evento_OnClientPopulated As String
        Dim Evento_OnClientItemSelected As String

        Evento_OnClientPopulating = _
        Me.AutoCompleteExtenderClients.ClientID + "_OnClientPopulating"

        Evento_OnClientCompleted = _
        Me.AutoCompleteExtenderClients.ClientID + "_OnClientCompleted"

        Evento_OnClientPopulated = _
        Me.AutoCompleteExtenderClients.ClientID + "_OnClientPopulated"

        Evento_OnClientItemSelected = _
        Me.AutoCompleteExtenderClients.ClientID + "_OnClientItemSelected"

        AutoCompleteExtenderClients.OnClientPopulating = _
        Me.AutoCompleteExtenderClients.ClientID + "_OnClientPopulating"

        AutoCompleteExtenderClients.OnClientHiding = _
        Me.AutoCompleteExtenderClients.ClientID + "_OnClientCompleted"

        AutoCompleteExtenderClients.OnClientPopulated = _
        Me.AutoCompleteExtenderClients.ClientID + "_OnClientPopulated"

        AutoCompleteExtenderClients.OnClientItemSelected = _
        Me.AutoCompleteExtenderClients.ClientID + "_OnClientItemSelected"

        ScriptManager.RegisterClientScriptBlock(Me, Me.GetType(), _
        Evento_OnClientPopulating, Me.OnClientPopulating(Evento_OnClientPopulating), False)

        ScriptManager.RegisterClientScriptBlock(Me, Me.GetType(), _
        Evento_OnClientCompleted, Me.OnClientCompleted(Evento_OnClientCompleted), False)

        ScriptManager.RegisterClientScriptBlock(Me, Me.GetType(), _
        Evento_OnClientPopulated, Me.OnClientPopulated(Evento_OnClientPopulated), False)

        ScriptManager.RegisterClientScriptBlock(Me, Me.GetType(), _
        Evento_OnClientItemSelected, Me.OnClientItemSelected(Evento_OnClientItemSelected), False)

End Sub

El control TextBox está asociado con el control AjaxToolKit:AutocompleteExtender y configurado para los web services usando WCF. El control Asp:HiddenField es utilizado para almacenar la entidad serializada seleccionada.

 

<asp:textbox autocompletetype="Search" 
autopostback="false" id="txtClient" maxlength="40" 
ontextchanged="txtClient_TextChanged" runat="server"></asp:textbox>                   

<asp:hiddenfield id="hdnValue" 
onvaluechanged="hdnValue_ValueChanged" runat="server">
</asp:hiddenfield>

<ajaxtoolkit:autocompleteextender 
completioninterval="3" 
completionlistcssclass="completionList" 
completionlisthighlighteditemcssclass="itemHighlighted" 
completionlistitemcssclass="listItem" 
completionsetcount="20" 
delimitercharacters="" 
enablecaching="false" 
firstrowselected="true" 
id="AutoCompleteExtenderClients" 
minimumprefixlength="1" 
runat="server" 
servicemethod="GetClientsWCF" 
servicepath="~/ServicesWCF/Services.svc" 
targetcontrolid="txtClient" 
usecontextkey="true">
</ajaxtoolkit:autocompleteextender>

Para buscar los datos en la lista, introduce el parámetro prefixText y luego ejecuta la consulta LINQ. Una vez que la consulta se haya completado, serializa los datos y luego envía el Id y el Name al cliente.

Public Function GetClientsWCF(ByVal prefixText As String, ByVal count As Integer, _
	ByVal contextKey As String) As IEnumerable(Of Object) Implements IServices.GetClientsWCF
       
   Using ContextUOWork As New DatabaseEntities

		Try

			Dim AgentesRequest As New ConcurrentBag(Of Object)

			ContextUOWork.Database.Connection.Open()
			Dim query As List(Of Names) = (From p In ContextUOWork.Names.AsNoTracking _
				Where (p.Name.Trim.ToUpper.StartsWith(prefixText.Trim.ToUpper)) _
				Take count Order By p.Name Ascending).AsParallel.ToList()
			ContextUOWork.Database.Connection.Close()

			For Each c As Names In query

				AgentesRequest.Add(_json.Serialize(New With { _
								Key .Id = c.Id, _
								Key .Name = c.Name.Trim.ToUpper()
									 }))
			Next

			Return AgentesRequest.Reverse.Cast(Of Object)()

		Catch ex As Exception

			Throw New Exception("GetClientsWCF")

		End Try

	End Using

 End Function

Los datos se muestran en el cliente mediante la ejecución del código JavaScript creado en el paso 1. Hago el análisis de los datos JSON.parse (list.childNodesi.value) para transformar y ser capaz de leerlos desde el cliente en mi lista.

function Clients_AutoCompleteExtenderClients_OnClientPopulated(sender, e)
{
    $('#Clients_txtClient').removeClass('loading');
    var list = $find('Clients_AutoCompleteExtenderClients').get_completionList();
    var count = list.childNodes.length;
    list.childNodes;
    for (i = 0; i < count; i++) {
    var item = JSON.parse(list.childNodes[i]._value);
    var Id = item.Id.toString().rpad('u00a0',10);
    var Name = item.Name.toString().rpad('u00a0',50);
    list.childNodes [i].innerHTML = Id + Name;};
};

Para seleccionar los datos en la lista, es serializado y almacenado en la variable oculta (Clients_hdnValue), y luego hacemos la devolución de datos al servidor (doPostBack) para ejecutar el evento hdnValueValueChanged.

function Clients_AutoCompleteExtenderClients_OnClientItemSelected(sender, e) {
     var selectedAgente = eval('(' + e._value + ')');
     $('#Clients_txtClient').val(selectedAgente.Name);
     $('#Clients_hdnValue').val(JSON.stringify(selectedAgente));
     __doPostBack('Clients_hdnValue', '')
 };

Deserializa el valor que está en el campo de tipo HiddenField y dispara el control de eventos ClientSelected() para advertir que se selecciona una entidad.

Protected Sub hdnValue_ValueChanged(sender As Object, e As EventArgs) Handles hdnValue.ValueChanged

    NameTyped = New JavaScriptSerializer().Deserialize(Of Object)(DirectCast(sender, HiddenField).Value)

    For Each prop As System.Reflection.PropertyInfo In _NamesEF.GetType().GetProperties()
        If prop.CanRead Then
            For Each pair In NameTyped
                If pair.Key.Equals(prop.Name) Then
                    prop.SetValue(_NamesEF, pair.Value, Nothing)
                End If
            Next
        End If
    Next
       
    Me.TBL_NAMES = _NamesEF

    RaiseEvent ClientSelected()

End Sub

El formulario WebForm.aspx detecta el evento del crontol (clientes). La propiedad TBLNAMES contiene la entidad seleccionada.

Private Sub Clients_ClientSelected() Handles Clients.ClientSelected
    Id1.Text = Me.Clients.TBL_NAMES.Id
    Name1.Text = Me.Clients.TBL_NAMES.Name
    UpdatePanel_Data.Update()
End Sub

Y este ha sido el tutorial sobre crear un autocompletador con EntityFramework, esperamos que te haya gustado y sepas aplicarlo en tus futuros proyectos. Ya sabes que si nos quieres proponer un tema que quieres ver reflejado como un tutorial o como una práctica, solo tienes que hacer uso del área de comentarios de un poco más abajo. Por el contrario, si quieres enviarnos tus propios tutoriales, puedes hacerlo a través de la intranet de usuarios que está habilitada para ello, a través del menú Enviar Tutorial. Ya sabes, ayúdanos a crecer con tus conocimientos. ¡Un saludo y feliz código!