Blog of an IT Guy

Adding the User Interface

There are a few prerequisites in order for this to work and/or make any sense.  So please go thru the following posts to get up to speed:

Start here…  How To Create An Expanded LightSwitch 2013 Project

Then… LightSwitch 2013 User Management – HTML – Part 1

Note that we are using JQuery 1.9.1, if something breaks check the file requirements in the _AdminLayout.cshtml.

So now that we have LightSwitch, MVC, Web API and our AccountController all working correctly, lets go add a UI to manage our users.  To do this we’ll be using Kendo UI for our grids and Bootstrap for the responsive layout.

1. Right click on your server project, Select Manage NuGet Packages…
2. Search for and install KendoUIWeb
3. Add a new folder under your server scripts folder, name it: App
4. Copy the files roles.js and users.js, from the GitHub zip, into this folder and include them in your project
5. Under your server project Views folder create a new folder named: Admin
6. Copy the files Index.cshtml, Roles.cshtml and Users.cshtml into this folder and include them in your project
7. Copy the file _AdminLayout.cshtml into your server project Views/Shared folder and include it in your project
8. Copy the file AdminController.cs into your server project Controllers/Mvc folder and include it in your project
9. We now need to update jquery.validate, so right click on your server project, Select Manage NuGet Packages…
10. On the left side of the NuGet dialog, Select Updates
11. Select JQuery Validation, click Install
12. Close NuGet
13. Open the AccountController.cs and remove your comment from the [Authorize] attribute
14. Final item… Critical for testing!!
15. Open your server project root web.config file, Update the following appSettings:
    Microsoft.LightSwitch.Admin.UserName
    Microsoft.LightSwitch.Admin.FullName
    Microsoft.LightSwitch.Admin.Password
16. Select Build, Clean Solution
17. Select Build, Build Solution
18. Run your solution.
19. Test at http://localhost:{port}/Admin and select Users or Roles.

Few things that need mentioning

• Complex data is sent in the body of the request
• When editing a user in the Admin App we don’t mask the password input on purpose
• You can unlock a locked account by editing a user and unchecking the Locked checkbox
• When editing a user, password will  only be changed if you add something into the password box, standard password rules apply
• We’ve stripped out a lot of the validation to simplify this demo
• We are not using bundling, again to simplify the tutorial
• The client app is responsible for catching and notifying the user of exceptions.
• This version of the AccountController is designed for Ajax calls.  We also have a version designed for server side MVC/API code.  Converting is a good exercise that I highly recommend
• Remember… this is a demo!

I hope this will be as valuable to you as it is to us.. finally no reason for the Silverlight Client!

Happy Coding!