Ajax post with complex viewmodel data giving 500 response code

Question

I have to send InvoiceViewModel data from view to action method through ajax. But, I am getting 500 Internal server error code.

View model details I need to send from view to controller

public class InvoiceViewModel
{
    [DisplayName("Invoice ID")]
    public string InvoiceId { get; set; }
    [DisplayName("Number of Line items")]
    public int LineItemCount { get; set; }
    public int TotalItemCount{get;set;}
    public int VendorId { get; set; }
    public List<SoftwareViewModel> LstSoftwares { get; set; }
    InvoiceViewModel()
    {
        LstSoftwares = new List<SoftwareViewModel>();
    }
}

public class SoftwareViewModel
{
    public string Name { get; set; }
    public string Edition { get; set; }
    public string Version { get; set; }
    public string LicenseNumber { get; set; }
    public string ExpiryDate { get; set; }
    public string AssetNumber { get; set; }
}

Here is my controller.It resides directly in root directory. I am providing url of ajax call correctly.

public class HomeController : Controller
{
    [HttpPost]
    public ActionResult SaveInvoice(InvoiceViewModel invoiceDetails)
    {
        ViewBag.Message = "Your application description page.";
        return View();
    }
}

If I change parameter type of action method as follows. It's hitting action method. But, invoiceDetails gets null

   [HttpPost]
    public ActionResult SaveInvoice(string invoiceDetails)
    {
        ViewBag.Message = "Your application description page.";

        return View();
    }

Here is ajax call code.

function SaveInvoice()
{
    var mydata = {
        InvoiceId: "",
        VendorId: 0,
        LineItemCount: 0,
        TotalItemCount: 0,
        LstSoftwares: {}
    };
    var testdata = JSON.stringify(mydata);

    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        data:testdata,
        dataType: "json",
        url: "/home/SaveInvoice",
        success: function (resp) {
            alert("success")
        },
        error: function () {
            alert("fail");
        }
    });
}

Can anyone please tell me what I am doing wrong here.

Thanks

Answer 1

Jai's comment is right:

dataType: "json", change to dataType: "html", if result is html element

The only additional problem that I see is that your viewmodel defines

public List<SoftwareViewModel> LstSoftwares { get; set; }

And your posted data defines

LstSoftwares: {}

You're trying to post an object where a list is expected. The equivalent to a list in the JavaScript side is an array, like this:

LstSoftwares: []

However, it looks like you don't need this as an input value for your action. So I'd recommend you to use a different class for posting the data back to your server that the one used for displaying the data. I suppose that your list is there for a drop down list or soemthing like that. Most examples of MVC use the same clas as a view model for rendering the view, and for the action parameter. In the long run this only brings problems.

One easy solution is to make something like this:

// The class which has the "real data" of your entity:
public class Entity {}

public class ViewModel {
  public Entity MyEntity { get; set; }
  // Additional data for renderig the view
  public List<> {get;set;}
}

In this way, you have a single enity with the necessary data, which can be used as a parameter for your actions, and also as a part of your view model.

There are other possible patterns, but the main point is using different classes for different purposes.

NOTE: for know moe of what is going on yu can use your browser's console (press F12) and open the "Network" tab (that's the name in Chrome). Once there you can examine the full server answer, and it will propably show you the concrete exception that triggered the 500 error on your server side.