CODEWITHSUNDEEP
asp.net-mvcangularjsasp.net-web-api
Tim
Tim

Reputation: 7421

Angular.js and WebAPI CRUD examples

I have a asp.net mvc4 web application which for example allows me to manage members and member resources to the site. On the member's home page there are several different sections of details about their profile. I want to use angular.js and webapi(entityframework) to allow them to edit their address details in place and save them without a page postback. I imagine the best place to start is to have a partialview which displays these address details as part of the main page view.

Are there any examples of such a setup?

Upvotes: 4

Views: 3431

Answers (1)

BoxerBucks
BoxerBucks

Reputation: 3124

You can definitely do this. First, for switching the details based on which section the user selects you have two options:

1) Create a module and setup routes. The routes will allow you to have a base HTML page with an area where you can switch partial HTML 'views' in and out based on the URL that you are clicking on in the application. The AngularJS site has a tutorial where they do something similar. Pay notice to the ng-view explanation.

2) You can create custom directives and fetch an external HTML partial page. In the directive you 'compile' the HTML partial which allows you to use any directives that are on that page (ng-click, ng-class, etc) and then render it where the div is declared in the original page. This is a bit more advanced, so look at the ng-view example first.

For sending the data back to the mvc application, all you need to do in angular is declare a resource with the url back to the mvc app where you post the data and then send it some data. Something like this:

$resource('api/updateUserData',
          {userName: userNameVar, userEmail: userEmailVar},
          function(data){
            //callback code where you do something with the returned data if any
          }
);

There is a nice github project called angular-app that has a basic CRUD setup, shows you how to layout the angular app itself, how to use tests, how best to structure the angular files, etc. This may also be a bit more than you need for this small project, but it can at least give you some ideas on how to move forward if your app grows.

Upvotes: 1

Related Questions