17 Step-By-Step How-to Delete rows from a Grid in AngularJS

         By Carmel Schvartzman

In this tutorial we'll learn how to Delete rows from a Grid in AngularJS in our AngularJS Blogs Application. Each one of the CRUD (Create - Retrieve - Update - Delete) operations will be covered in successive walkthroughs.You can follow this step by step tutorial as a standalone, or you can learn all the posts to build the entire app. This is the STEP 17 in this walkthrough to design an end-to-end AngularJS client MVC app.

In the MODEL-VIEW-CONTROLLER architecture of AngularJS, a VIEW is related to a MODEL in the configuration step of the AngularJS app live, when we link it to some CONTROLLER.
This linking action is set in a Module, with the function of declaratively set how the AngularJS app should be bootstrapped. It's like the Main method in a program, setting the instantiation of the application.
Because AngularJS is based on the Dependency Injection paradigm, here is the place to configure the app injecting the functionality that we'll need.

We'll add deleting functionality to an AngularJS table, resulting in the following Grid:

Let's begin by enhancing our backend REST API controller, adding a method that will react in front of any HTTP "DELETE" request. Go to the MVC NatureController and add the method:

"HttpDelete" just tell that any "DELETE" request must be lead to this method. The response will be JSON format, therefore we use the Json object.

Now use the DbContext to find and remove the post:

As you may recall from previous tutorials, we added a DbContext that creates the model, making each table an DbSet<>:


And each DbSet<> enables a bunch of useful functions such as Create(), Find() or Remove():



We added the DbContext code generator in a previous tutorial.:


 The advantage of generating POCO (Plain Old CLR Objects) classes via T4 templates such as the ADO.Net DBContext code Generator is that they offer extensibility over the entity object definitions, far over standard EDMX data access. Also the DbContext can be used with Database First, Model First and Code First programming development. That's why we can use the Find() and the Remove() methods:


Now that we are done for now with the REST API, let's code the invocation of the DELETE API method from the AngularJS app. Open the Blog.js file and INSIDE the AngularJS controller for the current View, add the Delete function:

(See that later parenthesis , which closes the AngularJS controller: you MUST include the method inside it)

Take a look at the AngularJS Documentation, to see how can be used the $resource Delete() method:

Of course, that DELETE call to the REST API must include the ID of the record to be erased:

Take care to respect the case-sensitive approach and write "ID" exactly as it is required by the API REST method:


The "Id" to be sent to the REST server will come from the "Id" of the current post being clicked:


Therefore, the "blog" object must include an "Id" field. Let's create it on the REST API, inside the "GET"  Blogs() method we built in the NatureController:


And of course, let's add that Id to each record being added to the Grid, in the AngularJS View in the BlogList.htm file:



Now that each item on the grid has its corresponding ID, we need a button to delete the items:



Save the project, and CTL-F5 it to activate the web server. Browse to the Index.htm page:


Click on the " X " delete button, to see that nothing happens. Let's add a breakpoint in the JS code. Open the Developer Tools, go to the "Sources" tab , and open the Blog.js file:


Add a breakpoint inside the Delete() function. Press again the delete button:


Well, that's not the problem: the Id has been provided. Remove the breakpoint. Why the item has not been deleted? Let's debug the API. This time press F5 and add a breakpoint inside the Delete() method:



Click again some " X " link. The MVC breakpoint has not been reached. Let's check the request sent. Go to the "Network" tab in the Developers Tools. Clear the list:



Click again the button, and check the "network" tab:


The status code is 200 OK. So the request has been sent and a response received.


The problem is in the URL: the request has been sent to the Blogs() method instead of the Delete(). So let's fix it adding a "ActionName" Attribute to the method:


That means, now the http DELETE verb request will be lead to the correct Delete() method, because the name of the Delete() method will be "Blogs".



Rebuild the project ( F6 ) . Refresh the Index.htm page, and click again the delete button:


This time the deletion has worked:





This is the final appeareance of the AngularJS Grid until now:

That's all!! 
Happy programming.....

כתב: כרמל שוורצמן

16 Step By Step How to add Searching functionality to an AngularJS Grid

         By Carmel Schvartzman

In this tutorial we'll learn how to add Searching functionality to an AngularJS Grid in our AngularJS Blogs Application. You can follow this step by step tutorial as a standalone, or you can learn all the posts to build the entire app. This is the STEP 16 in this walkthrough to design an end-to-end AngularJS client MVC app.

In the MODEL-VIEW-CONTROLLER architecture of AngularJS, a VIEW is related to a MODEL in the configuration step of the AngularJS app live, when we link it to some CONTROLLER.
This linking action is set in a Module, with the function of declaratively set how the AngularJS app should be bootstrapped. It's like the Main method in a program, setting the instantiation of the application.
Because AngularJS is based on the Dependency Injection paradigm, here is the place to configure the app injecting the functionality that we'll need.

We'll search an AngularJS grid, resulting in the following final appeareance of our AngularJS grid:

In order to add the searching functionality, find in your REST API the method which serves GET http requests. In the Rest API walkthrough we called that method "Blogs" in the "NatureController" controller:



Once you have found it, append to its parameters another new named "searchText" (the search term to be found) :

Find the code which populates the collection with the posts:

And change it to search for the requested text:

We need to check whether the search string has been initialized: in case it wasn't, just load all the posts:

Save, build and CTL-F5 to start the web server and browse to the Index.htm page:

No bugs. Now open the Blog.js file where the AngularJS Model is coded, and find the ajax call to the REST API :

Here we want to append the search argument, being careful to respect the case-sensitive name of the parameter "searchText":

We'll need a $scope variable to hold the search string, called "SearchText":

Now in the AngularJS View we add an input tag to enter that search string:

Save and refresh:

After that, we'll need also a button to trigger the search:

Save and refresh to see how it looks like:

Now we'll code the Search() javascript function called by the button. Find the function which performs the ajax call to the web server:

Enclose that function inside the new search function:

Be careful to type that function inside the boundaries of the AngularJS Controller:

The Controller starts at the following point:

Add to the Search() function the necessary instantiation we had before, and finally call the Search() function to initially populate the grid:

Save and refresh, and type some text in the search box:

It works: we got the posts which contain the text:

Now we need a button to reset the search:

Refresh and do another search:

Press "Reset" to cancel the search:

Now we need to disable the button if there is not a text for search:

Then when there is no text, the reset button is disabled:

Finally, let's add some style using the Twitter Bootstrap we added in a previous tutorial:

And this is the final appeareance of our AngularJS grid:

That's all!! 
Happy programming.....

כתב: כרמל שוורצמן