This article explains how to create a multi-step registration form with Kendo UI MVVM pattern using Web API2 and Entity Framework 5.
Just create a Web API project as shown in Figure 1 and Figure 2.
Figure 1
In my case I named the project MultiStepRegistration.
Figure 2
The Project structure will be as shown in Figure 3.
Figure 3
Here I am using the Entity Framework Code First technique to connect with the database.
Create a model class and name it RegistrationMultiStep.cs.
Use the following code in that class:
  1. public class RegistrationMultiStep
  3. {
  5. [Key]
  7. [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
  9. public int UserID {
  10. get;
  11. set;
  12. }
  14. [Required]
  16. public string FirstName {
  17. get;
  18. set;
  19. }
  21. [Required]
  23. public string LastName {
  24. get;
  25. set;
  26. }
  28. [Required]
  30. public string Email {
  31. get;
  32. set;
  33. }
  35. [Required]
  37. public DateTime DOB {
  38. get;
  39. set;
  40. }
  42. public string State {
  43. get;
  44. set;
  45. }
  47. public string City {
  48. get;
  49. set;
  50. }
  52. [Required]
  54. public string Country {
  55. get;
  56. set;
  57. }
  59. [Required]
  61. public string UserName {
  62. get;
  63. set;
  64. }
  66. }
Create one more model class and name it MultiStepRegistrtionContext.cs.
Use the following code in that class:
  1. public class MultiStepRegistrtionContext: DbContext {
  2. public MultiStepRegistrtionContext(): base("name=TestConnection") {}
  3. public DbSet < RegistrationMultiStep > MultiPathRegistration {
  4. get;
  5. set;
  6. }
  7. }
Modify your connection string in the web config file as in the following:
  1. <connectionStrings>
  3. <add name="TestConnection" connectionString="Data Source=Server name;Initial Catalog=Database Name;Integrated Security=True" providerName="System.Data.SqlClient" />
  5. </connectionStrings>
Build your application once before starting scaffolding. Add a controller as shown in Figures 4 & 5.











Figure 4

Figure 5
The preceding procedure will scaffold the REST full service in the RegistrationMultistepsController.
You will get some pre-defined HTTP GET, POST, PUT and DELETE requests/responses in the RegistrationMultiSteps Controller. Modify the code based on your application requirements. For this example I did not modify the code.
To insert a record into the RegistrationMultiStep table we should use HTTP POST requests and responses.
Before implementing it in the Kendo UI once check that the service is in Postman / Fiddler.
Design the UI to consume the service.
I have used KendoUI with the MVVM pattern.
Here is my design:
  1. <!DOCTYPE html>
  2. <html
  3. xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
  6. <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />
  7. <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />
  8. <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.min.css" />
  9. <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.default.min.css" />
  10. <script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>
  11. <script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>
  12. <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
  13. <script src="Js/ViewModel/RegisterViewModel.js"></script>
  14. <script src="Js/Model/RegisterData.js"></script>
  15. <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  16. <title></title>
  17. </head>
  18. <body>
  19. <div>
  20. <div class="container" id="example1"></div>
  21. <div id="Uploadwindow"></div>
  22. </div>
  23. <div id="example" style="align-content:center;margin:20px 20px 10px 10px">
  24. <div id="RegistrationForm">
  25. <div id="step1" class="container" style="align-content:center">
  26. <h3>Personal details </h3>
  27. <br />
  28. <div class="row">
  29. <div class="col-lg-3">
  30. <label for="fname" class="required">First Name*:</label>
  31. </div>
  32. <div class="col-lg-3">
  33. <input type="text" id="fname" name="FirstName" data-bind="value: firstName" class="k-textbox" required />
  34. </div>
  35. <div class="col-lg-3">
  36. <span class="k-invalid-msg" data-for="fname"></span>
  37. </div>
  38. </div>
  39. <br />
  40. <br />
  41. <div class="row">
  42. <div class="col-lg-3">
  43. <label for="lname">Last Name*:</label>
  44. </div>
  45. <div class="col-lg-3">
  46. <input id="lname" name="LastName" data-bind="value: lastName" class="k-textbox" required />
  47. </div>
  48. <div class="col-lg-3">
  49. <span class="k-invalid-msg" data-for="lname"></span>
  50. </div>
  51. </div>
  52. <br />
  53. <div class="row">
  54. <div class="col-lg-3">
  55. <label for="email">Email*:</label>
  56. </div>
  57. <div class="col-lg-3">
  58. <input type="email" name="Email" id="Email" data-bind="value: Email" class="k-textbox" required />
  59. </div>
  60. <div class="col-lg-3">
  61. <span class="k-invalid-msg" data-for="email"></span>
  62. </div>
  63. </div>
  64. <br />
  65. <div class="row">
  66. <div class="col-lg-3">
  67. <label for="DOB">DOB*:</label>
  68. </div>
  69. <div class="col-lg-3">
  70. <input id="Dob" name="DOB" data-role="datepicker"
  72. data-bind="visible: isVisible, enabled: isEnabled, value: selectedDate" required />
  73. <span class="k-invalid-msg" data-for="DOB"></span>
  74. </div>
  75. </div>
  76. <br />
  77. <input type="button" value="Continue" id="continue" onclick="ValidatePersonal()" class="btn btn-default button">
  78. </div>
  79. <div id="step2" style="display:none;align-content:center">
  80. <br />
  81. <br />
  82. <h3> Contact Info </h3>
  83. <br />
  84. <div class="row">
  85. <div class="col-lg-3">
  86. <label for="City">City:</label>
  87. </div>
  88. <div class="col-lg-3">
  89. <input id="City" data-bind="value: City" class="k-textbox" name="City"/>
  90. <span class="k-invalid-msg" data-for="City"></span>
  91. </div>
  92. </div>
  93. <br />
  94. <div class="row">
  95. <div class="col-lg-3">
  96. <label for="State">State:</label>
  97. </div>
  98. <div class="col-lg-3">
  99. <input id="State" data-bind="value: State" class="k-textbox" name="State" />
  100. <span class="k-invalid-msg" data-for="State"></span>
  101. </div>
  102. </div>
  103. <br />
  104. <div class="row">
  105. <div class="col-lg-3">
  106. <label for="Country">Country*:</label>
  107. </div>
  108. <div class="col-lg-3">
  109. <input id="Country" data-bind="value: Country" name="Country" required class="k-textbox" />
  110. <span class="k-invalid-msg" data-for="Country"></span>
  111. </div>
  112. </div>
  113. <br />
  114. <br />
  115. <input type="button" value="Back" id="Back" class="btn btn-default button" onclick="BackAddress()">
  116. <input type="button" value="Continue" id="continue1" class="btn btn-default button" onclick="ValidateAddress()">
  117. </div>
  118. <div id="step3" style="display:none">
  119. <h3>Login Information</h3>
  120. <br />
  121. <div class="row">
  122. <div class="col-lg-3">
  123. <label for="UserName">User Name*:</label>
  124. </div>
  125. <div class="col-lg-3">
  126. <input id="UserName" data-bind="value: UserName" name="Username" class="k-textbox" required />
  127. <span class="k-invalid-msg" data-for="Username"></span>
  128. </div>
  129. </div>
  130. <br />
  131. <div class="row">
  132. <div class="col-lg-3">
  133. <label for="password">Password*:</label>
  134. </div>
  135. <div class="col-lg-3">
  136. <input required type="password" id="Password" name="Password" data-bind="value: Passsword" class="k-textbox" />
  137. <span class="k-invalid-msg" data-for="Password"></span>
  138. </div>
  139. </div>
  140. <br />
  141. <div class="row">
  142. <div class="col-lg-3">
  143. <label for="ConfirmPwd">Confirm Password*:</label>
  144. </div>
  145. <div class="col-lg-3">
  146. <input required type="password" name="Confirmpassword" id="Confirmpassword" data-bind="value: ConfirmPwd" class="k-textbox" />
  147. <span class="k-invalid-msg" data-for="Confirmpassword"></span>
  148. </div>
  149. </div>
  150. <br />
  151. <input type="button" value="Back" id="Back3" class="btn btn-default button" onclick="BackUser()">
  152. <input type="button" onclick="RegisterUser()" class="btn btn-default button" value="Submit" />
  153. </div>
  154. </div>
  155. </div>
  156. </body>
  157. </html>
The View Model Script:
  1. $(document).ready(function() {
  3. var viewModel = kendo.observable({
  5. firstName: "",
  7. MiddleName: "",
  9. Email: null,
  11. selectedDate: null,
  13. isPrimitive: false,
  15. isVisible: true,
  17. isEnabled: true,
  19. confirmed: false,
  21. City: null,
  23. State: null,
  25. Country: null,
  27. UserName: null,
  29. Passsword: null,
  31. ConfirmPwd: null,
  33. });
  35. kendo.bind($("#example"), viewModel);
  37. });
KendoValidation and Ajax script:
  1. function RegisterUser() {
  2. var validator = $("#RegistrationForm").kendoValidator({
  3. rules: {
  4. PasswordRequired: function(input) {
  5. var ret = true;
  6. if (input.is("[id=Password]")) {
  7. ret = $("#Password").val().length > 0;
  8. }
  9. return ret;
  10. },
  11. PasswordLength: function(input) {
  12. var ret = true;
  13. if (input.is("[id=Password]")) {
  14. ret = $("#Password").val().length > 6;
  15. }
  16. return ret;
  17. },
  18. ConfirmPasswordRequired: function(input) {
  19. var ret = true;
  20. if (input.is("[id=Confirmpassword]")) {
  21. ret = $("#Confirmpassword").val().length > 0;
  22. }
  23. return ret;
  24. },
  25. CheckConfirmPassword: function(input) {
  26. var ret = true;
  27. if (input.is("[id=Confirmpassword]")) {
  28. ret = $("#Password").val().trim() == $("#Confirmpassword").val().trim();
  29. }
  30. return ret;
  31. },
  32. RequiredEmail: function(input) {
  33. var ret = true;
  34. if (input.is("[id=Email]")) {
  35. ret = $("#Email").val() != '';
  36. }
  37. return ret;
  38. }
  39. },
  40. messages: {
  41. PasswordRequired: "Please enter confirm password",
  42. PasswordLength: "Password must be of minimum 7 characters",
  43. CheckConfirmPassword: "Your passwords do not match",
  44. ConfirmPasswordRequired: "Please enter confirm password",
  45. RequiredEmail: "Email is required",
  46. }
  47. }).data("kendoValidator");
  48. if (validator.validate()) {
  49. alert("validation Success")
  50. $("#Uploadwindow").kendoWindow({
  51. content: {
  52. template: "<div class=\"form-inline\"><div class=\"col-lg-5\"><p>Please wait while we register your account. You will be redirected to home page automatically.</p></div>"
  53. },
  54. modal: true,
  55. width: 500,
  56. title: "User Registration"
  57. });
  58. uploadWindow.open();
  59. $.ajax({
  60. cache: false,
  61. async: false,
  62. type: "POST",
  63. url: "http://localhost:61832/api/MultiStepRegistrations",
  64. data: {
  65. FirstName: $("#fname").val(),
  66. LastName: $("#lname").val(),
  67. Email: $("#Email").val(),
  68. DOB: $("#Dob").val(),
  69. City: $("#City").val(),
  70. State: $("#State").val(),
  71. Country: $("#Country").val(),
  72. UserName: $("#UserName").val(),
  73. },
  74. success: function() {
  75. alert("Your Record Has Been Saved SuccessFully!");
  76. uploadWindow.close();
  77. window.location = SubmitURL;
  78. },
  79. error: function(xhr, status, error) {
  80. alert("This is inside Error function of Ajax Call For Update Event Function");
  81. }
  82. });
  83. }
  84. }
The registration form consists of three steps.
Step 1: Personal Details
In the browser it is as shown in Figure 6.
Figure 6
The Personal details validation is as shown in Figure 7.
Figure 7
The Personal details step with the data is as shown in Figure 8.

Figure 8
Step 2: Contact information
In the browser it is as shown in Figure 9.

Figure 9
The Contact information validation is as shown in Figure 10.
Figure 10
The Contact information with data is as shown in Figure 11.
Figure 11
Step 3: Login Information.
In the browser it is as shown in Figure 12.
Figure 12
The Login information validation is as shown in Figure 13.
Figure 13
The Login information confirm password validation is as shown in Figure 14.
Figure 14
Submitting the form is as shown in Figure 15.
Figure 15
Check the data in the database as shown in Figure 16.
Figure 16
That's it, enjoy coding.