In previous articles we have learnt AngularJS project setup, styling with Bootstrap, AngularJS structure, data-binding, routing, copying of angular object when form is saved or cancelled, etc.

Please have a look on my previous articles before going through this article.

Angular, Bootstrap And ASP.NET MVC – Part One

Angular, Bootstrap And ASP.NET MVC – Part Two

Angular, Bootstrap And ASP.NET MVC – Part Three

Angular, Bootstrap And ASP.NET MVC – Part Four

Angular, Bootstrap And ASP.NET MVC – Part Five

From the previous articles we have following home page:

When we click on this “Add new student” button then it will navigate to Student Form as below, where form data is shown.

C:\Users\ITH-143\AppData\Local\Microsoft\Windows\INetCache\Content.Word\2.jpg

In this article, we are going to manage the same page for both options, updating the existing data and also inserting new data.

Step 1:

In “Home.html”, let’s add another button that updates the existing student data when clicked. So, “Home.html” will look like:

 

For testing purpose, we are passing hard-coded id (1) in “updateStudent” method. In a real application, we get the id from the list and pass it like this “ng-click=”updateStudent(id)””.

Step 2:

Let’s create respective methods in “HomeController.js”.

 

In “updateStudent” function we are passing “id”. We are linking path to ‘updateStudentForm’ so we need to set up route in “StudentFormsApp.js”.

Step 3:

In “StudentFormsApp.js” we will add new “.when” method that links to “sfTemplate.html” but with “id” as a parameter.

 

Step 4:

Notice that, we are opening the same “sfTemplate.html” and same controller “sfController”. But within this controller, we need to check if the function has “id” as a parameter. If “id” is passed then it means the form with previous data should be displayed whereas if “id” is not passed, it means form with empty data should be displayed.

So, in “sfController.js”, let’s add “$routeParams” as the service which holds the parameters “id” in this case. So, we check if “$routeParams” has “id” or not.

The final code for “sfController.js” will look like:

 

From the above code, if we have passed “id” as parameter then it will retrieve the data from “sfService” as “sfService.getStudent($routeParams.id)”

In the “submitForm”, if we have “id == 0”, this means it is new student’s data so we need to insert this like:

 

Whereas, if it has “id != 0”, this means we have to update its data so we are updating like:

 

Step 5:

Next, we need to create ‘getStudent’, ‘insertStudent’ and ‘updateStudent’ methods in “sfService.js” so final code snippet of “sfService.js” will look like:

 

From the above code, in the “getStudent” method, if the id == 1 then we are returning our data else returning null. This ensures that if “id” is passed then it will return respective data and display this data in the form otherwise, it will display a form with empty data.

Step 6:

Final code of “StudentFormsApp.js” will look like:

 

Step 7:

Run the application.

When you click on the “Add new student” then it will display a form with empty data.

And when you click on “Update Student” button, then it will display the same form but with student data.

Get the complete project from GitHub.

We will learn more in the next articles. Keep you posted.

Thanks, Happy coding!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">