Using Sencha ExtJS 4.2, Sencha Architect 2.2, Add CRUD to REST client for calling Microsoft WebAPI server

Posted by Peter Kellner on March 13, 2013 · 4 mins read

Three Part Series

(Part 3)

 

Building a Simple REST Controller with Microsoft Visual Studio 2012 and WebAPI
Using Sencha ExtJS 4.2 and Sencha Architect 2.2, Build a Simple REST client (to feed WebAPI server)
Add CRUD to REST client for calling Microsoft WebAPI server

 

In the first two posts, we built a Microsoft WebAPI REST service, then we built the client side ExtJS app to process the GET request of the service (populate the grid panel), now let’s do the other 3 parts of CRUD (insert, update and delete).  We will not build out the WebAPI side because that would involve adding some kind of persistent storage to the server (which is another topic I did not want to add to this post now, but maybe will later).

So, first, let us go back to the Sencha Architect project and make the “TagName” editable so that we can see the “Update” in action.  We also need to add a save button to the toolbar that will simply so a store.sync() which will push the REST proxy into action once we have modified a TagName.

Without going through all the drag and drop, here is what needs to be done from Sencha Architect.

Add a toolbar to the Viewport

Put a “save” button on the Viewport

Add a click event handler to the “save” button and have the code grab a handle to the store and issue a sync() call when pressed

Add an editor to the text field “TagName” so we can edit that field

Add a CellEditing plugin to the grid

Now, that gives us this:

image

and it looks like:

image

Notice that I’ve actually clicked and edited the Tagname for item #3. You can tell because ExtJS puts the little red hat showing the field is edited.

If we press “Save” next we will get an error because the default WebAPI “Put” method does not have the correct signature.  We just change it to take an instance of TagItem and now, when we press the “save” button, we see the browser do a PUT

image

 

If we place a break point in the visual studio 2012 server code when the PUT is called, you will see the new value come in for tagName (as follows):

image

and, if you look at the browser shot above, you will see that the little red hat indicating “dirty” is now gone showing that we generated a clean update.

 

On your own, you can now do the same for POST (Insert) and DELETE.  The pattern is identical.  Simply make the WebAPI parameter TagItem (like we did for update), then, add to the client a delete button that figures out what is the selected row on the Grid Panel (fire the button again), and for insert, create an add button that simply adds a new row to the store, edit it and fire the save button again.

Hope these posts help.  I’m hoping this gives you a clear roadmap to build WebAPI / Sencha ExtJS applications using Microsoft’s WebAPI.