Monday, November 18, 2013

Show selected item details after selecting an item from autocomplete dropdownlist using Knockout.js

This is a continuation of previous post where we looked at how to implement autocomplete functionality into Asp.net MVC 4 application using jQuery UI and Ajax. In the previous post when you selected a particular user it redirected you to a different page. What if we want to show information about that user on the same page without any page refresh. In this post we are going to do exactly the same thing. Well there are many ways to do this but I want to show you the one using Knockout.js. To use Knockout.js first include it in our BundleConfig.cs

We created a ViewModel for the Person Object called PersonViewModel. And ko.observable(data.lastname) means that lastname is an observable property. Next add the following div section where we are going to display selected person’s information. Inside the span tag see the data-bind=”text: LastName” it will be replaced by the LastName returned from our select function inside autocomplete.

One last thing before we run our application. Replace the window.location.href line with ko.applyBindings(new PersonViewModel(ui.item)); This will databind our selected person to the datatemplate shown above.

I just wanted to show that it could be done with Knockout. At this point our search button is non-functional. We will make it functional later. One thing to notice here is that the information about the selected user is grabbed from the initial query we did to find suggested users. To bring in more information we would have to adjust our LINQ query. And I know what you are thinking right now, “But Mitul, that would bring in all the unnecessary information about other users in which we are not interested.” So we are going to write another method in our HomeController to bring in information just about that selected person. Before doing that let’s update our model to bring in additional information about our selected person.

Open the ADworks.edmx file inside our Models folder and then click anywhere next to the entity and select “Update Model from Database”

And then check on these entities Employee, Address, BusinessEntityAddress, StateProvince.

Now FindPerson method will return detailed information about the selected person.

Inside our select function of AutoComplete we are going to make an ajax call [line 31] to this method passing in the BusinessEntityID [line 35] for the Person to FindPerson method [line 33]. Also I have made changes to the PersonViewModel to reflect all the properites returned from the FindPerson method.

In this post, we looked at how to show selected user’s information after search for a user using jQuery UI’s autocomplete method. Initially to display the selected user we simply data binded the object returned by the select object, we didn’t went to server to find more information. In the final attempt we did another ajax call to the server to find more information about the user. In the next post we will look into how to show detailed information about a person using a PartialView.