Provider Hosted MVC App With AngularJS in SharePoint - Part 2

Let's start with Provider Hosted MVC App with AngularJS - Part 2. In this part we are going to perform CRUD operation's with SharePoint APP Model and AngularJS.

Please Reference below link to understand how to create Provider Hosted MVC App With AngularJS.

• Provider Hosted MVC App With AngularJS in SharePoint - Part 1

SharePoint HostWeb List Structure

The following is a list structure which we are referencing for our application.



We are going to create the following CRUD operation UI Design and final output format.



Lets start with user data entry form design. when we are saying user entry form, it means we need to have validation applied to controls.

AngularJS validation logic reside in specific JavaScript file named angular-messages.js, so we need to add reference of that file in our project first.



When we think about validation, <form></form> control comes in existence. When end user enter valid data and submits data to the server, other stay on same page till the user fill correct form entries.

Let's check the following code & try to understand which property is used for which purpose in code.

Step 1: Add form tag with unique name so we can reference that name to check state of form- Valid/InValid.

• ng-message="required": It corresponds to attribute we added to HTML control.
  
  1. <input type="text" class="form-control" ng-model="Employee.EmpID" name="EmployeeID" required />
  3. <div ng-messages="EmployeeForm.EmployeeID.$error">
  4. <div ng-message="required" class="ErrorSymbol">*</div>
  5. </div>
• ng-message="pattern": It corresponds to error message if specified pattern is not matching with user input data.
  
  1. <input type="text" class="form-control" ng-model="Employee.EmpAge" name="EmployeeAge" ng-pattern="/^[0-9]+$/" required />
  4. <div ng-messages="EmployeeForm.EmployeeAge.$error">
  5. <div ng-message="required" class="ErrorSymbol">*</div>
  6. <div ng-message="pattern" class="ErrorText">Must be a digit</div>
  7. </div>

Save Button

In the starting save button is disabled. When user fills the form with valid data, save button gets activated.

• Update button: ng-click="loadRecord(gridItem, $event)".
  
  
• Delete button: ng-click="DeleteItem(gridItem.ID, $event)".
  
  1. <table tr-ng-grid="" items="EmployeeMaster" locale="en">
  2. <thead>
  3. <tr>
  4. <th field-name="EmpID" display-name="Employee ID"></th>
  5. <th field-name="EmpName" display-name="Employee Name"></th>
  6. <th field-name="EmpAddress" display-name="Address"></th>
  7. <th field-name="EmpAge" display-name="Age"></th>
  8. <th field-name="EmpQualification" display-name="Qualification"></th>
  9. <th field-name="EmpDesignation" display-name="Designation"></th>
  10. </tr>
  11. </thead>
  12. <tbody>
  13. <tr>
  14. <td>
  15. <input type="button" id="btnUpdatEmployee" class="btn btn-success"
  16. value="Update"
  17. ng-click="loadRecord(gridItem, $event)" />
  18. </td>
  19. <td>
  20. <input type="button" id="btnDeleteEmployee" class="btn btn-success"
  21. value="Delete"
  22. onclick="javascript: confirm('Do you want to delete record ??');"
  23. ng-click="DeleteItem(gridItem.ID, $event)" />
  24. </td>
  25. </tr>
  26. </tbody>
  27. </table>

Index.cshtml Source Code

Please check below the following source code changes like new script reference, <table> control change,<form> control integration in order to design above UI.