This article explains how to create a simple registration form with Kendo Panel Bar using WEB API 2 and Entity Framework 5.

Just create a Web API project as shown in Figures 1 & 2.


Figure 1

Figure 2

I am using the Entity Framework Code First technique to connect with the database.

Create a model class and name it Registration.

Use the following code in that class:

  1. public class Registration
  2. {
  4. [Key]
  6. [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
  8. public int UserID { get; set; }
  10. [Required]
  12. public string FirstName { get; set; }
  14. public string MiddleName { get; set; }
  16. [Required]
  18. public string LastName { get; set; }
  20. [Required]
  22. public string UserName { get; set; }
  23. }
Create one more model class and name it RegistrationContext.

Use the following code in that class:

  1. public class RegistrationContext:DbContext
  2. {
  3. public RegistrationContext() : base("name=TestConnection") { }
  5. public DbSet<Registration> RegisterUser { get; set; }
  7. }
Modify your connection string in the web config file.
  1. <connectionStrings>
  3. <add name="TestConnection" connectionString="Data Source=your SQL server Name;Initial Catalog=Your Database Name;Integrated Security=True" providerName="System.Data.SqlClient" />
  5. </connectionStrings>

Build your project once to start scaffolding.

Add a controller as shown in Figures 3, 4 & 5.


Figure 3

Figure 4

Figure 5

The following step will scaffold the REST full service in the Registration controller.

You will get some pre-defined HTTP GET, POST, PUT and DELETE request/responses in Registrations Controller. Modify the code based on your application requirements. For this example I did not change the code.

To insert a record into the registration table we should use HTTP POST request/response.

Before implementing it in the UI we will check it in POST MAN as shown in Figure 6.

Figure 6

Design the UI to consume the REST HTTP POST service.

I have used the Kendo UI to Desgin with MVVM Pattern.

Here is my design:

  1. <!DOCTYPE html>
  2. <html
  3. xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title></title>
  6. <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
  7. <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />
  8. <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />
  9. <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.min.css" />
  10. <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.default.min.css" />
  11. <script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>
  12. <script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>
  13. <script src="Js/RegisterViewModel.js"></script>
  14. </head>
  15. <body>
  16. <div id="example">
  17. <div id="RegistrationForm" class="demo-section k-header">
  18. <div class="container">
  19. <h4>Simple Registration Page Using Kendo Panel Bar</h4>
  20. <ul data-role="panelbar"
  22. style="width: 1130px">
  23. <li>
  24. <span>Personal Details</span>
  25. <div class="row">
  26. <div class="col-lg-3">
  27. <label for="fname">First Name:</label>
  28. </div>
  29. <div class="col-lg-3">
  30. <input id="fname" data-bind="value: firstName" class="k-textbox" required />
  31. </div>
  32. <div class="col-lg-3">
  33. <span class="k-invalid-msg" data-for="fname"></span>
  34. </div>
  35. </div>
  36. <div class="row">
  37. <div class="col-lg-3">
  38. <label for="mname">Middle Name:</label>
  39. </div>
  40. <div class="col-lg-3">
  41. <input id="mname" data-bind="value: MiddleName" class="k-textbox" />
  42. </div>
  43. </div>
  44. <div class="row">
  45. <div class="col-lg-3">
  46. <label for="lname">Last Name:</label>
  47. </div>
  48. <div class="col-lg-3">
  49. <input id="lname" data-bind="value: lastName" class="k-textbox" required />
  50. </div>
  51. </div>
  52. </li>
  53. <!--Second Pane Login Infomation-->
  54. <li>
  55. <span>Login Information</span>
  56. <div class="row">
  57. <div class="col-lg-3">
  58. <label for="UserName">User Name*:</label>
  59. </div>
  60. <div class="col-lg-3">
  61. <input id="UserName" data-bind="value: UserName" class="k-textbox" required />
  62. </div>
  63. </div>
  64. <div class="row">
  65. <div class="col-lg-3">
  66. <label for="password">Password*:</label>
  67. </div>
  68. <div class="col-lg-3">
  69. <input required type="password" id="Password" data-bind="value: Passsword" class="k-textbox" />
  70. </div>
  71. </div>
  72. <div class="row">
  73. <div class="col-lg-3">
  74. <label for="ConfirmPwd">Confirm Password*:</label>
  75. </div>
  76. <div class="col-lg-3">
  77. <input required type="password" id="ConfirmPwd" data-bind="value: ConfirmPwd" class="k-textbox" />
  78. </div>
  79. </div>
  80. </li>
  81. </ul>
  82. <input type="submit" id="btn_Submit1" value="Submit" class="k-button" onclick="RegisterUser()" />
  83. </div>
  84. </div>
  85. </div>
  86. </body>
  87. </html>

In browser as show in Figure 7,


Figure 7
MVVM Model script
  1. $(document).ready(function() {
  3. var viewModel = kendo.observable({
  5. firstName: null,
  7. MiddleName: null,
  9. lastName: null,
  11. UserName: null,
  13. isVisible: true,
  15. })
  17. kendo.bind($("#example"), viewModel);
  19. });
  21. function RegisterUser() {
  23. $.ajax({
  25. cache: false,
  27. async: false,
  29. type: "POST",
  31. url: "http://localhost:64955/api/Registrations",
  33. data: {
  35. FirstName: $("#fname").val(),
  37. MiddleName: $("#mname").val(),
  39. LastName: $("#lname").val(),
  41. UserName: $("#UserName").val()
  43. },
  45. success: function(data) {
  47. //alert(data);
  49. if (data == 'True') {
  51. ret = false;
  53. uploadWindow.close();
  55. window.location = SubmitURL;
  57. } else ret = true;
  59. },
  61. error: function(jqXHR, exception) {
  63. alert(errorHandling(jqXHR, exception));
  65. }
  67. });
  69. }

Insert a record using the Kendo UI Panel bar as shown in Figure 8.


Figure 8

Check your database table.

Hooray! The records are inserted.

That's it, enjoy coding.