Post
Ask Question

Simple Registration Form With Kendo UI Panel Bar Using WEB API 2 and Entity Framework 5

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. {  
  3.   
  4.    [Key]  
  5.   
  6.    [DatabaseGenerated(DatabaseGeneratedOption.Identity)]  
  7.   
  8.    public int UserID { get; set; }  
  9.   
  10.    [Required]  
  11.   
  12.    public string FirstName { get; set; }  
  13.   
  14.    public string MiddleName { get; set; }  
  15.   
  16.    [Required]  
  17.   
  18.    public string LastName { get; set; }  
  19.   
  20.    [Required]  
  21.   
  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") { }  
  4.   
  5.    public DbSet<Registration> RegisterUser { get; set; }  
  6.   
  7. } 
Modify your connection string in the web config file.
  1.  <connectionStrings> 
  2.    
  3.    <add name="TestConnection" connectionString="Data Source=your SQL server Name;Initial Catalog=Your Database Name;Integrated Security=True" providerName="System.Data.SqlClient" />  
  4.   
  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"  
  21.   
  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() {  
  2.   
  3.     var viewModel = kendo.observable({  
  4.   
  5.         firstName: null,  
  6.   
  7.         MiddleName: null,  
  8.   
  9.         lastName: null,  
  10.   
  11.         UserName: null,  
  12.   
  13.         isVisible: true,  
  14.   
  15.     })  
  16.   
  17.     kendo.bind($("#example"), viewModel);  
  18.   
  19. });  
  20.   
  21. function RegisterUser() {  
  22.   
  23.     $.ajax({  
  24.   
  25.         cache: false,  
  26.   
  27.         async: false,  
  28.   
  29.         type: "POST",  
  30.   
  31.         url: "http://localhost:64955/api/Registrations",  
  32.   
  33.         data: {  
  34.   
  35.             FirstName: $("#fname").val(),  
  36.   
  37.             MiddleName: $("#mname").val(),  
  38.   
  39.             LastName: $("#lname").val(),  
  40.   
  41.             UserName: $("#UserName").val()  
  42.   
  43.         },  
  44.   
  45.         success: function(data) {  
  46.   
  47.             //alert(data);  
  48.   
  49.             if (data == 'True') {  
  50.   
  51.                 ret = false;  
  52.   
  53.                 uploadWindow.close();  
  54.   
  55.                 window.location = SubmitURL;  
  56.   
  57.             } else ret = true;  
  58.   
  59.         },  
  60.   
  61.         error: function(jqXHR, exception) {  
  62.   
  63.             alert(errorHandling(jqXHR, exception));  
  64.   
  65.         }  
  66.   
  67.     });  
  68.   
  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.


Similar Articles