Getting objects with Jquery and sending via Ajax to MVC C#

Question

I’m trying to understand how to receive HTML objects for a MVC C#controller. I know the code below works if the controller has string[] teste.

<input type="hidden" name="teste">
<input type="hidden" name="teste" value="testes">
<input type="hidden" name="teste" value="testes1">

But I saw some codes, mainly for data grids, which creates generic filter, where field values, filter type and value, properties receive nomePropriedade_1.

How to handle this in Jquery, and how to handle this in the MVC C controller#?

Examples:

http://www.pontikis.net/labs/bs_grid/demo/

http://bootsnipp.com/snippets/featured/dynamic-form-fields-add-new-field-on-focus-or-change

http://bootsnipp.com/snippets/featured/multiple-fields-contact-form

Answer 1

Understanding the ModelBinder of ASP.NET MVC

Basically what the ModelBinder does is try to reconcile the names and values of the fields of a form (in the case of POST) or a request (in the case of GET). Consider your example first:

<input type="hidden" name="teste">
<input type="hidden" name="teste" value="testes">
<input type="hidden" name="teste" value="testes1">

In this case, if the form was sent to a Controller signed as follows:

public ActionResult MinhaAction(string[] teste) { ... }

The ModelBinder would identify a name variable teste with 3 values: empty, "testes" and testes1, and would correctly create a list for them as mentioned in the question.

The logic extends to any and all list, with the difference that in the form sufficient information is expressed so that the ModelBinder can make the correspondence.

Suppose now that I want my method to now receive a complex object. Suppose the following ViewModel:

public class MeuViewModel {
    public String NomeProduto { get; set; }
    public String NomeComprador { get; set; }
    public int Quantidade { get; set; }
}

I can have a form like this:

<input type="hidden" name="meuViewModel.NomeProduto" value="Coca Cola">
<input type="hidden" name="meuViewModel.NomeComprador" value="Cigano">
<input type="hidden" name="meuViewModel.Quantidade" value="1">

Or simply:

<input type="hidden" name="NomeProduto" value="Coca Cola">
<input type="hidden" name="NomeComprador" value="Cigano">
<input type="hidden" name="Quantidade" value="1">

And a Action signed with the following argument:

public ActionResult MinhaSegundaAction(MeuViewModel meuViewModel) { ... }

The ModelBinder will fill in the information correctly.

Now, for complex object lists, you need to index. This can be done in two ways:

• Numerically indexed;
• For Guids, made, for example, by Nuget packages such as Mvcbegincollectionitem

Basically, I can do this:

<input type="hidden" name="meuViewModel[0].NomeProduto" value="Coca Cola">
<input type="hidden" name="meuViewModel[0].NomeComprador" value="Cigano">
<input type="hidden" name="meuViewModel[0].Quantidade" value="1">

<input type="hidden" name="meuViewModel[1].NomeProduto" value="Guaraná">
<input type="hidden" name="meuViewModel[1].NomeComprador" value="Marlon">
<input type="hidden" name="meuViewModel[1].Quantidade" value="2">

<input type="hidden" name="meuViewModel[2].NomeProduto" value="Água Tônica">
<input type="hidden" name="meuViewModel[2].NomeComprador" value="Fulano">
<input type="hidden" name="meuViewModel[2].Quantidade" value="3">

The ModelBinder is able to understand that this should become a list if the method is signed:

public ActionResult MaisUmaAction(List<MeuViewModel> meuViewModel) { ... }

But in the case of JSON?

Well, from the MVC3, a Action can already receive JSON because the class JsonValueProviderFactory, that feeds the ModelBinder, already registered by default. That is, I can send the same form by Ajax as follows:

$.ajax({
        url: '/MeuController/MaisUmaAction',
        type: 'POST',
        dataType: 'json',
        data: [
        {
            "NomeProduto": "Coca Cola",
            "NomeComprador": "Cigano",
            "Quantidade": 1
        },
        {
            "NomeProduto": "Coca Cola",
            "Nome": "Marlon",
            "Quantidade": 2
        },
        {
            "NomeProduto": "Água Mineral",
            "Nome": "Fulano",
            "Quantidade": 3
        }
        ],
        contentType: 'application/json; charset=utf-8',
        success: function (data) {
            var message = data.Message;
            $("#flash").html("Sucesso! " + message);
        }
});