500 - Internal Server Error on JQuery Ajax post (ASP.NET MVC)

Question

First off, I've been looking through all posts I could find that handles this error on JQuery Ajax calls, but most of them as due to wrong dataTypes expected back, and I'm pretty sure that's not my problem since this code has worked before.

What I'm trying to do is when I click one of my checkboxes, I want to retrieve a partial view with a model and populate it in #selectedProductContainer on my main view.

This is my main view (Shortened quite a bit) with the scripts that's running:

@model ProductMainViewModel
<div class="product-list-wrapper">
        @Html.CheckBoxListFor(m => m.PostedProducts.ProductIds,
            m => m.AvalibleProducts,
            entity => entity.Id,
            entity => entity.Name,
            m => m.SelectedProducts,
            m => new { @class = "productCheckboxList productSelected" + m.Id, data_price = m.Price.ToString() })
  </div>
  <div id="selectedProductContainer">

  </div>

<script>
 $(".productCheckboxList[type='checkbox']").change(function () {
        var isChecked = $(this).is(":checked");
        var value = $(this).val();
        if (isChecked) {
            ProductChange(this);
        }

function ProductChange(element) {
        var value = {
            Value: element.value
        }
        var container = $("#selectedProductContainer");
        $.ajax({
            url: "@Url.Action("ProductCalcSelection", "Home")",
            type: "POST",
            data: JSON.stringify(value),
            contentType: "application/json",
            dataType: "html",
            success: function(data) {
                container.append(data);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                alert("error: " + errorThrown);
            }
        });
}
<script>

The controller action for this call looks like this:

[HttpPost]
    public ActionResult ProductCalcSelection(string value)
    {
        var convertValue = Convert.ToInt32(value);
        var product = db.Products.FirstOrDefault(p => p.Id == convertValue);
        var accessories = db.Accessories.ToList();

        var productViewModel = new ProductFormViewModel
        {
            Product = product,
            Accessories = accessories
        };

        return PartialView("_ProductForm", productViewModel);

Here is first my View model for my partial view:

public class ProductFormViewModel
{
    public Product Product { get; set; }
    public List<Accessory> Accessories { get; set; }
}

And here is my partial view (Short version):

@model ProductFormViewModel

<div>
    <span>Hello</span>
</div>

The issue is that from the ajax-call I get back "error: Internal Server Error" in my alert box for the error handling. I've debugged through this entire call, and all my values are correct. It seems to freak out when the controller sends back the partial view and my view model.

In the back of my mind I feel like this is due to wrong dataType as response, but I expect html back, and that's what I should get, right? This worked earlier, but we had to make some small changes to the Accessory model and I'm aware that the problem should be connected to this change, but I can't seem to find the connection. I'll post my classes here too if they would be needed:

public class Product : IProduct
{
    [Key]
    public int Id { get; set; }
    public string Name { get; set; }
    public long Price { get; set; }
    public bool HasAccessories { get; set; }
}

public class Accessory : IAccessory
{
    [Key]
    public int Id { get; set; }
    public string Name { get; set; }
    public string CodeName { get; set; }
    public string AccessoryType { get; set; }
    public long Price { get; set; }
    public bool IsMultiplied { get; set; }
    public int ProductId { get; set; }
    //public virtual ICollection<ProductId> ProductIds { get; set; }
}

The change we made on Accessory was that we decided that we only need one ProductId per Accessory, earlier we use the virtual ICollection to store multiple Id's. That class looked like this:

public class ProductId
{
    [Key]
    public int Id { get; set; }
    public int ProductIdHolder { get; set; }

    [ForeignKey("Accessory")]
    public int AccessoryId { get; set; }
    public virtual Accessory Accessory { get; set; }
}

We're not using this at all now, but instead uses the regular int ProductId.

Any ideas to what could have gone wrong?

EDIT: I'm adding my browser devtools error message:

POST http://localhost:54213/Home/ProductCalcSelection 500 (Internal Server Error) send @ jquery-2.1.3.js:8625 jQuery.extend.ajax @ jquery-2.1.3.js:8161 ProductChange @ offert.js:113 (anonymous function) @ Offert:179 jQuery.event.dispatch @ jquery-2.1.3.js:4430 elemData.handle @ jquery-2.1.3.js:4116

Line 113 in offert.js is where my $.ajax begins. Line 179 for anonymous function is my call to ProductChange() function.

Answer 1

As @Mackan and @gamesmad pointed out in the comments, I was looking at the wrong error. When I opened Network in devtools and clicked the call->Preview I got an asp.net error message that gave me all information I needed. In my case I had forgotten to update the partial view I send back with the updated model.