How to process submit data from complex Angular.js web form

Question

My web form (built with Bootstrap 3 and Angular.js 1.3) is lengthy and mildly dynamic. In other words, there are a few cases of tabular arranged input fields and other regular input fields with an associated "Add another" button, as well as some input fields that toggle (hide/show) based on the input or selection in preceding fields. In the controller JS, I set up an object in scope to hold all the form data as follows:

// Angular.js controller function
$scope.formData = {};

In the form's HTML, I backed all the fields with ng-model as follows:

<html data-ng-app="formApp">
  <body>
    <form class="form form-horizontal" data-ng-controller="formController">
      <div class="form-group">
        <label class="control-label" for="username">Username</label>
        <input type="text" name="username" data-ng-model="formData.username" class="form-control" data-ng-minlength="3" data-ng-maxlength="8" required>
      </div>
    </form>
  </body>
</html>

So by the time the form is filled, $scope.formData would have the following structure:

$scope.formData =>

  { "username": "jdoe",
    "roles": [
      "Employee", "Lead Engineer", "Coordinator"
    ],
    "location": "Palo Alo, CA",
    "and so": "on..."
  }

I want to use $http to asynchronously post the data to an ASP.NET generic HTTP handler, which will process the form submission and respond back in JSON format. What is the recommended approach to post the data? When I use JSON.parse($scope.formData), the object is broken into individual request parameters and not submitted as a single object. And if I do get the object across as single object, how do I process the form submitted data? Ideally, I want to convert that entire formData object into a C# DTO object that I can work with on the server side.

Abdelrahman M. Allam · Accepted Answer · 2015-04-10 20:17:58Z

1

First you can submit your $scope.formData as it is with $http() using the post method and then on the server side you can get your request data deserialized using Newtonsoft https://www.nuget.org/packages/Newtonsoft.Json/

maybe doing something like this

fromData =  JSON.stringify($scope.formData)

$http.post('/someUrl', {fromData:  fromData})
.success(function(data, status, headers, config) {
// this callback will be called asynchronously
// when the response is available
}).
error(function(data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});

server will be something like this

public HttpResponseMessage Post(string jsonstring)
{
     GenerForm frm = JsonConvert.DeserializeObject<GenerForm>(json);
     string username = frm.username;      
}

// you need to define class

class GenerForm {
    string username {get;set;};
    List<string> roles {get; set;};
    List<string> location {get; set;};
    // and so on
 }

edited Apr 10, 2015 at 20:17

answered Apr 10, 2015 at 19:39

Abdelrahman M. Allam

92210 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Web User Over a year ago

I am using ASP.NET 2.0, so don't have access to Nuget. Is there a way to install JSON.net?

Abdelrahman M. Allam Over a year ago

review this link and I think you need to add System.Web.Script.Serialization linke

Web User Over a year ago

Even in the provided link, I don't see how the submitted data is accessed, since the example involves posting an empty object as data. In the generic HTTP handler, I tried accessing the submitted data as a request parameter: context.Request.Params["formData"] but that returns an empty string. On the $http/Javascript side, I am using $http.post('http://url', { formData: JSON.stringify($scope.formData) }) and I can see the request payload in Chrome developer tools sending the stringified version of the data. But I am unable to retrieve that on the server side.

Web User Over a year ago

for some reason, context.Request.Params["formData"] does not work, but a SO post led me to use string json = new StreamReader(context.Request.InputStream).ReadToEnd(); which works, but I am not very happy using since I would rather access the submitted request parameter value by its name.

Collectives™ on Stack Overflow

How to process submit data from complex Angular.js web form

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related