People Picker MVC Sample
OfficeDev PnP has a great sample for using the people picker in a provider hosted add-in. The only problem is that the sample uses web forms. In this post I'll demonstrate using the people picker in an MVC application.
Create a new App for SharePointMake it Provider hosted
Choose MVC Web Application
Choose Windows Azure Access Control Service
Add a dummy module to the SharePoint projectRight click the SharePoint project and add a dummy module. This will allow you to easily get a SharePoint context.
Edit _Layout.cshtmlAdd MicrosoftAjax.js and a Styles section. Remove the menu and footer.
Copy files from the PnP Project Scripts folder into the MVC Scripts folderapp.js
Copy files from the PnP Project Styles folder into the MVC Content folderpeoplepickercontrol.css
Edit the app.js fileAdd functions for the chrome control, renderSPChrome and chromeLoaded.
Add a people picker to index.cshtml
Lets walk through this.
Line 1 add the CSS for the control.
Line 5 this is for loading the SharePoint chrome control. If this is not what you want you will need to include the SharePoint core.css file into your project or at least those bits needed for the people picker.
That's it. If you've followed along the people picker should be up and running in your MVC application. Full source code can be found here https://github.com/spkrby/MVCPeoplePicker.git