3

I am looking for People Picker Control similar to SharePoint one for MVC3 applications.

Can you please suggest if there are any such controls available?

What is the best approach to pick the people from AD in MVC3?

Requirement: On one of the Views, I need to select a user from AD.

I was thinking about People Picker kind of control.

Thanks Arun

Arun
  • 103
  • 2
  • 10

1 Answers1

2

I know this is quite old so I doubt you still need this answered but perhaps it will be useful to someone else.

Just last week I had to build a control like does this for us. It's basically two main parts, a JSON service that accepts partial text and returns a list of suggestions and the HTML/CSS/jQuery+UI control.

The service is pretty straightforward so we'll skip over that here.

I'm in the process of doing a write-up on the web side but basically we wrapped the jQuery autocomplete with some custom CSS to make an input that is similar to the address line in GMail. This was done by styling a container div to look like a long input field. The actual input field is within that container and styled to be essentially invisible. Clicking in the container moves focus to the input box. Upon selecting a suggested name, I create a new container to insert before the 'cloaked' autocomplete input which contains the user name and a hidden input with our desired value to send along when the form is submitted. I had to do some other overloads on the autocomplete to get it to act consistently but essentially this is all there was to it.

The control looks at the container for a data-input-name attribute to figure out what 'name' to set the hidden inputs to when they are created with each user pick. When the form is submitted the default model binder rolls all the users of a particular picker (since you can have multiple on a page) into string arrays of the values - assuming your model has string array properties with the same name as used by the input controls - which we can then process on the server side.

By far the hardest part was figuring out the right HTML + CSS to get the look and feel right. I'm not a very strong UI person so this took me forever and still falls down in Chrome which seems to add an accent around input boxes even with (or because of?) styles which make it blend into the parent control.

For our purposes it's been working great over the last week.

UPDATE: It's now on GitHub with a Demo.

Erik Noren
  • 4,279
  • 1
  • 23
  • 29
  • Hi Erik, thanks for the reply. Well, though it meets the basic functionality, you may need to extend the plugin to integrate with AD or some other providers etc which is configured in ASP.NET app. But if you can extend this plugin for generic identity providers, i think will enrich your plugin and can be helpful for many of us. By the way, thank you very much for your plugin. – Arun Mar 01 '14 at 15:20
  • It definitely could use some updates. At my office we're using it in MVC applications and I've written a few classes around making it easier to use in that environment. The latest jQuery UI updates really messed with the styles though. I've been leaning on our designer to help me with a redesign to also include multiple selection of the results. – Erik Noren Mar 01 '14 at 17:32
  • As for specific source data, I don't see how a JavaScript browser could query AD directly. You'll need to pass your queries through a service no matter what UI technology you use. We mix AD and a data warehouse. We just use ASP.NET MVC and JsonResult actions to return the data. I use a single class to both serve autocomplete options and as the model for the binder to receive selections. – Erik Noren Mar 01 '14 at 17:37