AngularJS Post HtmlForm to .NET WebAPI2

Question

I have a html form defined as:

<form id="userForm" name="userForm" class="form-horizontal" role="form" ng-submit="submitForm()" novalidate>

with a few input fields tied to an ng-model as so:

<input type="text" class="form-control" ng-model="formAttributes.title" name="formTitle" placeholder="Title of the Form" required>

I then post the form object via an angular service to a .net WebAPI 2 controller using:

$http.post('/api/UI', "=" + JSON.stringify(userForm))

The Post method in WebAPI2 takes [FromBody]string value and I got this type of post to work when userForm was a scope JSON object INSTEAD of the html form object itself but for whatever reason it doesn't work if I'm passing the html form object.

I have a ton of forms that I'm going to need to post to similar controllers, is there relatively easy way to post an html form object to a webapi2 controller without having to manipulate the form data object itself? Or, more clearly, is there a way to prepare webapi2 post method so that I can call it like this:

    $http.post('/api/UI',userForm)

I've read a ton of articles on webapi2 and that got me to successfully submit an arbitrary $scope.object that I created using the method above (if I prepend it with an "=", stringify the json object, and changed the contenttype header to json/charset8) but being able to submit the form itself seems a lot cleaner and I would prefer to do things that way. In any case I would like to know why I can't submit the html form object after I stringify it anyway.

Any help would be greatly appreciated. Thanks in advance!

Dalorzo · Accepted Answer · 2014-08-28 17:06:31Z

1

WebApi project is configured in the Global.asax there you will find a class named WebApiConfig. There you will find the "Media Formatters" that says if your WebApi is capable of serialize/deserialize JSON System.Net.Http.Formatting.JsonMediaTypeFormatter()

public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {
           //...

            System.Web.Http.GlobalConfiguration.Configuration.Formatters.XmlFormatter.SupportedMediaTypes.Clear();
            config.Formatters.Insert(0, new System.Net.Http.Formatting.JsonMediaTypeFormatter());
            config.Formatters.Insert(0, new System.Net.Http.Formatting.FormUrlEncodedMediaTypeFormatter());


            config.EnableSystemDiagnosticsTracing();
        }
    }

If the JSON formatter is the first item in your list you do not need to add the = sign since JSON will be your default deserializer.

edited Aug 28, 2014 at 17:06

answered Aug 28, 2014 at 16:59

Dalorzo

20k7 gold badges57 silver badges102 bronze badges

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

1 Comment

JakeHova Over a year ago

I thought if I removed the xml type from the list of formatters that JSON would end up being the default. As it appears, this is not true. I changed it to what you have which explicitly lists the JSON formatter first and now everything works as I wanted it to. THANK YOU!

Collectives™ on Stack Overflow

AngularJS Post HtmlForm to .NET WebAPI2

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related