Posting datatype html to ASP.NET WebAPI

Question

Have some problem to post html datatype to a webapi post method.

This is the post code

    $('form#katalog').submit(function(e) {
    e.preventDefault();
    var data = {
        action: 'katalog-callback',
        input: {
            Firstname: $('form#katalog #firstname').val(),
            Lastname: $('form#katalog #lastname').val(),
            Address: $('form#katalog #address').val(),
            Zip:$('form#katalog #zip').val(),
            City: $('form#katalog #city').val(),
            Phone: $('form#katalog #tel').val(),
            Mobile: $('form#katalog #mobile').val(),
            Email: $('form#katalog #email').val(),
            BuildStart: $('form#katalog #build-start').val(),
            Plot: $('form#katalog #plot').val(),
            BuildCity: $('form#katalog #build-city').val()
        }
    };

    var request = $.ajax({
      url: "/ajax",
      type: "POST",
      data: data,
      dataType: "html"
    });

    request.done(function(result) {
      if (result == 1) {
          alert('Thx!')
      } else {
          alert('Error')
      }
    });
});

And this is the WebAPI method

   public string Post(LeadModel lead)
    {
        try
        {
            svc.AddLead(lead);
        }
        catch
        {
            return "exception";
        }

        return "true";

And this is the Model

public class LeadModel

{
    public string Firstname { get; set; }
    public string Lastname { get; set; }
    public string Address { get; set; }
    public string Zip { get; set; }
    public string City { get; set; }
    public string Phone { get; set; }
    public string Mobile { get; set; }
    public string Email { get; set; }
    public string BuildStart { get; set; }
    public string Plot { get; set; }
    public string BuildCity { get; set; }
}

And this is the error message from IIS {"Message":"An error has occurred.","ExceptionMessage":"No MediaTypeFormatter is available to read an object of type 'LeadModel' from content with media type 'multipart/form-data'.","ExceptionType":"System.InvalidOperationException","StackTrace":" at System.Net.Http.HttpContentExtensions.ReadAsAsync[T](HttpContent content, Type type, IEnumerable1 formatters, IFormatterLogger formatterLogger)\r\n at System.Net.Http.HttpContentExtensions.ReadAsAsync(HttpContent content, Type type, IEnumerable1 formatters, IFormatterLogger formatterLogger)\r\n at System.Web.Http.ModelBinding.FormatterParameterBinding.ExecuteBindingAsync(ModelMetadataProvider metadataProvider, HttpActionContext actionContext, CancellationToken cancellationToken)\r\n at System.Web.Http.Controllers.HttpActionBinding.<>c_DisplayClass1.b_0(HttpParameterBinding parameterBinder)\r\n at System.Linq.Enumerable.WhereSelectArrayIterator2.MoveNext()\r\n at System.Threading.Tasks.TaskHelpers.IterateImpl(IEnumerator1 enumerator, CancellationToken cancellationToken)"}

Any clue how to solve this? We dont want to do a jquery post because we have to allow post cross domains.

Answer 1

The POST method is expecting a LeadModel object, but you are sending an object with 2 fields in it ("action" and "input"), so, the expected class should be:

public class MyModel
{
    public string action {get;set;}
    public LoadModel input {get;set;}
}

And your webapi method:

public string Post(MyModel data)
{
.......
// The input fields should be in "data.input"
.......
}

OR, you could change the AJAX call so it only passes the input fields. like:

var data = {
        Firstname: $('form#katalog #firstname').val(),
        Lastname: $('form#katalog #lastname').val(),
        Address: $('form#katalog #address').val(),
        Zip:$('form#katalog #zip').val(),
        City: $('form#katalog #city').val(),
        Phone: $('form#katalog #tel').val(),
        Mobile: $('form#katalog #mobile').val(),
        Email: $('form#katalog #email').val(),
        BuildStart: $('form#katalog #build-start').val(),
        Plot: $('form#katalog #plot').val(),
        BuildCity: $('form#katalog #build-city').val()
}

FYI, you said:

We dont want to do a jquery post because we have to allow post cross domains.

But the AJAX call you are doing is using POST ($.post is the same as $.ajax with POST as type)

Hope it helps.