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.
- Right click on your server project, Select Manage NuGet Packages…
- Search for and install KendoUIWeb
- Add a new folder under your server scripts folder, name it: App
- Copy the files roles.js and users.js, from the GitHub zip, into this folder and include them in your project
- Under your server project Views folder create a new folder named: Admin
- Copy the files Index.cshtml, Roles.cshtml and Users.cshtml into this folder and include them in your project
- Copy the file _AdminLayout.cshtml into your server project Views/Shared folder and include it in your project
- Copy the file AdminController.cs into your server project Controllers/Mvc folder and include it in your project
- We now need to update jquery.validate, so right click on your server project, Select Manage NuGet Packages…
- On the left side of the NuGet dialog, Select Updates
- Select JQuery Validation, click Install
- Close NuGet
- Open the AccountController.cs and remove your comment from the [Authorize] attribute
- Final item… Critical for testing!!
- Open your server project root web.config file, Update the following appSettings:
Microsoft.LightSwitch.Admin.UserName
Microsoft.LightSwitch.Admin.FullName
Microsoft.LightSwitch.Admin.Password - Select Build, Clean Solution
- Select Build, Build Solution
- Run your solution.
- 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!
[…] LightSwitch 2013 User Management – HTML – Part 2 […]