.NET Development Examined

jQuery Autocomplete with MVC Part 2

Monday, April 4, 2011

 In Part 1 we created the MVC project and hooked it up to the Northwind database using the EntityFramework. We also brought in the jQuey Ui framework and created a simple autocomplete function that displayed a message showing the user who they selected. However we want to do more than just display a confirmation of who was selected. We want add two main features; navigate to the details of the selected customer, and on a form fill in the customer’s information.

In Part 2 we will see how these features can be implemented.

Navigating Based on Selection

We will be displaying the full details of the customer, so we need to create a page to display the information. In your home controller create a new AcionResult for CustomerDetail:

public ActionResult CustomerDetail(string id) { var selectedCustomer = nw.Customers .Where(c => c.CustomerID==id) .SingleOrDefault(); return View(selectedCustomer); }

Create a strongly typed view for this action, be sure to select Details for the Scaffold template. Since we will not be using it, remove the ““Edit” link at the bottom of the CustomerDetail view.

Now that we know where we are going, we have to modify our javascript to send us ther. Back on the Index page change the “select” part of the javascript to:

select: function (event, ui) { window.location.href = "/home/CustomerDetail/" + ui.item.id; }

That’s it, when you select one of the auto complete results you will navigate to the CustomerDetail display for that individual.

Form Completion

Now let’s see how to populate a form with results from the auto complete. Since we want more than just the contact and company name we will need to create a new JsonResult in our Home controller. The only part we need to change is the fields selected in the LINQ statement:

select new { c.CompanyName, c.ContactName, c.ContactTitle, c.Address, c.City, c.Region, c.PostalCode, c.Phone, c.Fax })

While still in the Home controller we will add a new ActionResult for the FillCustomerInfo view:

public ActionResult FillCustomerInfo() { Customers emptyCustomer = new Customers(); return View(emptyCustomer); }

Create a new view from this action, and select the Edit Scaffold Template. The javascript for filling in the form is basically the same, so copy/paste the script and input text box. Change the ajax url to /home/FillForm (to get our additional fields). Modify the return results to accommodate the additional fields:

return { label: item.ContactName + '(' + item.CompanyName + ')', value: item.ContactName, comapnyname: item.CompanyName, contactname: item.ContactName, contacttitle: item.ContactTitle, address: item.Address, city: item.City, region: item.Region, postalcode: item.PostalCode, phone: item.Phone, fax: item.Fax }

A note about jquery.validate.min.js and jquery.validate.unobtrusive.min.js : By default MVC3 places these two scripts on any Edit/Create scaffold view. I have found that they can interfere with other jQuery functions, so if you are using these scripts make sure you re-load the jQuery and the jQuery Ui scripts AFTER then validate scripts. This is still true if you have the jQuery and jQuery Ui scripts in your master page. In fact as far as I can tell the jquery-1.5.1.min.js must be loaded before the jquery.validate.unobtrusive.min.js and it also has to be loaded after the jquery.validate.min.js So the best that I can come up with is to load the jquery-1.5.1.min.js and jquery-ui-1.8.11.custom.min.js in my Layout page, then load them again after the validate scripts. Perhaps some with more intimate knowledge of jQuery and the validation scripts can shed some light on the behavior, but this seems to be a workable solution.

Now modify the “select” function to use some jQuery to find the form fields and stuff the data into the proper place:

select: function (event, ui) { $("#CompanyName").val(ui.item.companyname); $("#ContactName").val(ui.item.contactname); $("#ContactTitle").val(ui.item.contacttitle); $("#Address").val(ui.item.address); $("#City").val(ui.item.city); $("#Region").val(ui.item.region); $("#PostalCode").val(ui.item.postalcode); $("#Country").val(ui.item.country); $("#Phone").val(ui.item.phone); $("#Fax").val(ui.item.fax); }

That’s it. Run the project now and navigate to the FillCustomerInfo page. When you select a customer their details will populate the rest of the form.

Download Code: jQueryAutocomplete.zip


Add Comment