Click here to Skip to main content
15,867,997 members
Articles / Web Development / ASP.NET
Tip/Trick

AutoCompleteExtender working with EntityFramework! (Reload 2015)

Rate me:
Please Sign up or sign in to vote.
0.00/5 (No votes)
12 Nov 2015CPOL2 min read 7.9K   2  
Creating a Web User Control containing an AutoCompleteExtender for data through WCF (JSON) allowing to store the entity selected through EntityFramework. Entity object serialization from the server to the client and the client to the server.

I leave a link music to enjoy this code. Thanks !

Introduction

My problem arose because I couldn't find a control that handles entities, I needed to select data of a list and be able to store it in the form of entity. There were examples online but none of them complied with the storage cycle of the entity, so I didn't have another option but to build it from scratch. I also needed another feature, which could be used within a gridview for editing. The current problem with a combobox is that when loading a page, it necessarily loads all data. The developed search control is optimized to respond through (JSON) as well as the query (LINQ - AsNoTracking - AsParallel).

Technology

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

Description of the Control

  1. When the control is initialized, I load dynamically the JavaScripts to events OnClientPopulating, OnClientHiding, OnClientPopulated, OnClientItemSelected.
    VB.NET
    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
  2. The TextBox control is associated with the ajaxToolkit:AutoCompleteExtender control and configured for the web services using WCF. The Asp:HiddenField control is used to store the serialized selected entity.
    ASP.NET
    <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>
  3. To search the data in the list, enter by the prefixText parameter and then execute the LINQ query. Once the consultation is complete, serializes data and then sends Id and Name to the client.
    VB.NET
    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
  4. The data is displayed in the client by running the JavaScript dynamic created in step 1. I do the parsing of data JSON.parse (list.childNodesi.value) to transform and be able to read them from client in a list.
    JavaScript
    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;};
    };
    
  5. To select the data in the list, is serialized and stored in the variable hidden (Clients_hdnValue), then do a postback to the server (doPostBack) to run the event hdnValueValueChanged.
    JavaScript
    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', '')
     };
    
  6. Deserialize the value that is in the field of type HiddenField and Reflection the NameEF setting. Trigger the event control ClientSelected() to warn that an entity is selected.
    VB.NET
    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
  7. The WebForm.aspx form detects the event of the control (Clients). The TBLNAMES property contains the selected entity.
    VB.NET
    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
    

Observations

The control can be used within a gridview. When pressed to editing in the GridView control automatically control sets the value of the EVAL property IdAgente, therefore, executes search of the entity by Id. Then it sets the TBLNAMES property.

ASP.NET
<uc:SearchClients ID="SearchClients_Value" 
runat="server" IdAgente='<%# Eval("IdAgente")%>'/> 

Browsers Compatibility

  • Microsoft Edge
  • Google Chrome version 46.0.2490.80 m
  • Internet Explorer version 11.0.10.40
  • FireFox version 41.0.2

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior)
Argentina Argentina
This member doesn't quite have enough reputation to be able to display their biography and homepage.

Comments and Discussions

 
-- There are no messages in this forum --