Question

I looked for a long time for a solution to this problem but I cant find anything yet. I have defined a strong type as the model of a controller/view that I’m using; the problem is that the model references other complex types, so I need to partially update sections of that model. For example, in one tab of the page I get partially another view that brings a grid with some selections; another part brings another section; so after the user selects their options and submits, I need to send all those small pieces to the post operation.

I already created the JSON object that I need and sent it the controller. At the action, I succesfully get the model, but the JSON does not come to the action. So how can i pass that JSON to the view as an additional parameter to the controller action?

I also already checked the request with fiddler and the JSON is being sent. Does the object get passed in a special collection?

---

Sure. The view expects or is strongly typed to a Model, in this case is a “Provider” entity. This entity has primitive types and complex types. SInce the entity is still in creation process i need to pass partial objects to complete the entity when the post create action is reached.
Heres part of the model:

public class Provider2 : IProvider
{
    public int Id { get; set; }
    public bool IsApproved { get; set; }
    public string RejectionNotes { get; set; }
    public string Name { get; set; }
    public string Phone { get; set; }
    public string Fax { get; set; }
    public string Email { get; set; }
    public int OfficeAddressId { get; set; }
    public virtual Address Address { get; set; }
    public virtual ICollection<Chain> ProviderChain { get; set; }
    public virtual ICollection<ProviderContact> ProviderContacts { get; set; }
    public virtual ICollection<ExaminationPrice> ExaminationPrices { get; set; }
}

THere is no problem with the simple types such as an integer, string and so on.
As you can see, there are collections and complex types, these types are retrieved from partial views and an that moment are separate entities, so i need at submit time to wrap them perhaps in a json or another object such as JSON and get it at the moment that the create action is reached:

[HttpPost]
public ActionResult Create(Provider provider, Another object to be passed???)
{
    if (ModelState.IsValid)
    {
        _repository.Save(provider);
        return RedirectToAction("Index");
    }
    return View(provider);
}

The primitive types and the addres properties are mapped at the model, so they are no problem, but the collections are not mapped, so thats the reason for me to trying to pass an aditional object such a json to wrap all the parts from plain HTML to javascript objects because theyre are not mapped directly to the model.

So, by this javascript im sending the data i need to the view and its sent, but apparently the action does not receives the json object.

  $(function () {
        $("#ButtonSave").click(function () {
            var prices = getPrices();

            if (prices != null) {
                $.ajax({
                    url: '/Provider/Create',
                    type: 'POST',
                    dataType: 'json',
                    data: prices,
                    contentType: 'application/json; charset=utf-8',
                    success: function (data) {
                        alert('Success');
                    }
                });
            }
        });
    });

    function getPrices() {
        var elements = '[';        
        var rows = $("#selectedElementsGrid tr.selectable").each(function () {
            var idValue = '{price : { "Id":' + $(this).find(".id").val() + ',';
            var nameValue = ' "Name":"' + $(this).find(".name").text() + '",';
            var priceValue = ' "Price":"' + $(this).find(".price").val() + '"} },';
            elements = elements + idValue + nameValue + priceValue;
        });
        elements = elements.substring(0, elements.length - 1) + ']';
        return JSON.stringify(elements);
    }

Thanks in advance!

Answer 1

Diggin a lot about the MVC3 framework i found that you can pass as many parameters you want to a controller action, the key to do this is to keep good handling of models and requests.
Also i found thath the easiest way to achieve this is through JSON, first of all you define your controller action with the parameters you require:

[HttpPost]
public ActionResult AddContact(Contact contact, int Id)
{
    var globalType = _repository.FindOne(p => p.Id == Id);
    if (globalType.Contacts == null)
    {
        globalType.Contacts = new List<Contact>();
    }
    globalType.Contacts.Add(contact);
    return View("Index", globalType);
}

Then from markup you define a complex JSON that will pass the parameters:

    var contact = { Id: $('#FieldId').val(),
            Notes: $('#ContactNotes').val(),
            Name: $('#ContactName').val(),
            Phone: $('#Phone').val(),
            Fax: $('#Fax').val(),
            Email: $('#Email').val(),
            OfficeAddress: { Country: $('#Country').val(), 
                    State: $('#State').val()
                    ZipCode: $('#ZipCode').val()
            }
        };                                

    $.ajax({
        url: '/Contact/Edit',
        contentType: 'application/json; charset=utf-8',
        type: 'POST',
        dataType: 'json',
        data: JSON.stringify(contact)
    })
    .success(function (result) {
        // Display the section contents.
        alert('Contact updated succesfully!');
        window.location.href = result.Url;
    })
    .error(function (xhr, status) {
         alert('The provider could not be updated.');
    });

Note that the Id Parameter is called the same as in the action method. The complex type is infered by the MVC framework automatically, the only condition is that the properties must be named the same.

Another approach to achieve the same results are definig a controller action with 2 diferent JSON types, heres an example.

Controller Action:

[HttpPost]
public ActionResult AddContact(TypeA  typeA, TypeB typeB)
{
    //Some logic...
}

JSON:

    var _typeA = { Id: $('#FieldId').val(),
            Name: $('#ContactName').val()
        }; 

    var _typeB = { Id: $('#FieldId').val(),
            Name: $('#ContactName').val()
        }; 

    $.ajax({
        url: '/Controller/Action',
        contentType: 'application/json; charset=utf-8',
        type: 'POST',
        dataType: 'json',
        data: {typeA:JSON.stringify(_typeA)},{typeB:JSON.stringify(_typeB)}
    })
    .success(function (result) {
        // Display the section contents.
        alert('Contact updated succesfully!');
        window.location.href = result.Url;
    })
    .error(function (xhr, status) {
         alert('The provider could not be updated.');
    });

Hope this help you